How to Build a Scroll + Timer Trigger with Google Tag Manager

Here’s an easy way to make your scroll trigger are more accurate. We will utilize a custom JS variable to measure the time the user spent on your website. In this video, I will walk you through the steps on how to setup a Scroll Timer Trigger in GTM and make sure we count users who spent a certain Timer on page + Scroll down as converted.

🔗 Links:

How to install Scroll Depth Tracking with Google Tag Manager https://www.youtube.com/watch?v=UoOh58pvqG4

How to build your own Timer Trigger in GTM https://www.youtube.com/watch?v=GoX-P9id4XM

🎓 Learn more from Measureschool: https://measureschool.com/products

🔀 GTM Copy Paste https://chrome.google.com/webstore/detail/gtm-copy-paste/mhhidgiahbopjapanmbflpkcecpciffa

🚀Looking to kick-start your data journey? Hire us: https://measureschool.com/services/

📚 Recommended Measure Books: https://kit.com/Measureschool/recommended-measure-books

📷 Gear we used to produce this video: https://kit.com/Measureschool/measureschool-youtube-gear

👍 FOLLOW US
Facebook: http://www.facebook.com/measureschool
Twitter: http://www.twitter.com/measureschool
LinkedIn: https://www.linkedin.com/company/measureschool

Hey there and welcome back to another video of measureschool.com teaching you the data-driven way of digital marketing. My name is Julian. And today I want to show you how you can make your scroll triggers more accurate by including the time that was actually spent on the website. So the case here being we have a website where we have a scroll trigger installed. I have this inside of my Google Tag Manager account. And if you want to figure out how you can install scroll trigger, then head back to a video. And I’m also going to link up down below.

Now I have this installed. And this fires when the user scrolls over 75% of the website. It will have this GTM scroll depth in the data layer. And we have our tag fired. Now, the action that I took just now is just scrolling down very quickly. If you want to get a more accurate reading on if the user has actually read the contents of this website. And he probably takes a little bit of time in order to read all through this. And then this scroll track event will fire. So how can we implement this and make this more accurate in order to take the time that you spend on this website also into account? To make this work, we will make use of a little variable that is in the data layer pushed automatically during the page view. So when the page first loads, if you look into the data layer, we have something here called GTM start. This is not something that is in the interface by default. But we can utilize this. What does this actually mean? Well, this shows us the time that is recorded by JavaScript since 1970, which shows the time right now in milliseconds. If we open up our developer tool and do a little test here. So I’m here the developer console, I can get the accurate time reading by just typing new date, and then get time and I get a similar number like we have here. And this is actually the actual time right now. And you see that there is a bit of a difference here. And this is the time difference that was actually the elapsed time when the page view event fires and now we get a new time reading. So we could compare these two numbers and get the elapsed time which is easily done within JavaScript and Google Tag Manager. Obviously, with a custom JavaScript variable. I have something prepared right here. And again, just looks at the new time that is right now and gets the time from the data layer when the page view event started. And then we do a little bit of math and get the elapsed time in seconds, and then put that back into our variable. So this variable gets filled every time an event fires. And we actually look at it with our trigger. So when we go back here, we can see when the message happened was actually zero seconds. DOM ready also zero seconds really fast. But then one second, till the window loaded. There’s obviously our window load of time. And then our scroll dept trigger was hundred 60 seconds before our 75% was reached. Let’s go back and try this out again. I’m going to reload. I’m going to scroll down.

And we have here scroll depth. And the variable now shows we took six seconds in order to scroll all the way down. Now obviously, this is a very short time for a user to be reading this whole landing page. And therefore we would like to maybe change this around and say, if the user hits 75%, we want to make sure that he at least spent 20 seconds on the website or 10 seconds on the website in order for the trigger to fire our tag and therefore count this user as converted. So all we would need to do is go into our scroll depth trigger. And with this new variable, we can go ahead and add a new condition here, which is our time since page load in seconds. And we want to make sure that the user hit at least 10 seconds. Let’s save this and refresh, go back to our page. Now, if I scroll down really fast, our scroll depth fires. But our tag doesn’t fire because the user only took two seconds. Let’s try this out again. I’m going to reload.

Now let’s take a little bit more time to read through this. And hopefully, it will take some 10 seconds to scroll down here now. We are now hitting the 75% mark I think. We took 16 seconds and we hitting the 75% mark. So now our tag should have fired but it didn’t fire. So let’s go into the tag itself why it didn’t fire and debug this really quickly. We see custom JS time since elapsed was 10, we had 16, yes, but I actually took the wrong condition it says contains it must be above. So let’s go back into our trigger and change this around simple mistakes. Right? Less than and greater than 10. So it needs to be above 10 in order for our tag to fire. Otherwise, you would need to hit the 10 seconds exactly. It wouldn’t make sense. So let’s try this out again. Reload, scroll down here.

Okay. And we hopefully hitting it before the 10 seconds. Yes, after the 10 seconds. Here is now our scroll event that took 12 seconds. So we took 12 seconds to read through this. And we have a 75% scroll depth and therefore our tag fire our conditions both turn true and our event scroll tag fired correctly. So with this little JavaScript variable, you can combine the time spent on the website plus your scroll depth trigger. I’m going to link up the code for this down below this custom JavaScript variable. And you also need to have something called the container ID enabled here in Google Tag Manager. This is a built-in variable so if you don’t have that enabled yet, go to configure. And then here is the container ID this needs to be enabled for it to work. So in conclusion, this is a really easy way to make your scroll that triggers more accurate.

Hey, there it’s me again. Thanks for checking out our quick tip video. Was that helpful? Did you understand something not quite, then I’d love to hear from you in the comments down below. But if you liked it, then why not give us a thumbs up and subscribe to our channel right over there because we bring you new videos just like this one every week. Now, my name is Julian for next time.

SHOW MORE...

Leave a Comment

avatar
 
smilegrinwinkmrgreenneutraltwistedarrowshockunamusedcooleviloopsrazzrollcryeeklolmadsadexclamationquestionideahmmbegwhewchucklesillyenvyshutmouth