Implementing the Scroll Depth Tracking Trigger and Variables


The best way to know if visitors are consuming your content is to look at scroll depth. This can be a much more useful metric than bounce rate — which only tells you if users viewed one or more pages. With scroll depth, you can see if those users who did visit just one page stuck around to check out your content.

It has become easier than ever to track scrolling, as Google Tag Manager now has a native scroll depth trigger. Of course, as with all triggers, you need to customize it to some extent if your data is to have any meaning.

Scrolling Data Layer Variables

In Google Tag Manager, head to “Your Workplace” and find “Variables.” Choose “Configure Built-In Variables” and check all three boxes under “Scrolling.” This will allow you to customize depth threshold, depth units, and direction (vertical and horizontal).google-analytics-explained-scroll-depth-tracking-trigger

Scroll Trigger

With the above configured, you can enable your scroll depth trigger. Head to “Triggers” and click “Add New Trigger,” choosing “Scroll Depth” as type.

Now comes the point where you need to set up the trigger to suit your preferences. First, you need to decide whether you want to measure depth by percentage or pixel. You also need to determine what thresholds you want for the trigger to fire — consider the average length of your pages to gain more meaningful data. You can set thresholds for vertical scroll depth, horizontal scroll depth, or both (although most sites just need vertical).

Finally, choose if you want the trigger to fire on all your pages or only some. For instance, you may want the trigger to collect data just on content-heavy pages. Before you decide, consider the benefits of using a trigger in other places, like your homepage or product and category pages. For instance, if you have content near the bottom of the page, you’ll find out if visitors are reading

Custom Event Tag

To push data to Google Analytics, you need to set up a custom event tag. Head to “Add New Tag” and choose “Universal Analytics” as your tag type. The rest of the settings are up to you, but possible options are “event” for track type, “scroll depth” for category, “{{Page Path}}” for action, and “{{Scroll Depth Threshold}}” for label.

You may like to configure the non-interaction field as “true” for the first mark (typically 25 percent) and false for the following marks. This will prevent bounce rate being impacted by a minimal scroll. To do this, you need to use the custom JavaScript variable:

function() {

 return {{Scroll Depth Threshold}} === 25;



Trying It Out

Using Preview mode, head to your site to test your trigger. As you scroll down pages, you should see the Data Layer object being pushed down as you reach the defined thresholds. In the variables tab, check out gtm.scrollDepth to see the following variables:

  • Scroll depth threshold, with the value of the threshold crossed
  • Scroll depth units, either “percent” or “pixels”
  • Scroll direction, either “vertical” or “horizontal”

As scroll depth triggers are subjective, try out the above settings to see if they work for you. Once you’ve seen them in action, you can make changes to ensure that your trigger is bringing you the most valuable data.

If you like my articles,