Google Tag Manager | Chris Worfolk | Skillshare

Google Tag Manager

Chris Worfolk

Google Tag Manager

Chris Worfolk

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
24 Lessons (56m)
    • 1. Welcome

      0:31
    • 2. What is Google Tag Manager?

      2:30
    • 3. Registering an account

      1:01
    • 4. Tags and containers

      1:54
    • 5. Creating your first container

      1:31
    • 6. Installing the GTM code

      2:32
    • 7. Installing in WordPress

      1:18
    • 8. Using Tag Assistant

      1:51
    • 9. Creating your first tag

      1:33
    • 10. Previewing and publishing

      2:57
    • 11. Setting up Google Analytics

      2:56
    • 12. Setting up Facebook Pixel

      3:13
    • 13. What are triggers?

      2:00
    • 14. Creating a trigger

      1:18
    • 15. Using the trigger in a tag

      3:54
    • 16. Sequencing tags

      3:13
    • 17. Everything is a tag

      1:37
    • 18. Sending events to Google Analytics

      2:32
    • 19. Custom events

      2:29
    • 20. What are variables?

      3:11
    • 21. Built-in variables

      3:28
    • 22. DOM elements

      3:55
    • 23. Cookies

      1:00
    • 24. Data layer variables

      3:18
11 students are watching this class
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

425

Students

--

Projects

About This Class

Google Tag Manager (GTM) allows you to quickly and easily manage your analytics scripts, remarketing pixels, click tracking software and any other software that requires JavaScript tags inserting into your website.

In this class, you'll learn how to use GTM, from the fundamentals to more advanced features. Step-by-step we will walkthrough:

  • Creating tags

  • Using event and URL-based triggers

  • Sequencing tags correctly

  • Tracking custom data with variables

  • Integrating with Google Analytics and Facebook Pixel

You will be able to follow along on your own website, from installing GTM, to setting up your tags, previewing, testing and publishing them.

Meet Your Teacher

Chris Worfolk is a psychologist and software consultant. He is the author of How To Exit VIM and Do More, Worry Less.

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Your creative journey starts here.

  • Unlimited access to every class
  • Supportive online creative community
  • Learn offline with Skillshare’s app

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

phone

Transcripts

1. Welcome: Welcome to this course on Google tag manager work of everything from the absolute basics right up to more advanced features. And you'll be able to follow along with your own website to build up your own library of tags and scripts. So whatever you're looking to add to your website will cover it here. I'm Chris. I've been a software consultant for 15 years now. Andi, I've taught over 20,000 students online and really excited to have you as the latest one, so let's get started. 2. What is Google Tag Manager?: before we dive in. Let's briefly look at what Google tag manager is, so there's a bunch of tools that we use when we're developing more than websites. Maybe it's analytics tools like Google and Adobe. Maybe it's marketing tracking tools like Facebook pixel on Twitter pixel. Maybe it's heat map on screen recording things like Hajjar or little pop up banners like Hello Bar or many of a tiny piece of JavaScript that we need to insert into our website. Well, all of these require us to do that on their known simply as tags, and what Google tag manager allows us to do is manage them all in one place. So rather than having to constantly change our hates to mail on, do a production code release every time we want to change anything, we can just do it all in Google tag manager. Once we install and our website and it's there on, it's kind of like a content management system for all these little tanks. The advantage is that once it's in there, then we don't need to do any further code changes we can add to remove tags without having to do a production release on risk breaking something on. We get a ton off advanced features built in such a being able to sequence doing browser detection, getting a lot of variables from the browse the that otherwise would have to code in tow. Our website. We just get these free on it also contained it's own version control so we can launch new tags. We can roll things back if they don't work as a. Even as a developer, I find it a really useful tool. Even though I can just edit my unhittable really easily, I find it a lot easier than manually doing that. There are disadvantages. Oh, on Warden is a perpetual problem. If your marketing team are constantly sticking these little script in and you're trying to build a really performance website, then it can be frustrating because it's loading so much of this extra job script in. That's a definite risk. Andi Robin been integrated into your get repositories version control. You've got this separate version control to worry about. Overall, though no, a huge amount of disadvantages, and I think you're really going to enjoy using this tool 3. Registering an account: in this lesson. I want to get you into Google tag manager. So to do that, the girl is I just tag manager. Don't google dot com on when you get here, you're probably s to sign in. Now, this is any Google account. So if you've got a Gmail account, that will work. If you've got, like, any Google can't use maybe for the Google Home page or for your android device that will also work. Google analytics, Google ads It's all the same one Google account. So if you have any of those, you consign in here with that, You may also want to set up a new account if you want this to be matched separately. But you can ally over people to manage your Google tags anyway, So just using a standard Google account is probably the best option. Once you've done that, you get to the Google dashboard, which will look at in the next lesson. So for now, hit the u R. L get signed in on Get ready to go 4. Tags and containers: in this lesson will look at a quick theory behind how everything is laid out in Google Tack manager. So we started off by using Google luggage on that goes into Google tag manager, but then below that we can have a Siris of organizational accounts. So if you've got a number of companies working for, each has a series of websites and each one could have its own organizational account now below that is a container and the container is a collection of tax that you want for one specific website. So one website or would app because you can use an act as well is one container. So if you have an app and a website, you can have two containers within the organization on then inside the containers themselves. That's where the tanks live. So let's look at a real world example of that to make clearer your organizational account might be, say, BBC and the BBC would have a toilet different containers. It might have a container for the BBC website separate one for the BBC news website on for the BBC news app that might have a separate containers as well. So you're one organization the BBC, but you have separate containers for each website. If you have now, we've in those containers. That's where the tags themselves lives. That may be using Google Analytics and the Twitter pixel one. Maybe you're using same analytics, but a screen recorder like Hajjar on another. Or maybe using analyst Adobe analytics on your app. Andi, that's fine, because you've got separate containers for each and so you can drop the relevant tags into each of those. 5. Creating your first container: in this lesson will create our first container. So we talked about this idea off containers on account. So you have an account kind of organizational level, and then the container is a specific website or app below that. So let's go do that now. Here we are on the Google tag Manager Dashboard on, which is gonna hit, create account on. Let's call this learning with Chris, the kingdom that's fine and then contain the name. It could be the your L, but it can also just be a name. So let's call this you will tank manager. Example on was set for Web. Obviously, if you're working on a mobile platform, you'll want to select the relevant when there, that's what we need to do on hit create. Definitely make sure we read everything here and then click. Yes. And here it's giving us the code that we can then install in. We'll look at this in a separate lesson, so I'm just gonna close this for now. But it's already taken us into this so we can hit this to give upto workspaces. And here we've gone you organizational account on. We've got our new container here that we can drill down into in this takes it to the dashboards. Let's explores more in the next lesson. 6. Installing the GTM code: in this lesson will install the Google tag manager code into our website, which is what makes the whole magic work. So if you remember from the last lesson when we created it, Google gave us the code straight away. But if you clicked off that for some reason no problem, it's really defined here. We're in tag manager and we've gone into our container on we're going to go appear to admin . And then under this container menu, there was this install Google tag manager on. This gives us the code to paste in. Now Google recommends that we put the JavaScript into the head. Andan also gives us this I framed to post into the body. So this is for users who have javascript disabled so that they contract both on the reason that they recommend you put this into the head. This will do the main work and they can differ a lot of the job script loading toe later. Where is this? Can't be deferred is easily so we generally stick out of the bottom, but I'm going to advise you slightly differently. I put everything at the bottom. The reason I do that is because the most. If we can shut down the bottom, the faster the user is going to see the website and get a usable website more concerned about user experience and getting that perfectly optimize so that the user more likely to do things to convert to not bound straight off the website Then I am about my. Tracking them was being 100% perfect. I'm happy with 99.9% tracking in exchange for a slightly faster website. But it's up to you. Let's insert this into a website so we'll go appear on will select that which has now been copied. And then I've built this Google tag manager example page that will be using to do some other work on throughout this project on and I've got the source code here. So right about this body tag, I'm gonna go here on just gonna paste this in getting lined up nicely on. In fact, we can get rid of these comments because they don't really add anything on. Then I'm also gonna take the no script version, so it's copy that as well and in certain below. Save that Andi, that's it done. Google tag manager is now installed in our website on. We can start using it 7. Installing in WordPress: in this lesson. I want to show you how to install Google tag manager if you're using WordPress. So if you are you probably familiar with your WordPress dashboard here on the easiest way to do it is with a plug in called Insect Head Inland footers. I've already got installed in here. If not, you can go off here, too. At new on a Fugitive search insert headers on foot is just like any normal plug in. You probably know how to do that, but you can go and click here and install it. Once you've got that in. What this will allow you to do is really easily at that code. So if you get on hit settings once you've installed it and activated it, there's this insert headers and footers option. You go into that and here if you want to insert any scripts into the headers into the body or into the footer. Egypt's Copy and Paste the code that we did we pulled out of Google tag manager on we inserted in here. So here you can see that I've already done that into the footer of my blawg. I've inserted both the script on the no script tag from Google tag manager on. Then if you just hit save, that's all you need to do forward breath. 8. Using Tag Assistant: By this point, we've installed Google Tag manage into a website, but how do we know it's working well in this lesson will cover that. One of the easiest ways to do that is if you're using the chrome Web browser, you can use a plug in called tag assistant. Just search for that. It's called Tag a System by Google. In this case, I've already got it installed. But if not, you will get a big actor chrome button here and that will give you this look like on here, which we can go on on. We hit enable, and then if we reload the page, this will tell us everything that's loaded. And here we can see Google tag manager on. We can check if we've got the right container, I d there. But it seems unlikely that we would have on this will also give you details of any over tags that Google tag manager is loading so super useful for debugging. If you're not using Google chrome, you're not gonna have this tag assistant plug in. But we can also just check manually by doing a view source. So on chrome on Mac, that's command you but on any of a platform on any of a browser, there's normally a view source. If you hit maybe the tools menu or the developer menu on that will bring up the source code for the page. There we go. Sorry, it's option command. You in chrome on Mac on, and here we can see that the code is that it's in the source code. This is the source code for the webpage, and we concede that so we can check that codes correct. So if you if you're not using chrome and you don't have tag, assist and then just look at the source code and make sure it's there. 9. Creating your first tag: in this lesson will finally start getting to the good stuff because we're going to create our first tag. So, first of all, here we are on the Google Technology dashboard and let's go down and select our container. And then once we get into the container workspace, we want to go Teoh tanks on. We're gonna hit new to rail first tag. There's lots of different pre defined tanks we can use, but in this case, we're just gonna select Custom hates Jamal, which will allow us to insert any script on which it's gonna put a really simple script in there. It's just a good old hello World show. It's working way we need. And then the over thing we need to configure for a tag is triggering. So when do we want this tact? If I at the moment, we've only got one option, which is to fight on all pages when the pages viewed. We could go here on other name for this tag, but also if we hit, save it will prompt us to create one. So let's just call this the first example tank it saved on there, wait for it to do its magic, and then we have our tag in our list. How do we know it's working? Well, let's look at that in the next lesson. 10. Previewing and publishing: in the last lesson. We create our first tag, but how do we know whether that's working or not? Well, we can use the preview mode on Google. Take manager to do that. So we hit preview. It takes a little moment on. We're now in this preview mode. So then, if we dio to our what paid and we reload it, we then get this tag, manage a console that appears at the bottom, and I can see tax void on this page. It's fired our first example tank. We can also open the developer consoles that's normally have 12 or right clicking if we get to inspect and then console. This will vary depending on browser, but the normally pretty similar we can see here the taggers fired on the script we wrote said, Log out to the console. Hello world. We can see that that happened here, so it looks like everything is working. That's great. Now if we go back to here, we can leave preview mode to turn that off. If we do, that goes back to normal. And then if we refresh the page here, everything's disappeared. What's happening here? Well, now that we turn it off. Nothing's happening anymore. We haven't published that tag, and if we want to publish the tag, then as and we're happy we've looked at the changes with preview Dennis or working, then we need to go appear to submit on. This will submit our changes. Now. This point Nasser's to create a version so we could just call this initial version. This is just so that you can help trap your own changes. None of this is visible over then in the version ING system inside Google tag manager. But if you ever need to roll back some changes because something's not working, then it's really helpful. If you've got some descriptions and version names here on, it will show is down here or shows that workspace changes, which is all the changes we've made since we last published it. Once we're happy with that, will hit publish appear on? That's it. Our new version is out. It's got one new tag in that looks good on. If we go back to our Web page, we can see we're not getting the Google tag. Manage a console at the bottom that was down here because that's only for preview mode, but we can see that tag itself is firing because it's putting that little console log into the developer console. So now this is live without any preview stuff turned on on. We've successfully published our first tag. 11. Setting up Google Analytics: in this lesson, We'll learn how Teoh set up Google analytics inside Google tag manager. So here we are in the workspace for our container again on we're going to go down to tamps and we're gonna add a new tab and get a tap configuration now before we chose. Custom hates to Male. But there's many pre built ones, including Google Analytics. A lot the Google products on a lot of third party products as well, where the tags kind of half figured for you. And you just need to tell it your account details. So there's a bunch of services here that you might be familiar with. For example, Pinterest tags, I think, Yeah, load of different options, some of the services you may use. And there's Maurin, this template gallery as well. So for now we want Google Analytics, Universal Analytics, which is the modern version of Google Analytics on. We're gonna select that on. We want to track paid views. Right now, it wants us to have a Google analytics setting which we can do in a variable on it wants us to add are tracking I d so toe get that we need to go to Google Analytics go into our Google Arnold property on. We're going to get down here to this admin option on under property. We want to go to tracking info on tracking code. And here we've got the tracking I D. Which is they give Lionel fix I d. That we would be putting in if we're inserting the Google Analytics code directly as we using tag manager. We're just gonna copy and paste that. And here we're gonna insert this into the tracking I D. And that's all we need. It's a good landless variable that tracking I d save Google analytics settings. That name is fine as a default. Okay, great. So here we are configuring tags again. We've told Google tag Manager that it's ah, Universal Analytics tag. We want to track the page view. We can use overs later, but right now on take the settings from this Google Anil settings which will give it our property. I d. From Google analytics. Finally, we're gonna get onto triggering, and again, we're going to select all pages on just hit save again. We can just take that, maybe even showing it down because that's quite long. Universal analytics that will do it save. And there it is. It's appeared on ready to publish 12. Setting up Facebook Pixel: in this lesson, I'll take you through a never really common task that we use in Google Tag. Manage it and that's installing the Facebook pixel if you're running Facebook cancer and you'll definitely want the Facebook pixel to be able to track your conversions. So let's look at how to do that now. So we want out here again. We're on the tags view of our workspace on. We're gonna hit New on going to tag configuration. Google doesn't provide a pre built one for the Facebook pixel show ever. They're having some kind of argument given they provided for overs. But that just means we need to use the custom hates Jemele option again. And then on Facebook. We're in business manager, and if we get to the menu, roll it out. Under events, we have pixels, various pixels, hair select the pixel that you would like on then appear. We've got this set up menu and we want to install the pixel on. We want to get a disruption that says manually, add pixel Teoh website. This is the code wind but end so we can just click to copy on that and then we'll go back to Google tag manager on here we have where we can inside hex Jemele budgets Paste it into that. You could remove these comments if you want. I'm not going to hear on. Then again, we need to select the triggering we want on all pages because we want Facebook to be able to track everyone so custom HTML we've inserted are pixel code we've set tracking on. Then again, we'll just sit save and we'll call this one Facebook pixel on safe. Okay, great. So we've now got our example tag. Are Google Analytics on our Facebook pixel? Let's check. All this is working. So that's going to preview mode on goto our example Page refresh here and here We have a good example tag A Google Analytics, our Facebook picker have all fired. So that's great. So back in here, let's leave preview mode. Yeah, that's fine on let's publish these changes as well, so you can hit submit on version name Scott like Google Analytics on Facebook pics. So publish on Great. So we've now got free tags live. We can see all of them here. These these are changes, so we've added to tags and a variable will learn more about variables later in the course. And so all of our tags on our life 13. What are triggers?: in this lesson, we'll learn what a trigger is. So typically, at least in the early days, we might just load a tag based on the boat load on me. What? I just said that all pages. So anytime a page lows, we're gonna find all of the tanks. But a lot of time we actually want to do something more specific, so we might want to load a tag only on specific pages or when specific actions happened. That's when we want to file attack. And we could do that by configuring the triggers. So we might consider we might use page views those trigger and filter it based on the u. R l or not at all in the case of all views. But we might also want to say, Let's have a trigger for when someone clicks on something or when they scroll a certain length down the page after a certain amount of time has passed that they've been on the page, or maybe even a custom event where we say okay in our job, script about website will fire this custom event, and if so, we want you to activate trigger. Let's look at some examples for that man. So a Google analytics who wanted to track all of our website visitors. So we just use the all page views trigger for that, and the Facebook pixel would probably want the same. But for this example, let's say we only wanted on the E commerce pages so we might create trigger the only triggers on certain you RL's Andi. Then we want to send it invent to Facebook to say someone has made a purchase. Then we want to monitor for when someone's clicking the add to cart button on. At that point, that trigger will activate to say OK, now we want to fire these tags. That's the theory of triggers. Now let's go implement them in the real world. 14. Creating a trigger: in this lesson, we will create our first trigger. So here we are again on our workspace. We're going to go down here to triggers and who surprises. We're going to click on new and select trigger configuration. Now we've got a bunch of options here as to what we can trigger things on. So, by default, everything was using this page view. That was the one trigger we had from the start. But we've also got all of these options with forms and custom events on. Right now, we're gonna look at clicks and we're going to select clicks for all elements. So this will mean that we can create trigger whenever anyone clicks on any part of the Web page. Then this trigger will be used on it will trigger any of the tags that we then linked to it . So let's create this and then we'll go link it up to a tap. So let's call it all clicks. Let's make it all OK. See, that makes more sense. It save on that. We've created our first trigger. Let's use it in the next lesson 15. Using the trigger in a tag: in the previous lesson. We create our first trigger, which is here. So now let's go actually use the trigger because it doesn't do anything until we aren't attack. So on the tax screen we can go to new and and tag configuration, which it's gonna use a custom HTML wondrous to demonstrate it. Working on Lick It should be a click, which it's going again. Look at to the console that there was a click on. We've also got this tank firing options currently set to one's prevent on. Let's look at that as well. So on the triggering, he and we're going to select all flicks. So now what that means is, any time someone clicks, it's going to trigger this tag and it will log. Click out to the console. Let's save that for now. So this is We'll call this click tracking now. I spoke about that tank firing options, so let's look at that as well. Let's create a 2nd 1 and this one's gonna be pretty much the same. We're not create a script that does a concert log once per page. Click great. So in the advanced settings now we've got this tag firing options on instead of it being once per event. We can go on this once per page. So that means even if people click multiple times because we've said we only want tact. If Iowans for page l any file ones and then again in triggering we're gonna slip thistle clicks call it tracking once per page greats who have now created these new tags that truck are clicks on. We've linked them up to the trigger Week raid. So let's going to preview mode on will bring a par example. What pages? Well, it's giving out a refresh to you. Load everything so we can see right away that the free existing tanks that we told to fire on page you have fired down here. These haven't fired yet. Let's also open the developed Come. So So right now we've got this hello world from the first example Tag will create but nothing else. Now let's try. Let's click on the page on Boom so we can now see that both clip tracking on click tracking one's per page have both fired on this page as well. And we can see that in the consoles well because as a click on a once per page like Now let's try flicking again and again and again, Okay? And what we can see here is that the click tracking tag, which we said would pi a once per event every time we click on that trigger has activated its firing again. We are over tag that we create that we said Okay, only fire this woman's per page that hasn't fired again because obviously it's following the rules off. Once you fired one someone page, then don't fire again. That's the basics off how we use a simple trigger like Let's take this to you a bit more in advance step. 16. Sequencing tags: Sometimes we need tanks to fire in the right order. For example, let's say we're using the Facebook pixel. And if someone reads Blood Post, we want to tell Facebook that that has happened so that our Facebook ads know that someone successfully clicked through on that had and read the blood post. Let's look at how we would do that. We'll start by creating a trigger so we'll go down to triggers what new, um, or go for paid view. But let's filter it So we only want this to fire when the page path starts with blawg. So we know that they're on the block on what's called this a have log page view. Great. So we've now got a trigger that will fire any time someone lands on a page that starts with block and then in tags. We're in a great new tag on. We're gonna use custom hates to. Now on, we're gonna use the Facebook pixel standard event that says someone has viewed content. I've got that snippet here, so we just need this that's talking to Facebook. Quick sort. Same track on. We're tracking a view content event which can then optimize your Facebook ads for On Under Triggering will select Blawg paid view. Now this looks fine, but actually what would happen if this tag fired before the Facebook pixel fires? Because it's the Facebook pixel tags that inserts this f b que variable dysfunction that were then calling. That would be bad. And so we want to make sure we fire the Facebook pixel before we fire this tag. And to do that, we can go into advanced settings and we've got this tag sequencing. And what we want to do is to like this to say, fire a tag before this Tigers fired will select that, and we'll say you must find the Facebook pics. So before you fire this tag, But let's give it a name to make clear at Let's call this Ah, it's called Facebook pixel blawg Post view on Greg Lots of dates. And now we're saying fire attack before this bug post view, which is the Facebook pixel tag. Um, if Facebook pixel doesn't fire, we can also take this box on that will make sure that if the Facebook pics or fails for any reason, then we won't try and send the data to Facebook. Let's slave that on. Then we get We've now got this first picture of, like, post view. There will only fire after we've Lord it the Facebook pics loss. And that's how sequencing works. 17. Everything is a tag: in this lesson. I want to reinforce an idea just in case anyone is not under sent clear on it. And that's that whenever anything happens, it happens in that tag. So there's no concept of tags versus events. That, or just tags when I mean by that is you might think you had tax. For example, the Google Analytics Terrible Twitter pixel tackle, the adobe animal six tank on that time would then have events and events were things like paid for use registrations. Log in that you would fire off to that pixel. But that's not the case. Each of those page views registrations Loggins wherever of anyone. That is also a tag alongside Google analytics. Now we've been sequence England to make sure that the original tank fires before that kind of invented tag. But if you think about how you would implement that in hate to melt in your own website, what you would do is you would load in the D tag on. Then you would create a separate script tag to do the thing you wanted it to do. For example, if you wanted to tell the Facebook pixel that someone had run a search, then you would quit. Separates Grip Bach after the attack that included the Facebook pixel to call the function to, say, track this as a search. So that kind of event, that's also a tag. When we want anything to happen, it's attack. Hopefully that makes it super clear. 18. Sending events to Google Analytics: in the previous lesson. We create a trigger for this blawg page view. Onda. We send the information to the Facebook pics or using a new tag. And what happens if we wanted to also send that to, say, Google analytics will again? And who discussed everything's a tag, So we need to get a new tag for that on that pretty easy. We just hit new tag and again because Google analytics it built in weaken just select this Universal Analytics option. And under this track time, which we left his page view for the original one instead, we just want to go down the select event on and the category here. We can put any values here. Let's call this a page you ironically on. Let's say the action is a blogged, and if we had variables about the block name, which will learn about in later modules, then we could also add some labels here. But for now, this will do. It will just dispatch the event of action type blawg and then again triggering. We're going to flex blood paid for you trigger. So unlike when we did the Facebook pics or where we had to manually insert the code because you Nivola analytics is built into Google tag manager. It's really easy to get this event that fires off when someone views Page on and Google analytics settings that see everything we need to set is because we already inserted are universal on little six. I d are variable. We can easily just select that, which is great, Andi if we wanted to. Also, I don't think this is necessary one to have inside the settings, but we can go down to tag sequencing. Andi, make sure we fire that Universal Analytics tag before we fire this one on. Let's just call this Universal Analytics below Post read. Andi There we have it. We've now added this event to fire off when someone reads our block post. 19. Custom events: up until this point, we've used the built in triggers, but we can also use what's called custom events. So let's look at that now and we're gonna go into triggers on new on. We have all these default ones that Google take manages gives us such page views. Clicks scrolled at form visibility. But we've also got this custom event down here, and this allows us to manually fire an event in our websites. JavaScript, andi for it to be picked up. So to do that we need to do is create the custom event on. And let's say we've got some kind of request callback functionality. So you're selling a product. You got a phone number. People don't wanna wait to speak to an operator. They just want to send you their phone number and have you call them Onda? We could just call that request callback event on what you call it. Same thing. So again, request call back. So now this trigger will fire every time. The Java script manually calls this request callback event, and that's pretty easy to do. I've got a little snippet here. What? Which is going to use the data lair on. All we need to do here is in this data layer. Push a value to it. That's got the key event on the variable that we need. And we can just drop that into our web page. So normally, this would happen on some kind of event here which is gonna drop it in select fires automatically on DSO. Now, when the let's say this was a thank you page Robin, Just an example page user with Hiti on DWI. Push this request callback event to it. At that point, this trigger that's looking for the custom event request call back, which you can see here. The event name matches what we're pushing in here. This trigger would then be accepted and it would trigger any tags we'd linked up to that. For example, we could stand on event to Google Analytics on the Facebook pixel, saying, Hey, this person is now a lead. This person now a potential customer 20. What are variables?: in this lesson will look at the theory behind variables. So what are variables? Will there essentially pieces of information we want to track? So that might include the U. R L or the page title, and I include certain elements being on that page. It could be used behaviour. For example, what does he use? A click on? How far down the page to this scroll? Or it might be some kind of cost of variables defined by those such as the custom al I D to in terms of where we might use them, we might use them to filter. So, for example, we only want to fire a specific view content ban when the user is on the block. So we could say if the U. R L starts with slash blawg and we want to fire this. Or maybe we want to do some paper click tracking. And so we say when the user clicks on this and for we want an event to fire, Or maybe they're submitting a form to make a purchase. And so when the form is submitted, who want to say this specific form, fire the purchase of them and then we want to send additional information out with that. Perhaps so, for example, on a view content we don't just want to fire a generic view content event toe are analytic system. We want to use the article title so that we can filter and see which articles and most popular which titles and most popular when were, for example, tracking a purchase event. We might want to include the products in there on the amount of money that that user sped so that we can feed that into our analytics as well. If someone is running a surge, we might want to track the top search query. So we wanna pull that query out of the page and certain that on if we're tracking lock ins as well, maybe we want to send the user I d providing with doing that in a safe way, keeping the data Nana Mayes, 20 analytic system that we're sending it Teoh the legitimate uses when we want to do that. But it is I just wanted to ask you, except to make it clear the our GDP are considerations there. If you're going to start sending that stuff to your analytic system, so Google Tech manager gives us a bunch off built in variables are ready to use. So, for example, he'd have to do anything to configure the ability to use the u. R L. And it's really easy to say I'm going to track this specific form these specific videos clicks or how far down these air swirled that's all built in and ready to go. You can start using those variables immediately, but we can also define our own variables where we just tell Google tag manager of what we wanted to track and give it that information so we can insert that using the JavaScript weaken. Read that cookies on our website anywhere where we kind of manually setting in. The code is a user to find valuable, and we'll go from all of these in the next few lessons. 21. Built-in variables: Google tag manage. It gives us a bunch of built in variables that we can use out of the box, but most of them are not turned on by default, and we can change that everyone so we can go to variables and as well as this app. Neuffer used to find variables under built in variables who also got configure, and we can see that someone doesn't like paid You are Alan Event turned on by default. But there's loads to do of errors, clicks, forms, history, video scrolling visibility that we can also turn on to use to say when stuff should fire. So in this case, let's turn on click element on click classes, and as we do, we can see there, then appear in our built in variables ready to be used. So how would we use them? Well, let's say, for example, if we look our example Page, we got this nice image, and maybe it's one of those features where the image gets bigger when you click on it, and so we want to track the clicks on this image. We can do that so we can get it triggers, and we got to get a new trigger and we're going to say Okay, we want to track clicks on all elements. But instead of just leaving it to all fix this time, we're gonna filter it down on if we look at The Hague HTML for that image, it's got It's an image tag, an AMG tagging. It's also got this class of feature image so we could say on Click Element equals on I Am G Tank. Or we could also look at the flick classes and say, Does it contain feature image? So now we're monitoring for all clicks, but we're filtering down to elements where the click classes contains feature image. We can call this click on feature image. Let's save that Now. We've enabled this click classes variable on we're using in this trigger to say, click on feature image. Now let's link that up to attack. So we created this custom. Hey, html tag for click tracking. That just said a click in the console whenever we click on anything. But instead of that being fight on all clicks for all elements, let's go ahead and change this. So if we hit this, we'll edit button, we can remove this trigger and we can add a new trigger, which is our new click on feature image who were not fires when you click specifically on that feature image. And so now this tag is only gonna fire. When we click on that, let's save this and given to preview Mao out. It's and now if we click, we get our old ones but click. But that a click thing isn't firing anymore. But if we go over and click on the feature image, it fires because that's what we told it. So the magic here is that we enabled the variable for click classes, and then we used in this trigger to say, Filter down Teoh juice elements that contain this class feature image. 22. DOM elements: in this lesson, we'll look at how we can use a custom variable to pull some information out of the dome. Andi, send that to wherever we wanted to go. So if we look in our example Page, we've got this heading. It's Ah, it's a page one tags That's the main heading on the page, says Gtm. Example Page. How could we get that out and send it where it needs to go? Well, we can use a custom used to find variable. So we go to variables and then user defined, and we can add a new one. And this type is a dom element. We've got a couple of options here. We can use the idea of the element we could use a CSS selector so we could just say C s a selector and say Hate one. We could also use the I D. If we look at the code here, it does have an I d. Even warm would work, but for now, there's only one hate one on our page as I should be, So we can just use this CSS selector on Let's call This Page heading. So we've now got used find very vocal page heading that will take the contents of our H one tag this gtm example Page. Now let's go use that in a tag. So we have this click tracking one's per page that fires a console log on. What we can do inside here is we can say OK, let's use page heading. This is some special syntax from girl tag manager, where we use to curly braces on either side, and it will replace that for the variable, says Alex. Get to me. Let's hit, Save on, Let's go into preview mode. Great. So here we have our example. Page will just refresh on. If we click on the page, you'll see I tag defied here once, click tracking once per page and also over here said one per page. And we've got that page titles. They're brilliant. So we've pulled out of the page on We've sent it where we wanted to go. Now everybody know, look super useful. So let's put it in context of where we want it to be used here in. We sent our blood post read event to Google Analytics, and if you remember, we create this event and we said it was a page for you on a blawg. What we could also do now in the label or the value is we could add this variable in. So here, page heading This is the custom. This is the user defined variable we created. Let's at that inn. And so now when it fires this paid view blawg event off to Google analytics, it's going to send the page heading with it. So depending on walk, block, post that on. And what the heading of that pages that data will now be sent to Google Analytics. So when you were in an analytics report, you can separate it out based on the blood post title, and we could do the same. We say you are l in here as well that we could even send in label. We could send the the page path, but will also get the article title here as well. So that's that 23. Cookies: and avert common use for user defined variables are cookies. So let's say you are tracking a customer's movement from the site. Andi, you have the customers logged in, and that custom idea saved is a cookie. He just got the variables used, find variables new and on the type we want to create a cookie. So first pike cookie is when we're looking for Andi in here. We'll just put the name off the cookie because my i d. Customer idea that as well, and then in your tag again when you're firing and you want to send that additional information off, then you can just use this custom i d variable that will pull the information out the cookie on fire it off in the tag. 24. Data layer variables: in this lesson will look at data layer variables, which is a really powerful way to customize. So let's say you're again running Facebook ads and you want to tell Facebook how much someone who clipped through has spent on your website. How do we do that? Well, a great way would be to use a data live variable. You could also potentially pull out the dom on the confirmation screen, but data their variable is a really clean way to do it. And to do that, first of all, let's say on here, let's imagine the system kind off confirmation page that tells us what's going on. Well, what we would want to do at this point is send Facebook a little purchase tack, so that would look something like great and custom hatched him out on sending something like this, not just select any trigger for now. Now, this is OK, but obviously, no, every purchase is gonna be £10. Let's just save this for now on. Then we'll work out her pull it in. So we might have is, for example, in this page we could add some data lower variables like I've done here and it pushes into the data later. This total value that says £10. That's changed up to £30 for this example, Andi. So then we need somewhere to pull out, and that's quite easy to do. Well, just get onto. Variables on here will create new user defined variable. And this time we wanted to be called a data lab. Variable. Andi, In this case, we called it total value. Okay, looks great. So now when we push that in, it's gonna populate this total value variable so we can save that and we'll call this total value. Great notes also, that now, if we get back to our tanks, we've got ah Facebook pixel purchase. Now, instead of this being here where we've hard coded it to £10 let's use our total value variable. So now it's going to take that total value variable out of the page. Onda se send it to the Facebook pixel as a purchase and one last thing just to keep it clean. Let's get into tax sequences. Make sure we fire the Facebook pixel before we fire this purchase event. Aunt hit safe. And so now it will pull up value that we're inserting into the data, let in our HTML code, it will pull it out, stick it into our event that were firing off to Facebook.