Embed Metrics: New in Tableau 2021.4

0:00Hey Tim here, in this video I'm going to

0:01show you how you can actually embed metrics

0:03in 21.4.

0:04This is really nice to see because up until

0:06now you've only been able to embed dash

0:08boards.

0:08In the Tableau conference Tableau talked a

0:10bit about embedding all of Tableau

0:12everywhere

0:13and so it's really nice to see every single

0:15part of the Tableau platform become embedd

0:17able in other

0:17solutions. It really brings analytics to

0:20the places where we actually work. So let's

0:22show you this

0:22feature. I'm going to take this particular

0:24metric. If I click into it you see that I

0:26do get this

0:27sort of indicator and for a while this

0:29target was actually sort of beating the

0:32target of 50k. So you

0:33can see that here it goes green and here it

0:35goes red and essentially I want to take

0:36this metric

0:37and embed it inside of a platform. So what

0:39I'm going to do is I'm going to go up here

0:41to the top

0:41right hand side where it says share metric.

0:43We're going to hit share metric and when we

0:45do that we

0:46get this share window. Now what I could

0:48actually do is share it with someone but

0:49new in 21.4 you

0:51can now embed these inside of other

0:52platforms. So I'm going to copy the embed

0:54code and the embed

0:56code is essentially a piece of code that

0:58allows two things. It gets the asset from

1:00the Tableau

1:01service. In this case this is the metric.

1:03It tells Tableau what it is and then the

1:05second thing is it

1:06loads some javascript that actually runs

1:08that particular asset in the website.

1:10Essentially the

1:11metric needs to look like the metric and

1:13that is all handled essentially by the

1:15javascript.

1:15It comes in and does a bit of html and css

1:17formatting and also looks at things like

1:20authentication and stuff like that for you.

1:22So the way I'm going to embed this is not

1:24how you'd

1:24really do this in a real application but in

1:26a simple way this might be something you

1:28might do

1:29if you're using single sign-on because

1:30essentially everyone might be signed on

1:32already. So let's go

1:33ahead and go to this. Now this is actually

1:35something called the html5 boilerplate. I

1:38've

1:38actually just downloaded it off the

1:40internet. It's used in web development to

1:41give web developers a

1:43starting point so they don't have to go and

1:44code 100 things from scratch to work on a

1:46whole range

1:47of devices. If I actually double click it

1:49you'll see it opens in a tab and you can

1:50see it says

1:51hello world this is a html file boilerplate

1:53this below is a metric. We currently don't

1:56have a

1:56metric there so I'm going to edit this html

1:58file with the embed code that I just copied

2:00and we're

2:01going to see what it looks like. So let's

2:03go ahead and open this. I use vs code as my

2:04code editor so

2:05it's going to slide in here from my other

2:08screen and now what we have is the html

2:10code. Now if

2:12you've not used html or css before don't

2:13worry don't be intimidated it's actually

2:15pretty easy

2:16to work with. It's just like a word

2:18document except for you get to see all the

2:19formatting

2:20and everything that's going on. You can see

2:22this p tag is essentially a paragraph this

2:24h2 is a

2:25headline you sometimes see that in word as

2:27well. I could make it a h1 or a h3 let's

2:29just make this

2:30a h3 and then you can see the change when

2:32we get there. But now I can actually just

2:34make this

2:35work for the use case that I want which is

2:37to paste the embed code that I copied. So

2:40just to remind you I've copied this embed

2:42code I've just selected this little option

2:44here I click

2:45on that and it actually automatically

2:47copies it to the clipboard. When I go in

2:49here all I'm going to

2:50do is go to line 31 and paste. Oh no copy

2:52the wrong thing so let's let's make sure we

2:55actually

2:55copy the right thing now that is actually

2:57copied. I didn't actually click it before

2:59and let's now

3:00actually paste this on line 31. And you can

3:02see the two things that I mentioned here

3:03before.

3:04Let me make it just larger so you can see

3:06this a little bit more clearly and we'll

3:08sort of open up

3:09this window to the right. So on this first

3:11line you've got the asset that I was

3:12talking about. So

3:13this is essentially some sort of tag it

3:15says tableau metric and it's telling it

3:17where to go

3:17and get the metric from it's from the table

3:20au online website it's on my civic tableau

3:23tim dev

3:24site you've got metrics and you've got the

3:27asset sort of id 2531 is the id of this

3:30particular tag.

3:31It's actually what you see up here if you

3:33go to the url you can kind of see it up

3:34here so if

3:35you're trying to build a platform that can

3:37sort of dynamically call this you could use

3:39something

3:39like the tableau server rest api to go and

3:41get a list of all the metrics where they

3:43belong and you

3:44can be dynamically loading these metrics as

3:45people create them on server that could be

3:47something that

3:48you do rather than manually going and

3:49grabbing the embed code you could

3:51essentially just dynamically

3:53build out this url and then load them in as

3:55you want. Now the second line is the

3:58javascript that

3:59makes sure that that metric works it's

4:01essentially using something called the

4:02javascript api you can

4:03see javascript api for tablo.metric and i'm

4:07sure there's other javascript apis here

4:09that do various

4:10different things but it's essentially a

4:12piece of code that tableau have written

4:13that makes this do

4:14what it's supposed to do. So let's go ahead

4:16and save this i'm gonna sort of minimize

4:18this a little

4:19bit more and when i go back to my web page

4:21you'll see that there's no change here now

4:23i made two

4:23changes i turned this header from a h2 to h

4:263 so we should see it get smaller and the

4:28second thing is

4:29we should get the metric to load so let's

4:31go ahead hit refresh give it a second and

4:33there you go we

4:34have the metric it's loaded absolutely fine

4:36there so this is great i'll just make it

4:38larger for

4:38accessibility reasons and so you can see

4:41this is working now what is essentially

4:43going on here if

4:43i just right click on this and i inspect

4:46the element it opens up the html inspector

4:49on the

4:49right hand side you need to have developer

4:51mode enabled to see this but in essence if

4:53i just go

4:54and select everything that this has

4:56actually brought in let's just make sure

4:58that this is

4:59actually going on so you can see here that

5:01this is essentially this html tag here is

5:04actually an

5:04iframe so let's let's fully select the if

5:06rame so if you're if you're into this kind

5:08of stuff this

5:09is what's essentially tableau has done with

5:11that javascript that asset that it went and

5:13got

5:14essentially created a mini version of a web

5:16page inside of this particular context and

5:19so that's

5:19what all an iframe does it basically tells

5:21it where to go and get something from the

5:23internet

5:23and it creates its own html document inside

5:26of that little tiny space and so you can

5:28see here

5:29you've got things like the header and

5:30everything else and then the metric is

5:32actually just being

5:33built here using javascript now what's

5:35interesting is this doesn't feel like what

5:37tableau uses to

5:38build uh visualizations it's not using vis

5:40ql it's actually using something called

5:42react which is

5:43another web technology to make websites

5:45just work a little bit better and be more

5:47dynamic so

5:48you can see the individual elements that

5:50are being sort of built here if i open this

5:52out i'm sure we

5:53can even see the individual code that

5:55generates these lines it's an svg sort of

5:57item so you can

5:58see all the different things are sort of

6:00broken down and i can keep going down and

6:02there you go

6:03you can actually see the individual data

6:05points that sort of explain this path a

6:07little bit and

6:08you can kind of dig into this so this is

6:09why it's not using something like visql

6:11which actually just

6:12renders static images so that's a bit of a

6:14sort of we've just gone off piece there me

6:16trying to

6:16show off my html understanding which i don

6:19't really have much of at all but

6:21nonetheless here we are

6:23this is how the embedding capability works

6:24so hopefully you find this useful hopefully

6:26you

6:26want to start embedding these things in

6:28different places the easiest sort of thing

6:30to do with this

6:31is if you use single sign-on and everyone's

6:33going to be authenticated like i was here

6:35you can just

6:35start using this if you're already embedded

6:37and you're using the same authentication

6:39for

6:40tableau as you're using for your portal

6:42then you can just go grab that embed code

6:44and most portals

6:45will have the ability to put things like

6:47this embed code in html into these sockets

6:49and boom

6:50you're done you can have four or five of

6:52these working and again just to show you

6:53how easy this

6:54is let's go back out get one more metric we

6:56'll put it just below it so let's get this

6:58one let's

6:59get share metric and let's copy the embed

7:01code go back to my html open this up with

7:04vs code it

7:04should come back onto screen there we go

7:06and where am i going to put this i'm going

7:08to put this just

7:09below i could tile these so they work a

7:11little bit better so i'm just going to put

7:13this again now

7:14what's interesting here is i don't believe

7:17i need this line of html again because it's

7:19already there

7:20you can see it's basically the same one

7:22above so all i'm actually going to do

7:23because i think i

7:24know how this works maybe let's see how

7:26well this works is i'm just going to leave

7:28one line there i

7:30don't need two versions of this because

7:32essentially this is already sort of the way

7:35that this is

7:35working i don't need to reference it twice

7:37so once that i've done that i'll hit save

7:39and if i go back

7:40to my html page refresh that i should have

7:42two metrics once that loads and it actually

7:45loads them

7:45side by side this is a really nice boiler

7:47plate it actually puts them side by side so

7:49here we go

7:50i've just created a page with some very

7:52simple metrics on there and it's really

7:54sort of nice

7:55to use and and work with so have a go at

7:57this it's really simple i think for lots of

7:59people

8:00to start using this everywhere and get

8:01involved with metrics thanks for watching

8:03and i'll catch

8:04you in the next video