Scroll Tracking in Google Analytics: Why & How to Implement

/

blog-scroll-tracking-tinypng1
Let’s start with a simple question – Are people reading the content on your site?

You might think, “Well, that’s silly! Obviously people are reading my content! It’s amazing content and look at all these pageviews!”

Of course it is… but how do you really know people are reading it? Are they reading the entire article or only the first paragraph or two?

Whether you are spending your own time writing content, have internal staff creating content, or are paying external content writers, you’re using resources. You might even be taking extra time to lovingly add valuable links throughout your articles, or you may feature related content at the bottom of your pages. This is great, but you need to measure whether this time and effort is paying off.

So how can we better understand just how much our content is engaging users from beginning to end?

Drumroll…

Scroll tracking.

If you didn’t know it was possible to track users scrolling through your content, it is! And it’s fairly simple, because some awesome members of the LunaMetrics team did all the heavy lifting.

Our Scroll Tracking Plugin: What it Does & What Info it Provides

In a nutshell, our scroll tracking plugin sets breakpoints based on the page height, then fires events when anyone scrolls to certain percentages of a page: 10%, 25%, 50%, 75%, 90% and 100%. Once you’ve implemented scroll tracking, you’ll be able to view this event in your Google Analytics Event reports:

Event Category: Scroll Tracking
Event Action: <% scrolled> (10%, 25%, 50%, etc.)
Event Label: (/blog/super-amazing-content/)

How to Install the Scroll Tracking Script

With Google Tag Manager

Use our Scroll Tracking Recipe!
luna-scroll-tracking

Our Google Tag Manager Recipes are small, easy-to-import solutions that make it easy for you to add functionality like Event Tracking, Video Tracking, and Scroll Tracking to your website through GTM, with very little customization required!

Make sure to follow the instructions and also check out additional tips from Jim on importing containers.

Without Google Tag Manager

Upload the scroll tracking script (in a .js file) to your own server. Call that external .js file in the <head> section of every page where you want to enable scroll tracking.

Where To Use Scroll Tracking

You may not want to enable scroll tracking for every page on your site. For instance, you may have pages where you’re already tracking other types of engagement (like a form submission or button click). Scroll tracking on short pages also won’t provide additional insight, for those types of pages you might want to consider engagement timer tracking.

Adding Insight with Scroll Tracking

We usually don’t recommend relying only on single metrics for analysis; similarly, scroll tracking alone won’t give you the magic formula for understanding users’ engagement with your content. Use this along with other data to gain actionable insight.

Customize Your Script!

The script is customizable! If you’re a little more technically savvy, you can modify the code inside the Custom HTML Tag or your JavaScript file to make the end data more meaningful. For full details on customization and the most up-to-date information, check out the GitHub repository.

blog-scroll-customize

Frequency

You can alter how frequently events fire. You can fire events based on exact Percentages, like 10% and 90%. You can also choose to fire based recurring Percentages, like every 25%.

Alternately, you could choose to fire based on Pixels, firing when users cross a specific threshold or at specific intervals. For instance, if you have an infinite scrolling page – it might make sense to track pixel depth to see exactly how far people are scrolling!

Top and Bottom

You can also specify the top and bottom of the area you’d like to track as scrollable using CSS selectors. This is particularly helpful if you have larger headers or footers, or extended commenting sections that will continue to grow. By filling in the Top and Bottom, you can tracking how much a user scrolls, but only inside of the specific section you’re targeting – like a blog post or article.


As always, we’d love to hear from you if you’re using scroll tracking on your site or have any questions!

Kristen Perko is a Consultant at LunaMetrics. Her background is in search marketing, with a focus on SEO, analytics, and social media. Kristen has a passion for integrating goals and strategy with analysis and loves helping clients find value in their data. In her free time, she enjoys hiking, cross-country skiing, painting and anything food-related.

  • Rafael Mas

    This remember me of Analytics on Steroids!

  • adamodonnell

    Quick question: if you set to track by pixel increments – lets say 500px – and your average visitor has a screen resolution of 1080px, do all of those visitors land in the 500px event, or do they have to scroll? So, I have 1080px window when I land on the page. If I immediately bounce without scrolling I’m not in 500px group, but if I scroll even a few pixels I’m in 500 and potentially 1000, and so on. Is that correct?

    • Kristen Perko

      Hi Adam – great question! If your visitors are able to view the 500px that you’ve set as an interval as soon as they land on the page, they would NOT need to scroll for the 500px event to fire. You may want to make a few customizations to the script, such as defining narrower start/end points (rather than the entire page), limiting the script to sections of your site with longer page content, or sending data to GA only when larger percentages of the page have been viewed.

  • Eric Santana

    There is a small Issue in the GTM recipes. I implemented the GTM solution in two different websites . In both sites , since that day, start to appear “NOT SET” in my report of LANDING PAGE. could you help me understand how I can fix this?

    • Kristen Perko

      Hi Eric – this could be an issue if you are using both GTM and on-page tracking code. If you have on-page tracking for pageviews and events set up in GTM, this could cause your sessions to break. If a session starts with an event, not a pageview, you will see (not set) in your Landing Pages report. Our recommendation is to migrate all Google Analytics tracking to GTM! In the interim, you may want to consider this temporary solution for making GTM work with on-page tracking code: http://www.lunametrics.com/blog/2015/01/21/gtm-existing-tracking/

  • Stefan

    Does this determine the length of the page on page load? Would you advise using pixel tracking if the user can determine how many entries to view? E.g. ecommerce sites that have “show 10 items, show 25 items, show 50 items, show 100 items, etc.” functionality.

    • Stefan

      In addition, are you able to use both percentages and pixels in this solution? e.g. 0% and 100% and every 500 px.

      • Kristen Perko

        Hi Stefan – this script calculates the length of the page on load, then again each time the user scrolls. For ecommerce sites, we’d probably recommend using some of the features of Enhanced Ecommerce (product impressions) if possible, but you could probably use scroll tracking as well. You can use both percentages and pixels with this solution – just modify the script to configure both percentages of page and pixel measurements that you’d like to see if users scroll past.

  • Hi, thanks for the article Kristen. I just had a quick question. Does this only track events or could it track those as page views? Basically, we have our blog set up with full articles in the scroll, so we want to count those as a scroll if possible.

    Thank you

    • Kristen Perko

      Hi James – if you’re using Google Tag Manager to implement this solution, you could certainly track pageviews instead of events. The script pushes a custom event (scrollTracking) to the dataLayer at intervals when a user scrolls. You could just use that event as the trigger for a pageview tag, rather than an event tag. If you’re not using GTM, consider upgrading! But, outside of GTM, you would need to modify the script to send a pageview rather than an event: https://developers.google.com/analytics/devguides/collection/upgrade/reference/gajs-analyticsjs#virtual-pageviews

  • One thing is bothering me: can´t those events be related to the user? This way I could know how far a user scrolls before it converts for example.
    The way it behaves now is like when you send events or virtual pageviews, it just don´t seem to be connected to a live user.

  • Lassi A Liikkanen

    I think you’d need a follow-up post to discuss best practices of reporting the data that gets gathered. Seems to me that the output is non-trivially associated with typical standard reports. Ultimately one would like to see an average scroll depth custom metric associated with a page view (which of course doesn’t happen here).

  • Chris Lamothe

    So how can I tell which users didn’t scroll?

    • Esben Rasmussen

      Create a custom segment consisting of all sessions where the event category does not contain “Scroll tracking”.
      The users in those sessions did not activate the scroll tracking for some reason.

      Using the same logic you can create segments of users who only scroll very little – for instance only up to 40%. Just create a segment of all sessions where the event action does not match 60%, 80% or 100% (if you are using intervals of 20).

  • Роман Боришкевич

    Hi. Thanks for the article! I have a problem. When the page loads, triggered all events ScrollTracking (10%, 25%, 50%, 75% and 100%) at once (in GTM preview). But I did not scroll the page. Similarly in GA real-time report I see all actions. Do you have any ideas why this is happening? Please help!

    • Kristen Perko

      Hi Роман,

      It sounds like your issue is similar to Esben’s. Our recommendation is to limit the scroll tracking plugin to fire only on longer content pages on your site. Rather than using All Pages as the trigger for the Custom HTML tag, you can target specific directories or types of pages.

      Hope this helps!

    • Ramesh_Sowpati

      Hi, Have you got any solution for this problem?

      • Роман Боришкевич

        No. Let me know, please, if you manage to find a solution.

  • Esben Rasmussen

    Hi Kristen/Luna Metrics
    Thanks for a great plugin.
    We have been using this for a month and just discovered an error on our part of the implementation:

    We wanted to use this as an interaction hit since this allows us to go much more precise data on time on site etc. We imagined it would only fire when there was scrolling.

    However, upon investigating our suspecious drop in bounce rate we discovered that it is caused by this interatction hit being triggered upon page load.

    What would you recommend we do to still track this as an interaction event but preventing the script to fire upon page load (and only on scroll)?

    • Kristen Perko

      Hi Esben,

      Unfortunately, that’s a current limitation of the plugin, but there are a couple ways to make tracking and data more accurate. If possible, we usually try to limit the scroll tracking plugin to fire only on longer pages, like article or blog content (pages where users would actually need to scroll). In the past, I’ve also used 2 separate event tags in GTM for scroll tracking – an interaction event for 90% or 100% scrolling and a non-interaction event for smaller percentages. You can also set start and end points for scrolling, which helps if your actual content starts further down the page and you don’t want to count menus, images, slideshows or other media as part of the scrolling area.

      • Esben Rasmussen

        Hi Kristen

        That’s too bad. Would have been nice if it was possible.

        I have reverted the scroll tracking to a non interaction event and built a workaround to get better data on time on page while ensuring our bounce rate is correct.

        What I’ve done is that I’ve added a custom HTML tag with the following code

        function addEvent(obj, evt, fn) {
        if (obj.addEventListener) {
        obj.addEventListener(evt, fn, false);
        }
        else if (obj.attachEvent) {
        obj.attachEvent(“on” + evt, fn);
        }
        }

        addEvent(document, “mouseout”, function(e) {
        e = e ? e : window.event;
        var from = e.relatedTarget || e.toElement;
        if (!from || from.nodeName == “HTML”) {
        dataLayer.push({‘event’: ‘cursor_leaves’});
        }
        });

        This code pushes the event “cursor_leaves” to the data layer whenever the cursor leaves the frame of the web page. My assumption is that this primarily occurs when the user wants to leave the website (it uses the same logic as all of those annoying popups that show, just when are about to leave a website).

        Then I’ve added a GA interaction event tag that is fired, when the event “cursor-leaves” is available in the data layer.

  • Athiban Parthiban

    Hi i have included lunametrics-scroll-tracking.gtm.js in my head tag, but nothing is reflecting in the Google Analytics. There is no new event created. Is it possible only if we have Google Tag Manager ?

  • Trisha Fahrenthold

    Hi Kristen, I implemented the scroll tracking successfully however in GA it only shows a total number there is no breakdown of percentages.

  • Jesse

    Hi! I’ve managed to successfully install your plugin, and it’s tracking % scrolled seemingly perfectly! However, I was hoping that by implementing this, the Avg Session Duration stat on GA would be more accurate, since it now has events against which to measure the last user interaction. Alas, it still appears that even if someone scrolls to the bottom of the page, thus firing all 4 scroll tracking events (25%, 50%, 75%, and 100%), and then exits, Avg Session Duration still records as 0 sec. Do you have any recommendations for how to resolve this? Many thanks!

    • windman

      events alter bounce rate statistics, avg session is computed only on page views

Contact Us.

LunaMetrics

24 S. 18th Street, Suite 100,
Pittsburgh, PA 15203

Follow Us

1.877.220.LUNA

1.412.381.5500

getinfo@lunametrics.com

Questions?
We'll get back to you
in ONE business day.