Setting Up Scroll Tracking with Google Tag Manager

Let's start

Scroll Tracking via Google Tag Manager has got a lot easier now!

If you have a content-based website, you would be interested to figure out if visitors scroll your page. (Want to know what else to track to measure your content performance? Check out this article about growing your content site right)

Google Analytics displays the avg. time on page but there isn’t something built-in that would tell if visitors actually scroll your page or even read the whole article.

To do this we all have been using a custom HTML tag in Google Tag Manager and then create a tag that will send data to analytics. Fortunately, Google Tag Manager has recently published a built-in trigger that automatically listens to page scrolls.

In this tutorial, I will walk you through a simple step by step process to setup scroll tracking using Google Tag Manager.

Step1: Enable Scroll Depth Trigger

To find the native scroll depth trigger, navigate to triggers, click new button to create a new trigger and then select scroll depth from the trigger type.

 create a new scroll depth trigger

When you click the scroll depth trigger, you will see two types of scroll depths.

  Vertical scroll depths = track vertical scroll

  Horizontal scroll depths = track horizontal scroll

When you click any of the methods you will then see two ways to measure the scroll.

  Percentages: track scroll depth by percentage(0,25,50,75,100)

  Pixels: track scroll by pixels(769, 1025, 1441)

Almost all of the websites scroll vertically, so we will measure the vertical scroll depth. Also, it is easy to under percentages rather than pixels. We will track 0, 25, 50, 75 and 100 percentage.

The one very important thing to know about this trigger is to select the pages on which you want to fire this trigger. We can configure this trigger to fire on the blog page, but if your website contains multiple categories, you can create a regex for multiple pages.

 configure scroll depth trigger

Once you configure the trigger, click on the save button.

Step2: Enable Native Scroll Variables

Google Tag Manager has also introduced datalayer variables for scroll depth. These variables automatically capture the required data from the datalayer. You only have to enable them. To do this, navigate to variables, click configure, and scroll down to see the scrolling built-in variables.

 enable scrolling variables

Step3: Create a Scroll Tracking Tag

Now the final step is to send the scroll data to Google Analytics. To do this, navigate to tags, click new, click tag configuration, and select universal analytics as tag type.

 create a new tag

Select the track type as event

 select track type as event

Enter the event parameters as displayed in the image below.

 scroll tracking tag

While adding event tag parameters, you will have to be careful about the Non-Interaction Hit field.

You can configure the non-interaction field to be true for 0% threshold. This will make sure your site bounce rate isn’t affected even when the page isn’t scrolled. To do this you can create a lookup variable that will output true when the scroll depth threshold equals to 0%.

Configure the trigger as displayed in the below image.

You can also set this up for 25% if you have a small page and threshold value changes to 25% on page load.

 create a lookup table

Rename this variable and hit save.

Navigate back to the scroll depth tag and select the lookup table variable from the non-interaction hit drop-down. Your new tag configuration should look similar to the below image.

 set non-interaction true for 0%

Click on the triggering option and select the scroll depth trigger we created in the first step.

Save the tag.

Note: If you have already setup scroll tracking using the custom HTML tag method, you can simply delete the custom HTML tag and change the scroll tag configuration.

Step4: Preview and Debug Changes

Before publishing the changes the changes in your container, it is necessary to review and debug changes. Click on the preview button within the GTM container, once the preview mode loads, open your website in a new tab.

When your website fully loads, scroll down to see if the scroll depth tag is firing. If it fires, you have setup successfully, otherwise go to step one and look if you have missed anything.

 preview and debug mode

If you want to verify data in Google Analytics, open GA account in a new tab and navigate to real time >> events.

 analytics real time report

What’s Next?

Have you noticed, how simple it is to implement scroll depth in Google Tag Manager? Just a few clicks and you are done! Not just scroll depth but YouTube video tracking has also become a few clicks job in GTM. Once you setup scroll tracking on your site, you can gather a lot of insights like:

  1. Where people drop-off?

  2. Why do they drop-off? Is it because the content is too long?

You can get answers to more questions by implementing scroll tracking and boost your content marketing strategy.

Don't miss out when new resources launch

Our customer analytics experts share wisdom only once a month

Share now
We are customer-analytics consultancy that transforms messy data into actionable insights that will help you grow your company and make better data-backed decisions.