I’ve written a couple of blogs in the past on Google Tag Manager (GTM).

The first was a beginner’s guide, and the second talked about the benefits of using a tag management system – specifically Google’s. With that in mind, I think it’s best to start moving on to more advanced implementations using GTM.

There are lots of things you can do using GTM, from installing third-party tags to event tracking and form tracking. Today I’m going to explain how to send a specific set of events to Google Analytics – how far people scroll down the page. First, let’s talk about why we need scroll depth.

Why is scroll depth important?

Engagement is something a lot of people talk about, but is rarely tracked – at least not on websites. Webmasters often hang their hats on what I would call “flimsy” metrics, such as time on page and bounce rate. Neither of these metrics tell the full story.

Say we use time on page as our engagement metric – what happens if someone spends 10 minutes on one page? Is that a good thing because they’re engaging with the content? Or is it a bad thing because they can’t find the content they are looking for?

Bounce rate has similar issues. If someone lands on a contact page and bounces straight off, you could argue they’ve found the information they’re looking for and left. This one example underlines the importance of tracking goals and conversions in analytics (you perhaps shouldn’t stop there either, and should consider implementing phone call tracking too – but let’s leave that for another post). Conversely, if they leave without finding that information, your site might have serious problems! This is when tools like Hotjar and Lucky Orange come in handy to record your users’ behaviour (again, let’s leave those for another post).

Regardless, from those examples I think it’s clear to see that you can’t just rely on bounce rate or time on page as engagement metrics. This is where scroll depth comes in.

Scroll depth has been a topic of conversation for some time, and Justin Cutroni detailed how you can implement it in 2014 using Universal Analytics. However, his post doesn’t talk about how you can do this with GTM. This post seeks to guide marketers and non-technical website administrators in how to add scroll tracking to your website.

Tracking scroll depth

The ability to track scroll depth (at least my version – there are other methods) involves a plugin created by Rob Flaherty. The plugin, which uses jQuery to record the data in GA, sends events to Google Analytics at various trigger points – Baseline (0%), 25%, 50%, 75%, and 100% – each signalling a different point where a user is in relation to the top and bottom of the page. Andy Gibson should also get a mention as he details this process for GTM Version 1, whereas my post updates his instructions for GTM V2.

There are a few requirements that you must have in order to complete this tutorial:

  • Your website uses Google Analytics (Classic and/or Universal Analytics)
  • Your site implements GA through Google Tag Manager
  • An understanding of GA + GTM

If you don’t meet those requirements, I strongly recommend you check out my aforementioned GTM guide in addition to the Google Tag Manager module in the Analytics Academy before continuing.

Create a custom HTML tag

The first thing you’ll need to do is head over to the Google Tag Manager website, and find your website’s container. Once you’ve found the appropriate container, click the container name to head to the GTM interface:

create custom html tag

Before we create our tag, I’d recommend creating a trigger (a tag firing rule) that ensures your scroll depth script fires when the DOM is ready.

What is the DOM? Well that’s quite a technical question! It stands for Document Object Model and is a representation of all the nodes (like p tags, divs, list items) in an HTML document. The DOM provides a method for JavaScript to interact with all these nodes. The DOM Ready trigger we will create means that the tag will fire after the browser has finished constructing the full page DOM.

To create the trigger, head over to the triggers section within GTM:

google tag manager triggers
Once here, click ‘New’. Name your tag ‘DOM Ready’, choose the event ‘Page View’, your trigger type as ‘DOM Ready’, and set to fire on ‘All Pages Views’ (unless you don’t want certain pages to be included in your scroll depth tracking, then select ‘Some Page Views’ and choose your filters.

Your trigger should look similar to the below:

google tag manager triggers 2

Before moving onto the next step, you’ll need to click ‘Create Trigger’.

Next, you’ll need to create a new tag. Click ‘Tags’ in the left hand menu pane:

google tag manager tagsThen hit the ‘New’ button. Choose ‘Custom HTML Tag’ underneath all the standard tags:

custom html tag

You should then head over to the below URL and copy the scrolldepth.js file:

scrolldepth.js

Once copied, paste the code into the vacant HTML field:

custom html tag codeThis script then creates a dataLayer push every time a scroll tracking event is fired.

The events in GTM are not pushed across to Google Analytics though. We need a separate tag in GTM to send the events across to GA – we’ll cover that shortly.

Once you have added the above code, hit ‘Continue’ and then click ‘More’:

google tag manager triggers 3On the next screen, select the ‘DOM Ready’ rule you created earlier:

google tag manager dom

Click ‘Create Tag’, and if you haven’t already, name your custom HTML tag something descriptive. ‘Scroll Tracking Tag will do fine.

Creating event variables

Next, we need to create variables that define the event components so we can send them to GA. Remember, Google Tag Manager events are not the same as Google Analytics events.

Google Analytics events are made up of four components: Category, Action, Label and Value. The last two of those are optional.

We’ll be creating each of these as variables in Google Tag Manager. Why? Because in order to pass events from GTM to GA, we have to define these components by pulling the information from the dataLayer (this is a little complicated). Once we have created these variables we’ll then create a Google Analytics tag that is set to Event – this will then send the scroll depth events to Google Analytics.

To create your variables, head over to the appropriate section using the left hand side menu:

google tag manager variables

Event category variable

Click ‘New’ and name your first variable ‘eventCategory’. Select the type as ‘Data Layer Variable’, then enter the data layer variable name as ‘eventCategory’. Leave the version as ‘Version 2’. Click ‘Save’ and it should look like this:

google tag manager event category

Repeat these steps for the action, label and value variables, but replace the variable name and data layer variable name with the following:

  • eventAction;
  • eventLabel;
  • eventValue.

I’ve included some screenshots below that show what each variable should look like.

Event action variable

google tag manager event action

Event label variable

google tag manager event label

Event value variable

google tag manager event value

Create the Google Analytics tag

Now we have our variables, we’re able to send the information that our scroll tracking JavaScript pushes to the data layer.

Head back over to the tags section, click ‘New’, and choose ‘Google Analytics’. Again, name the tag something descriptive, select your version of GA (Universal or Classic), and input your GA property ID (or insert your own variable within GTM that dynamically pulls in this ID). Then change the track type to ‘Event’.

Once selected your screen should look something like the below:

scroll tracking google analyticsWe now have the ability to enter the variables we just created. Click the building block button on the right of each of the ‘Category’, ‘Action’, ‘Label’ and ‘Value’ text fields and select the appropriate variable:

scroll tracking configure tagYou can then decide whether you want scroll events to affect your web page’s bounce rates. If you want your bounce rate unaffected, set the non-interaction event to ‘True’. However, if you believe that a scroll down your page does not constitute a bounce you can select the non-interaction hit to be ‘False’ so that any scroll activity greater than 25% will not affect your site’s bounce rate. Be warned though – by setting this option as false it’s likely your website’s bounce rate will be less than 5%!

The last thing you need to do is to set the firing rule for this tag. When you have clicked continue, select ‘More’ from the options, and then click ‘New’ from the pop up. Name the trigger ‘Event equals ScrollDistance’, select ‘Custom Event’ and enter ‘ScrollDistance’ in the event name field:

create triggerClick ‘Create Trigger’, and then save your tag. You should then use GTM’s preview mode to check whether your scroll tracking tag is firing. If it’s fired correctly, when you get to the bottom of the page, your preview window should contain the below information:

google tag manager summary

Viewing the results

You’ll be able to analyse the results of your scroll tracking implementation in the events report in Google Analytics after a few hours. To view your report, visit Google Analytics and locate the property you just added the scroll tracking too. You’ll need to navigate to the Behaviour reports in GA – specifically the events section:

google analyticsOnce there, you’ll see the events graphed like in most other reports:

google analytics eventsTo get the breakdown of the events, click ‘Event Label’, underneath the ‘Top Events’ section at the bottom left of the screenshot above. You’ll then get a breakdown as per the below:

google analytics events labelRemember, the above data is site wide, so you’ll really want to dive in a bit deeper into the data and do this analysis at a per page level, trying to spot anomalies to see on what pages people aren’t scrolling all the way down.

And that’s it! Don’t forget to ask any questions in the comments below or fire them across to me over on Twitter.

Note: The opinions expressed in this article are the views of the author, and not necessarily the views of Caphyon, its staff, or its partners.

22
0

Matthew is currently Head of Digital at Klood – an established digital and inbound marketing agency based in the UK where he oversees every aspect of Klood's services. You can find him on Twitter, LinkedIn, and occasionally watching Arsenal throw away another title.

42 comments

  2. Fantastic tutorial. I tried before implementing more ‘automatic’ solution from another website, but it didn’t work.
    I liked your step-by-step approach and that you even included the naming suggestions.
    Thanks a lot!

  3. Great tutorial with easy steps. I have just implemented. @Mathew, How long does it take for the data to reflect in Google Analytics?

    1. Normally about 4 hours. Often less. You can also use the Real-Time Reporting to check you results though!

      HTH!

  4. Should this tag replace a universal analytics tag that fires on all page views? Essentially satisfies all needs for GA tracking, as well as scroll depth on every page correct?

    1. Hey Shawn,

      Keep the tags separate – it shouldn’t replace the normal UA tag.

      Cheers,

      Matthew

  5. Hi Matthew, I’ve successfully installed the scroll tag on my website but I can’t see the corresponding event in Google Analytics. Thanks for your reply (and your very useful explanations on GTM). Olivier

    1. Hi Olivier,

      Might be helpful if you ping me an email – matthew.kay [at] klood . com

      Difficult to diagnose without seeing your implementation.

      Regards,

      Matthew

  6. Thank you Matthew for your great step-by-step tutorial, great Job. In our e-shop page, we want to separate page depth information by same type of page: Homepage, category page and product page. Maybe you have some suggestions how to do it? For now I have replaced your “EventAction” with “PageURL” to see how visitors engage in particular page.

    best regards
    Jonas

  7. Hi Matthew,
    nice and detailed tutorial, really solve my problem.
    Just one question, is there any way I can filter the scroll depth data by IP address?
    Because it seems like I setup the filter on Google Analytic successfully, but the ‘Event’ part is not affected by that.

    Thanks,
    Weiting

  8. Hi Matthew,

    Is there a way to report on this more dynamically in GA? I want to look at a certain URL and see how many users on that page go to 25, 50, 75, etc. Thanks!

    1. Hi Shawn,

      Yes. I’d create a segment that only looks at that page or section. Alternatively, you can use a secondary dimension in the Behaviour -> Events -> Overview report to look at the specific page you’re after.

      HTH!

      Matthew

  10. Hey Matthew,

    This is awesome – thank you! I was actually just wondering if you happened to know of a way to set it up so that a scroll depth of greater than 50% is considered a non-interaction hit. I’d like to consider a 50% pageview as an interaction with the site, and not a bounce….We’re using a parallax layout. Is this possible?

    Thanks!

    1. Hi Zach,

      It’s possible, but would require some customisation. Feel free to pop me an email:

      matthew[at]klood[dot]com

      Kind regards,

      Matthew

  11. Hello and thank you for your excellent post about Scroll Depth plugin.

    I have been experimenting a problem when trying to implement the plugin.

    My context is as follows:
    – Tags implemented in my web through Google Tag Manager.
    – My web is a wordpress site.

    Description of the problem:

    – The “Scroll Depth” tag (customized HTML tag) fires OK (checked through Google Tag Manager “Preview and Debug”).
    – At the left side of the screen: “ScrollDistance” is not present when I scroll down the webpage (25%, 50%, etc.).

    Conclusion: maybe the tag is fired OK but the script is not working?

    Is there anything different in the plugin implemention process or in the plugin script considering that my web is a wordpress site?

    I have tried the wordpress plugin “WP Scroll Depth”. Using this WP plugin I’m able to see “ScrollDistance” in GTM “Preview and Debug” at the left side of the screen when I scroll down the webpage. I also can see the corresponding Data Layer with the values for eventLabel (25%, 50%, etc.). And I can see the variables too with their values. The problem I found here is that Google Analytics does not receive the information about the events.

    Please could you help me about the problem explained above implementing “Scroll Depth” plugin?

    Thank you in advance.

    Vicenç

  13. This works perfectly on my main domain, but I just recently created a subdomain test.maindomain.com

    I’ve installed the GTM container script on the page, but none of the scrolling events fire, any ideas or settings I’ve missed somewhere?

    1. Seems that the _event equals ScrollDistance trigger is not firing on my subdomain, and I have no idea why 🙁

  14. Great tutorial, thanks! One question though – it won’t “multiplay” users/sessions on a site, right?

    1. Hi there, I can help with this. By default, it doesn’t look like the custom HTML tag sends the custom events more than once per page. To be safe, though, you can tweak a setting in the final event tag you created. Scroll down to “advanced settings,” then next to “tag firing options” select “once per page.”

      Hope this helps.

      1. Can’t edit a comment, but need to chime in. Don’t do the thing I suggested above. “Once per page” means you’ll usually only capture the baseline and ignore 25%+. Keeping the setting “once per event” makes sure that each event label is captured only once per page.

  15. Hi Matthew,

    Thanks a lot for your tutorial, very easy to install and works perfectly. However, I’m trying to find out if there is any way to activate the GA Tag in some specific pages rather than the whole site. Any help on this?

    David

    1. Hi David,

      I can help you out with this. You can determine on which pages the event fires when you create the trigger that uses the custom event you call “ScrollDistance.” Under “this trigger fires on” select “some events.” Then, specify a rule using “Page URL” that isolates the page(s) on which you want the event to fire.

      If you want the event only to fire on blog pages, and your blog pages all contain /blog/ in their URIs, you might say “Page URL” “Contains” “/blog/”

      Hope this helps.

  16. Hi Matthew,

    This guide is extremely helpful. Thank you for publishing it!

    I’m seeing that two events fire at each scroll threshold: “ScrollTiming” and “ScrollDistance.” However, the Category, Action and Label values sent are identical between events. How do the purpose and implications of those two events differ?

    Thanks so much for any advice you can offer.

  20. Works great! But bare in mind that analytics.js allows 500 hits per session and that’s not alot with this scrolltracking implemented.. scrolltracking can be implemented with fewer hits but still with good scroll tracking insights in %.

    “Universal Analytics Enabled

    This applies to analytics.js, Android iOS SDK, and the Measurement Protocol.

    200,000 hits per user per day
    500 hits per session
    If you go over either of these limits, additional hits will not be processed for that session / day, respectively. These limits apply to Analytics 360 as well.”

  21. Thanks so much for this information.

    We’re creating a site where the home page scrolls, creating four different sections, i.e., home, work, testimonials, contact us. I know how to create a tag that fires only on that page. Can I create names for my reporting in lieu of 25%, 50%, 75%? Also, can I adjust the proportions of the page that I’m reporting on because some of the sections are longer than others?

    Stephen

  22. Thanks so much! It works great! You may want to update it a bit though (screenshots) since it doesn’t look like that anymore. Sometimes had to really rack my brains to figure out where was what.

  23. hey!

    First of all, thanks for the tutorial! I is really clear and to the point!

    I have a problem though, what if I want to know the scroll depth on a concrete page?

    being site wide does not provide me enough info!

    Thank you!

    1. Hey, roc,

      the Author already replied to this question above. The answer is:

      “I’d create a segment that only looks at that page or section. Alternatively, you can use a secondary dimension in the Behaviour -> Events -> Overview report to look at the specific page you’re after.”

      Sandijs

  25. I went through other tutorials and couldn’t get the tag to fire! Went through this one and had it set up in 5 minutes.

    Thank you!

  26. Best tutorial ever. It’s very clear. Screenshots makes it easier.

    Works like a charm!

    Thanks a lot

  27. Hi Mathew,

    Thanks a ton for this very useful tutorial! I got it working very easily.
    Some additional questions popped up:
    – what does mean the “baseline” tracking exactly? That a user only scrolled between 0 to 25% of the page? Is it exclusive? (eg, if someone continues to scroll down the page, will the baseline scroll numbers still take into account the 0-25%?)
    – if we’d like to decrease the effect of the script on bouncing rate, could it be possible to correlate the scroll depth to time on page for example?

    Thanks again!

  28. Hello there!

    Thank you for this amazing post 🙂

    I’ve set everything up correctly – after many checks! – but I have a little strange behavior.

    I set the Scroll Tracking – UA stuff ticking the Non-Interaction Hit but I still have a bounce of 0% even though I’ve go 1 page view.

    To see that, I created a custom report with only Scroll Depth event category and checked on some URLs

    Would you know any reason why this happens?

    Thank you in advance!

Comments are closed.

Stay updated

Get email updates on exclusive tips, strategies, and original research that help you boost organic rankings for clients.

You May Also Like