Scroll Tracking

Some pages show content below the fold. When it's important to understand how users are engaging with this content (or simply, how much of the content is viewed), it is recommended to employ GA events to track scrolling behavior (with, for example, category: engagement, action: scroll).

Once this scroll tracking functionality is deployed, the events can be seen in the Behavior > Events > Top Events report.

Deployment via GTM

Use Scroll depth trigger and bind it with Google Analytics Event Tracking tag.

 

Deployment via on-page code

The script below uses Google Analytics Event Tracking to capture when a user reaches specific percentage points of the page height. Ensure that this script is included on every page and that the function is called on the page.

<script>
  function trackScroll(percents) {
  
    // get top of viewport
    function scrollY() {
      var de = document.documentElement;
      return self.pageYOffset || ( de && de.scrollTop ) || document.body.scrollTop;
    }

    // get total height of page
    function pageHeight() {
      return document.body.scrollHeight;
    }

    // get window height
    function windowHeight() {
      var de = document.documentElement;
      return self.innerHeight || (de && de.clientHeight ) || document.body.clientHeight;
    }

    // Cross browser way to listen for events.
    function addListener(element, type, callback) {
      if (element.addEventListener) {
        element.addEventListener(type, callback);
      } else if (element.attachEvent) {
        element.attachEvent('on' + type, callback);
      }
    }

    // array flag to track each percent scrolled only once
    var gaTracked = [];

    function sendScrollEvent() {
      for (var i=0,len=percents.length; i<len; i++) {
        
        // on scroll determine scrolling %
        var yScroll = (scrollY() + windowHeight())/pageHeight()*100;
        var percentLabel = percents[i]+'%';

        // if the % has not been tracked, but has been scrolled past, call an event
        if (gaTracked.indexOf(percentLabel) < 0 && yScroll > percents[i]) {
          gaTracked.push(percentLabel);
         
          // Universal Analytics method
          ga('send', 'event', 'interaction', 'page-scroll', percentLabel);
        }       }
    }
    addListener(window, 'scroll', sendScrollEvent);
  }
</script>

The resulting events will be tracked with the following data model:

• category: interaction
• action: page-scroll
• label: the maximum percentage scrolled (e.g. 50%)

To track scrolls to 90% of the page height, you would then call this function as

trackScroll([90]);

Similarly, to track scrolls to 25%, 50%, 75%, and 100%, you would then call this function as:

trackScroll([25,50,75,100]);

This code will only be triggered once per page for each percent value. Therefore, if a user reaches 90% of the window several times on a single page, only one Event will be triggered.