Scroll Tracking with Google Tag Manager

Are you interested in understanding the scrolling behaviour of visitors on your website? With out-of-the-box page tracking, a pageview tells you that a webpage was loaded, but not whether the user scrolled to view the content on the page. Scroll tracking can help you understand how often your visitors scroll and how far down a page they reach.

If you are using Google Tag Manager, scroll tracking can be accomplished in a few simple steps. Although scroll tracking used to require custom JavaScript, GTM now offers built-in triggers and variables that make implementing scroll tracking as easy as 1, 2, 3!

Configure Scroll Tracking with GTM

1. Enable the built-in Scroll Depth Threshold variable:
   1. From the Variables screen in GTM, select Configure to enable built-in variables. Enable the Scroll Depth Threshold variable.
      
2. Create a Scroll Depth trigger:
   1. Add a new trigger > Select trigger type as Scroll Depth.
      
   2. Select Vertical Scroll Depths. Once selected, you will be prompted to enter either percentages or pixels at which the scroll trigger will fire. For this example, we will select percentages and have the trigger fire at 25, 50, 75, and 100 percent.
      
      • If your site has very long pages, you may wish to fire this trigger more frequently, e.g. every 10 or 20 percent.
   3. Set the trigger to fire on All Pages.
      
3. Create a tag to send scroll events to Google Analytics:
   1. Add a new Universal Analytics event tag:
      
   2. Enter appropriate values for category, action, and label. Here is an example of a GA event tag that uses the built in {{Scroll Depth Threshold}} variable we previously enabled:
      • The {{Scroll Depth Threshold}} variable will return an integer (e.g. 25, 50, 75), so to make the event action more meaningful, we can append “%“ after the variable.
        
   3. Configure the Non-Interaction setting:
      • Note that the built-in scroll trigger will push events even if the thresholds are reached upon page load. Since lower thresholds (e.g. 25%, 50%) will often be reached immediately, you will likely want to send these events as non-interactive to Google Analytics. Otherwise, your bounce rate will be near zero.
      • If you do not want scroll events to impact your bounce rate at all, you should toggle the Non-Interaction Hit field to True.
        
      • If you would like only scroll events above a certain threshold (e.g. 75%) to be interactive, you can accomplish this by creating a custom JavaScript variable named {{Scroll is Non-Interactive}} containing the following function:

        function() {
             return !({{Scroll Depth Threshold}} >= 75);
        }
        

        You can then use this variable as the setting for the Non-Interaction Hit field:
        

   4. Add the Firing Trigger which we previously created in Step 2. Once you save the tag, ensure to test it out in preview mode before publishing your changes.

Have any questions? Let us know in the comments below!