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 elapse 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 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 dept.
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 of 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 elpased 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.