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

By | August 28, 2019


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.

16 thoughts on “How to Build a Scroll + Timer Trigger with Google Tag Manager

  1. Jaime Olaer Post author

    This is a good way to monitor how a page is performing and how attractive it is to the website visitors. Thanks Julian

    Reply
  2. Mehmet Karaağaç Post author

    It's really cool video. We can understand a page content's quality or effectiveness by this recipe. Thanks Julian

    Reply
  3. Martina Sekuloska Post author

    Really helpful video! Thank you so much. I have already tried other scroll time tags but they didn't work. I hope this one will be work. I couldn't find the link to the JavaScript code though. Could you please add it in the links below the video? Thank you!

    Reply
  4. Charlie Sandner Post author

    I asked this question twice in Measure Masters. Now I got a video answer that is way better than a comment reply. Thanks tons 🙂 It works perfectly, but you did forget to link up the code. Not a huge deal to write it yourself, but just saying.

    What I don't understand is how you have time for all this. A long "live" Measure Masters event tomorrow, questions from Measure Masters.courses in measure masters, weekly Youtube videos and more. Pius, comments here, your own work too I just don't get it. Are you a twin and your identical brother works for you?

    Reply
  5. Yasir Wani Post author

    Once this tag is fired, is it possible to open a pop up box.

    Reply
  6. Kristina Culi Post author

    Hi Julian, thank you for another great video! It helped me figure out how to measure engagement on a landing page to build a custom audience for paid ads.
    The issue I had is that people, after landing on the page, often scroll quickly initially and then go back to reading. In these cases, by the time the scroll trigger fired they didn't spend enough time on the page, and the opportunity to build an engaged audience is lost, even if they were engaged later. To overcome this, I used a timer trigger that fires on a certain interval but only if the scrollThreshold in the Data Layer is greater or equal to 75. Still not ideal for every situation but works well for building a remarketing audience based on people who fulfilled the scrolling and time on page condition, in any combination.

    Reply
  7. Ravi Nagle Post author

    Dear, where we can see full data of all the user activity? In Analytics ??

    Reply
  8. Homer Dus Post author

    I get this error any hints how to fix?

    Type : Unknown Variable Name

    Description: Unknown variable 'Container ID' found in another variable. Edit the variable and remove the reference to the unknown variable.

    Code Row 3 was like this

    var start = google_tag_manager[{{Container ID}}].dataLayer.get("gtm.start")

    Reply
  9. Misho Post author

    This is really great concept, but I'd be cautious with calling a user non-converter for reaching the bottom quickly.

    Having watched many user recording analysis, I can tell you that users actually rarely just start reading the moment they land on the page with longer content.

    Many like to quickly scroll through the article and skim over it to asses if the piece is worth their time. That's why Copywriting is important: to convey that message to the skimmers and persuade them that the content is actually worth it. Only then they go back to the top and starts reading. This trigger would disqualify them.

    Therefore the "Trigger Groups" method is much better (covered in the newer video in this channel) which checks if both scroll and time conditions are set to "true", no matter the order in which they happen.

    Thank you for continuously making the digital marketing better!

    Reply
  10. MashMetrics Post author

    Great stuff as always Julian. One thing we have also added to the scroll tracking tag is this value within the Event Value section. You can then easily capture the average time spent scrolling down 75%, 50% or other thresholds you may have set. To Kristina and the others, it is so awesome that you quickly utilize this for other "event" driven tags like Facebook, AdRoll, etc!

    Reply
  11. Ivaylo Krustev Post author

    Thank you! Great video and channel. What is the difference between using this method and using group triggers (scroll depth + gtm.time) as you have described in another video of yours? Don't both produce the same result?

    Reply
  12. Joshua Duncan Post author

    @julian So I am trying to use the code you gave but this is what it says:

    Unknown variable “Container ID” found in another variable. Edit the variable and remove the reference to the unknown variable.

    But anytime I change it, it says the same thing. I'm trying to track how long they stay on certain pages so this would be AWESOME to have. Love the videos by the way!

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *