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.
Today I want to show you how you can make a scroll and timer trigger with Google Tag Manager to make your scroll trigger more accurate by including the time that was actually spent on the website.
Scroll Trigger Overview
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.
Improve Scroll Depth Trigger Accuracy with Time On Site Metric
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.
Time in GTM
Custom Java Script Time 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.
Set Up Time Condition for Scroll Depth Trigger
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.
Enabling Container ID Variable
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.