October last year, Google Tag Manager introduced a new trigger that would help analysts and engineers track the scroll depth, ‘a must do’ in multiple cases in digital analytics.
 
In this post, I am going to explain the pros and cons of the Built-In Scroll Depth Trigger in GTM (Google Tag Manager), and also talk about the solutions you can use for Scroll Depth analytics.


Using the GTM Built-In Trigger – when you should use it and what are the limitations

 
When should you use it?
 
In case you want a Scroll Depth event for every page on your website, and the page height will not change after it’s loaded, then the GTM Built-In Scroll Depth Trigger is perfect for you. After using the trigger for various analytics projects, I believe this is the perfect scenario for this tool, and the reason it was designed in the first place.
 
The configuration is very simple, you only have to select the Scroll Depth Trigger type, select which scroll type you want and, finally, input the values (either in percentages or pixels) when the trigger should fire.
 
 

 
Main limitation: What if the page height or content is dynamic? 
 
The moment you step outside the boundaries of tracking the Scroll Depth for static-height pages, you immediately face the limitations of the GTM Built-In Trigger.
 
If the page height is changing after the page loaded, this trigger is not relevant anymore and you may find yourself getting all Scroll events previous to changing the page height.
 
Using pixels to input the value could be a solution, but what if you don’t have a static value for your page?
 
My solutions: Custom JavaScript variables or Custom HTML. I’ll provide the code and the steps needed for implementation later in this blog post.
 

1. GTM Scroll Depth Trigger for Pages with variable height – Custom JS Variables solution  

 
We’ve already established that the new GTM trigger has some limitations, but we wanted to come up with some solutions if the page height is changing because of HTML hidden elements. The first solution implies some Custom JavaScript variables, which will ‘find’ the page height within the hidden elements and will calculate the total page height.
 
Solution: Set Pixels as input for the GTM Build-In Scroll Depth Trigger and generate the trigger values with a Custom JavaScript variable
 
With this solution, we are going to set the trigger almost like a usual GTM Built-In Scroll Depth Trigger, but instead of percentages, we will use pixels, and instead of predefined values, we will use variables.
 
The variables will be custom JavaScript variables and will contain a function that will find the hidden element height, add that height to the document height and return the values in pixels for 25%, 50%, 75% and 100% of the page.
 
Keep in mind that we also used jQuery for the code. It’s an open source JS library, accessible for everyone. So feel free to experiment and implement it. The code should look like this:
 

Scroll Depth Set Values
function(){
      if($){
       var userHeight = $(document).height();
       var totalHidden = $('.hiddenContainerDiv').outerHeight();
       if(totalHidden > 0){
        userHeight += totalHidden;
       }
       return userHeight/4 + ',' + userHeight/2 + ',' + userHeight/1.33 + ',' + (userHeight-10);
    }
}

Next thing to do is to create a GTM Data Layer variable and set the variable name to gtm.scrollThreshold. This variable will take the value from the dataLayer event created by GTM and will be used to find out what was the page scroll percentage when the event was fired.
 

 
We are going to use the Scroll Threshold, and this variable will be divided by the total height in order to find what is the exact scroll percentage of the page.
 

User Scroll Percentage
function(){
      var userHeight = $(document).height();
      var totalHidden = $('.hiddenContainerDiv').outerHeight();
      var total = userHeight + totalHidden;
      return parseInt({{GTM Threshold}}/total*100);
}

So, this is how your event should look like:
 

A potential problem: Can you limit events to certain pages?

 
While testing the new tool, we found a ‘small’ problem with the Built-In Trigger, which can negatively impact the performance of a page. The problem appears when you don’t want to trigger the event for every page on your website, but rather for a limited selection of pages.
 
In order to create a Scroll Depth event, GTM fires a Data Layer event. You may expect that if you want to exclude the Scroll Depth event from a page or a selection of pages, GTM will not fire that Data Layer event on the particular page. However, there is an issue and you may have guessed: that GTM will fire the same Data Layer events on every page as it fire on the page where the Scroll Depth event is fired. Therefore, you will end up having the Scroll Depth Data Layer event on all of your pages.
 
 
 

2. Scroll Depth custom HTML solution for pages with variable height 

 
Unfortunately, the best solution we found if you want the Scroll Depth Trigger to only be fired in some pages and some elements are injected directly into HTML is not with the built-in GTM Scroll Depth.
 
The solution is to create a Custom HTML tag to calculate the page height and user scroll percentage and then to create the dataLayer events
 
This method implies having a Custom HTML tag that will be fired at Window Load for page you want the Scroll Depth event.
 
In the first part of the code, if within the Window Loaded is a small page you don’t want the Scroll Depth to be fired, there is a variable named minPageHeight, where you can set the minimum height required for the Scroll Depth trigger to fire. The Custom HTML tag will calculate the user scroll percentage and create dataLayer events just once per page.
 
Check how the code should look like:  
 

<script>
  if($){
    var storage = '0';
    var minPageHeight = 1100;
    var dataLayerPush = function (percentage) {
        dataLayer.push({
            'event': 'ScrollDepthEvent',
            'scrollDepthPercent': percentage
        });
        storage += "/" + percentage;
    }
    $(window).on('scroll', function () {
        var s = $(window).scrollTop(),
            d = $(document).height(),
            c = $(window).height();
        if (minPageHeight < d) {
            var scrollDif = Math.round((s / (d - c)) * 100);
        } else {
            var scrollDif = 0;
        }
          if (scrollDif > 0 && (c+s+10) >= d) {
            dataLayerPush(100);
            $(window).off('scroll');
        } else if (scrollDif >= 75 && storage.indexOf('75') == -1) {
   dataLayerPush(75);
        } else if (scrollDif >= 50 && storage.indexOf('50') == -1) {
            dataLayerPush(50);
        } else if (scrollDif >= 25 && storage.indexOf('25') == -1) {
            dataLayerPush(25);
        }
    });
  }
</script>

After setting the Custom HTML tag comes the easiest part, where you just have to create the GTM Scroll Depth Tag. First, you are going to create a Data Layer Variable and set the name scrollDepthPercent. This variable will extract the value from the dataLayer event and has the percent value of scroll.
 

 
In the end, this is how the tag and the trigger will look like:
 

 
You can use the workarounds above or use this custom solution that does not suffer form the same limitations. I hope this blog post was helpful and it solved part of your problems regarding Scroll Depth tracking.

About the author

Alex Holhos