Lessons

Lesson Info

Adding Page Level Scroll Depth Tracking in Google Tag Manager

how do we marketing fans and welcome back as promised, we're up to a really exciting section where we're going to install scroll depth tracking on our site through google tag manager is sending that information back into google analytics, tracking how far down on the page a given user scrolls could be a really interesting metric of engagement. If you're running an ad campaign and we're gonna be setting up these re marketing ad campaigns, it's not uncommon that certain people will see your ad, click your ad and once they land on the page they say, hey, this really may not be for me and they're gonna bounce off your page or quickly go to another page and then bounce off your site. How far down that user scrolls of the scroll, 75% of the page, 100% of the page. That might be a clearer indication of how engaged that user is. Additionally, if somebody comes to the website and they hang around on the page and google analytics tracks that that users average time on site or that users time on ...

site was really high, they may have been, you know, browsing another website, they might have opened another tab that might have gone and make a cup of coffee and google analytics is still tracking that session because they didn't close that browser tab. So tracking how far down on your web pages a given user scrolled could be a really interesting added mixture into your re marketing strategy setting up scroll tracking inside. Google tag manager is not a straightforward process that you could do with the tools given to you in this dashboard. It involves really complex html code. It involves custom variables, custom triggers and in order to do that, we're gonna need to what we call import a container. Before we go ahead and import the container. I want to send a special shout out to the excellent and intelligent folks over at luna metrics who created this container for us to use and made it available for advertisers like yourselves to use in your own google tag manager accounts and to use to set up your marketing campaigns. What's cool about google tag manager is you have that ability to import complete full containers and container contains tags, triggers, variables, folders, so on and so forth. What are some of the reasons you might want to import a container? Not that most of you are going to do it, but but as an example if you're managing many different sites that are all similar, so you might have a company with a lot of different sub websites. For example, you might be a industrial appliance wholesaler that distributes and you run many different retail sites and you might want to have that same container on every single site. So instead of having to go ahead and create and go ahead and create all those tags and all the different variables and all the different triggers in your google tag manager account, you could create them once saved the container, export that complete container and import that container which includes those same tags, triggers and variables in other accounts. You'll also be able to use the import function. Importing containers also comes in handy if you're making bulk changes to a container. So let's go ahead and add our first container. So the first thing we're gonna do is go over to the admin section using the top menu in our google tag manager account. We're gonna then click on import container. At this point. Google tag Manager is asking you to choose a container file in order to get the container file that we're gonna be using with. You need to follow a little link by clicking on that link. You should see a window that looks like this. It's a google drive document folder that I'm I'm hosting in our google drive, You guys all have access to it as long as you have the link. And when you see this page you simply need to click download and that's going to download this Jason file, J S O N. Computing programming language that is used to write and import, export these scripts, download it to your computer. Jump back over to google Tech Manager, choose that file that we just downloaded. Open up that file and now we have an option to overwrite or merge. If we select overwrite, then the container we're uploading here is going to override all the elements in our current container, which is not something that we want to do is we have that basic google analytics tag. We have the button click tag that we created in the previous lecture. So we want to select merge which is going to merge this container. We're uploading with our current container. If you have any conflicts you have the option to overwrite or rename conflicting tags, triggers and variables. I'd like to rename them because I don't want to overwrite any current tags triggers or variables that may be conflicting with the tags, triggers and variables were about to import. Now go ahead and click continue. And now we're gonna be able to preview and confirm our import. It's gonna tell us that we have two new tags, a new trigger and two new variables coming in in this import. If you want to see the detailed changes, we can go ahead and see the names of the different changes and the different tags, triggers and variables that are gonna come in. And then we're gonna go ahead and click confirm and now we have added and imported a complete container. So now let's go take a look at what came in with this import. First we go over the tags. So we're gonna see two new tags down here scroll tracking, dash plugging, plug in and google analytics. Event scroll tracking. This first tag is that custom html tag that I was referring to that came in with this import. This is all the custom html. Html. That's necessary for the scroll depth tracking to work in order for it to send that data back to google analytics as you can see it's firing on all pages and let's go ahead and click cancel. So we don't make any changes that we don't want to make. We can go ahead and rename that if you want to. Um but we don't have to do that right now. The second important tag that we need to do that we need to look at is this event scroll tracking. This is the actual tag that is that event tag that we similar to the tag that we create in the previous lecture when we were creating our button click tag and this is the tag that's going to use this trigger that we came in. That's this custom fire on events, scroll tracking trigger that just came in through the import to send that information back into google analytics in the form of an actual event. So the first thing we're gonna need to do is click on edit to configure this tag. We're gonna have to get our google analytics tracking id simply enough go back into admin, R. J. S tracking info are tracking code and we grab it over here, pace it back in and we're good to go as you can see we have a track type event. We want to leave that as is and we could change the category of the event and you could change the name of the event. But let's just leave it for now at scroll tracking that's the default as that's the default setting imported with the container the action and the label is going to be the distance and the label associated with the tag. So for example this tag is going to bring us in at 25% 10 25 50 75 9100%. All these different scrolling benchmarks that are created in this tag and that variable scroll distance which is in the html code is pre populated as the action the label is pre populated. You don't need to do anything else here click continue as you can see we have this custom trigger that we're going to be triggering this tag on and we'll click save tag and now we have it set up. The only the only change you need to make to this event scroll tracking tag is adding your google analytics I. D. Number and the appropriate field setting. And if you want you can change the actual category name of this tag. But in our case let's just leave it as is if we go into triggers we'll see that we added the custom events scroll tracking trigger that came in in the import and it's nice because we have it's it's showing it to us as in this specific folder for the scroll tracking plug in. So if you're ever not sure you know that it's identified by the scroll tracking plug in folder and the event name is scroll tracking and that's the trigger that's gonna fire that event. That's going to send that information back into google analytics. And if you scroll down under variables you see that we have a couple different custom variables as dictated in the html in the container that we just imported. So as you can see this is pretty complex. There's really a lot of coding that goes into this. But with the resources that I'm giving you being able to download this entire container and just simply uploading the container to your account and just swapping out your google analytics code. All you need to do is change the analytics code and you have very very advanced system in place. Now let's go ahead and go into our beautiful preview mode which we're actually already in. So there was no need to do that again but great. We refreshed it. Let's go to our website and let's see what we have showing up on the homepage. As you can see here. We have a couple of new tags fired on this page. We have this custom html which is the scroll tracking base of the plug in and we have the google analytics event scroll tracking which is the actual event that's going to be triggered by the scroll that's going to send that information back into google analytics now we want to jump over into the variable section to see how this actually works. And we're going to then select some of these options on the left hand side as we can scroll down the page to see what's actually happening. So watch this left hand panel as we scroll down the page. And just to warn you you're going to see what looks like a duplicate of each event. But it's really in fact not a duplication. One of them is the base trigger which is that html code which is firing on all pages and the one that we really care about is the google analytics event that's sending the information actually back into google analytics in the form of an event. So let's just scroll down the start scrolling down the page slowly And watch closely. Okay, there we go. seven and 8. If I were to click on either four or five, either of these scroll tracking variables, we're going to see that this is the 10% trigger that the scroll tracking plug in is activating. So here on number five And I'm gonna scroll down here and I'll see the data layer variable for scroll distance is 10%. So this would be triggering that 10% scroll depth event. You might be wondering Why is it saying that I scrolled 10% when I haven't really scrolled on this page. The answer is because I'm using a big monitor. Just by opening this page. I'm already 10% through the actual homepage. That's why you probably don't want to start re marketing to people who viewed 10% of your page specifically because that's not usually enough information to know whether or not they're engaged. But let's watch this left hand panel closely. These are these data layer variables. As I scroll down this page Right now, we're at six oh there we go. Seven and eight. If I click on either one of these two, we're going to see this change to 25% because that's a new scroll distance data layer data layer variable, which is available to us. And that's going to send that information back to google analytics telling him telling google analytics that hey, There's somebody on your website that just scroll down 25% of your page. Let's keep going a little bit and let's wait for the next one to pop up. There we go. We have 8, 9 and 10. If I click on nine, we've got 50%. Once again, if I click on 10, I'm also 2050% because that's that apparent duplication, which is not really a duplication. It's just because this is working with two different tags that are tracking similar data layer variables. Let's keep going. We're at 50% now. Here we are at 75%,, 90%. I'm gonna get to the very bottom, We're at 100% as indicated down here. So as you can see this is super, super cool. And it's in real time. We're getting this information right away. Now as we did with the previous button click tracking, we could do even more quality control by jumping back into google google analytics and checking you guessed it our real time reporting for actual events. Let's go over to real time. Let's go to events and we'll go to events in the last 30 minutes because I'm in I'm in an incognito window so sometimes it doesn't track it as an active user. But if we go to events last 30 minutes, just toggle between active users and events last 30 minutes. We're showing different events. Just because I've been reloading and refreshing this page so many times where the event category is scroll tracking. 10, 25 50 75 90 and 100% all tracking in real time. So we can see that this tag is actually working Now, let's just simply go over and publish this container Now, it's published. We could leave preview mode. We can refresh this page over here. We have our normal website back in our browser. Obviously as you know to your visitors, even though that you were in preview mode, your visitors continue to see your website as a normal website. They don't see the google tag manager previous section, but you have now installed a very powerful and potentially profitable audience segmentation technique, which is tracking how far down on the page. Visitors scrolled now that we're collecting this data, we're gonna be able to use this once we go ahead and build our audiences and we're gonna in the very next section of this course. We're gonna start building our audiences in the google analytics audience builder. I can now tell google analytics. Hey any of my previous website visitors who have triggered the event whose event category is scroll tracking And their event action was 75% or 90%. I want to show them these ads as they continue to browse websites that are under these categorizations or that have these keywords on them and their females in this age bracket. And I want to have a max CPM bid of a dollar 50. I could have a campaign targeting that segment of people once again. This stage is imperative before we get into the audience building because if we're not collecting the data we cannot use the data in our re marketing campaigns. I'll repeat that again. If you ever want to reuse certain types of data, certain types of audience segments in your re marketing campaigns, you must be collecting that data before this lecture. We were not collecting data on scroll depth. We could use a lots of other cool different types of audience segmentation techniques and parameters to run our re marketing campaigns to create those remarketing lists and audiences but scroll depth tracking was not one of them. Now that we've added this advanced container into our google tag manager account. Our google tag manager container code is on our website. It's sending that information successfully back into your google analytics account. We can now use the data we are currently collecting as part of a sophisticated re marketing audience building strategy. So I hope you find that as cool as I find it. I think it's incredible how fast that data comes in, how cool this technology is and how sophisticated your remarketing lists and campaigns are really going to get. In the next lecture. We're gonna talk about one more really cool sophisticated google tag manager technique that we're going to be importing yet another container and it'll be really easy to do. So I'll catch up with you guys in just a couple of seconds in the very next lecture. Thanks for watching this one. I hope you're getting really pumped. It's gonna be really exciting once we start building out these audiences and I'll catch up with you very soon on the other side