Google Tag Manager released native scroll depth trigger tool to report scroll tracking data in Google Analytics last year. Earlier developers and marketers had to rely on third-party plugins offered by LunaMetrics and Rob Flaherty.

Scroll depth trigger allows you to track both vertical and horizontal scrolling. Site owners can use this trigger to track scrolling activity on all or select website pages.  To track scrolling for specific HTML elements, you can use the Element Visibility Trigger.

The gtm.scrollDepth trigger will automatically fire once you cross any the defined thresholds. For instance, if you define the threshold as 25%, the trigger fire automatically fire after the defined threshold.

5 Scroll Tracking Best Practices in Google Analytics

Scroll Tracking Usage

Scroll tracking is often a noisy action which is difficult to use without carefully architecting the structure of the event itself hence it not a best practice to use scroll tracking by default. However, scroll tracking is integral to content analysis.

Percent or Pixels

Google Tag Manager allows you to alter how frequently events fire on your website. You can fire events based on exact percentages, like 25%, 50% and 100%. You could choose to fire events based on pixels, firing when users cross a defined threshold or at regular intervals.

For instance, if you use infinite scrolling, it might make sense to track pixel depth to see exactly how far people are scrolling! But infinitely scrolling pages or pages of significantly varying sizes may be better served by the element visibility trigger.

Non-Interaction Event

It’s however important not that if you are at the footer of the page and you reload the page, Google Tag Manager will fire a trigger for each of the thresholds 25%, 50%, 75% and 100% without you explicitly scrolling.

This could impact your data collection and needs to be monitored closely. As a best practice set your first threshold as non-interactive because if the page is short of content, it’s possible the trigger will fire even if the user doesn’t scroll one bit.

Scroll & Timing

You can combine scroll trigger with timings for content analysis. In this case, when the scroll threshold for engagement is passed, you push a scrollEngagement: true into dataLayer, and when the timer engagement is passed, you push a timerEngagement: true into dataLayer.

Then, when scroll engagement threshold is passed you also check if timerEngagement is true, and if it is, you fire the engagement event. And vice versa, when timer threshold is passed, you also check if scrollEngagement is true, and if it is, you fire the engagement event. It is important to note that the Custom HTML Tag will fires both on the timer threshold and the scroll threshold, with something like this (pseudo-code):

if (event === 'timer' && {{scrollEngagement}} === true) || (event === 'scroll' && {{timerEngagement}} === true)
    dataLayer.push({event: 'userIsEngaged'});
else if event === 'timer'
    dataLayer.push({event: 'timerEngagement'})
    dataLayer.push({event: 'scrollEngagement'})

This may not be the most efficient way as this will result in the same Custom HTML Tag being injected twice (once per trigger). However, you can also modify the scroll tracking script also to track time on page and code all the logic into a single script.
Visual Feedback

Scroll tracking provides insights which can be leveraged to enhance the user experience. For instance, in case of content-heavy pages which use infinite scrolling, it is critical to provide users with visual clues while your site loads new content. This keeps them informed on the progress and improves the Time on Page.


“Scrolling is a continuation, clicking is a decision.” – Josh Porter

Scroll Tracking helps you understand whether the people are actually consuming your content. Analyze user behaviour using scroll tracking and use this knowledge to design and deliver a robust user experience.