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
Tableau | Data visualisation | Analytics