Scroll Depth Tracking – Google Tag Manager native implementation

*Update* There are a few known bugs to consider before going further with this implementation. Take a look at this post.

Page Depth Tracking is one of the essential things you should implement to gather a better insight of how users consume your content. A few weeks ago I wrote a post of how to implement Scroll Depth Tracking with a jQuery plugin. The setup required a few modifications like creating a custom HTML tag to run the jQuery script, 3 custom variables in GTM to capture values and a trigger. Even though the setup is fairly simple, things now got even simpler! After the recent Google Tag Manager update, Google introduced new built-in features and elements. One of the new things with this update is Scroll Depth Trigger which natively achieves the scroll depth tracking that otherwise required jQuery plugin that executes within a custom HTML tag! Additionally, there are now new built-in variables for scrolling which can be used out of the box!

The new built-in variables that will be populated with a data layer push when the scroll depth tag fires are the following:

Scroll Depth Threshold: A numeric value indicating the scroll depth that caused the trigger to fire. For percentage thresholds, this will be a numeric value (0-100). For pixels, this will be a numeric value representing the number of pixels specified as the threshold.

Scroll Depth Units: Either ‘pixels’ or ‘percent’, indicating the unit specified for the threshold that caused the trigger to fire.

Scroll Direction: Either ‘vertical’ or ‘horizontal’, indicating the direction of the threshold that caused the trigger to fire.

Once theese variables are available and being populated, the only thing that needs to be done is to pass the one we need – ‘Scroll Depth Threshold’ (gmt.scrollThreshold : ‘value’ – in the data layer) to Google Analytics with an event tag.

This is how the setup looks like in Google Tag Manager:

1. The Trigger

Once you select the trigger type – Scroll Depth, you can specify when it should fire, based on vertical and horizontal scrolling. Adding the conditions in this example is achieved by simply putting the different percentage points, separated by a comma, when the tag should fire. Additionally, you can specify on which pages the tag should fire – All Pages, or specific pages based on a met condition, like in the example below:

2. The variables
For the variables, all you have to do is to go to Variables > Built-in Variables and tick the following:

3. The Scroll Depth TAG
To wrap everything together, all that needs to be done is to configure an event tag that will pass the data to Google Analytics.

And that is it. There is no need for an external jQuery plugin, additional tags and triggers. The whole setup required 1 trigger, 1 built-in variable and 1 event tag, compared to the setup here where on top of these, additional custom HTML tag that executes the jQuery plugin as well as a trigger for that tag and 3 custom variables were required.
Scroll Depth Tracking – as simple as it gets!

If you have any questions or feedback, please post a comment below 🙂

Share this Post

Leave a Reply

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