Scroll Tracking for Single-Page Applications (GTM)

Google Tag Manager (GTM) conveniently provides a scroll depth trigger to determine how far someone has scrolled down the page. However, this scroll depth trigger doesn't work on websites using single page app (SPA) technology, since there is no full page load to reset the thresholds. This means that once you scroll down to the bottom and hit your maximum scroll threshold, scroll tracking on subsequent pages won't be tracked.

This article will show how to set up scroll tracking for single page apps using GTM (and only GTM). Since GTM's built-in scroll tracking won't work here, we'll modify a different scroll tracking plugin provided by Lunametrics (now known as Bounteous). They've done all the hard work by providing the script, we just need to make a couple small changes.

CONTENTS

1. Get the Lunametrics scroll tracking plugin
2. Import the container into GTM
3. Choose how to import the file
4. Complete the import process
5. Select the scroll tracking tag
6. Edit the scroll tracking trigger
7. Upate the scroll tracking tag
8. Add in your GA tracking ID
9. Modify, preview, and publish

1. Get the Lunametrics scroll tracking plugin

Download the Lunametrics scroll tracking container file here. Right-click the link and select "Save link as" to save the file to your own computer.

2. Import the container into GTM

Log into GTM and click Admin > Import Container

3. Choose how to import the file

You'll be prompted to choose the file to import, which should be called luna-scroll-tracking.json. Choose to save it into a new or existing workspace (I recommend choosing New, since it's more convenient for testing, and allows you to easily scrap the whole thing if you run into any problems).

You'll also be prompted to choose whether these new tags, triggers, and variables should overwrite or merge into your existing container. Choose "Merge" if you want to ensure that no existing tags are disrupted.

4. Complete the import process

Once you've chosen your settings, click Confirm to import the Lunametrics scroll tracking container into your own GTM container.

You should now see a set of new tags, triggers, and variables related to scroll tracking. This means we can now add in our modifications to make it work for a single page app setup.

5. Select the scroll tracking plugin tag

Head over to the Tags section of GTM and find the CU - Scroll Tracking - LunaMetrics Plugin. By default, they've configured it to fire on All Pages. However, we want it to wait for the whole page to load, because single page apps often have an issue in which the tag fires too early and immediately sends events for all scroll tracking thresholds. Click into the tag so we can modify the trigger.

6. Edit the scroll tracking trigger

Edit the trigger by clicking on the icon in the top right of the trigger section. Remove the existing 'All Pages' trigger.

Replace that Page View trigger with a Window Loaded trigger and click Save.

7. Update the Custom HTML tag

This step is the core modification to make the scroll tracking plugin work on our single page app. This section has been updated based on contributions from commenter Kriya, who says:

Replace the method onDocHeightChange @line 505 in the LunaMetrics plugin to

/**
 * Helper that watches for changes to location.href
 */
function onDocPathChange(handler) {
  var href = location.href;

  return setInterval(function() {
    if (location.href !== href) {
      handler();
      href = location.href
    }
  }, 500);
}

then, on line 83, update its reference from timer: onDocHeightChange(boundUpdate), to timer: onDocPathChange(boundUpdate),

It basically watches for changes to location.href and resets the internal state of the plugin (when it calls handler callback parameter), instead of doing that when the height of the document changes. One thing to keep in mind is that location.href includes the domain, path, along with any query params and hash at the end. So changes to any of that would cause the plugin state to reset, and start re-triggering the scrollTracking event. It may be mentioned that some people may want to modify that method to instead rely on location.pathname (which would ignore changes to query params or hash -- hash generally changes when a link is clicked that anchors to an element on the same page, in which case it may be better to not reset the state as the page hasn't actually changed). I've tested this change and it's been working well for me.

Thank you, Kriya! Now, this function should run to clear and reset the scroll thresholds, allowing you to track subsequent pages in your app as if your site were firing traditional page loads.

8. Add in your own GA tracking ID

Find the tag called GA - Event - Scroll Tracking and update it with your own GA tracking ID.

9. Modify, Preview, and Publish

Now that you have everything set up, enter preview mode and click around your site to verify that all is working as expected. You may also wish to adjust the thresholds for your trigger, which you can do within the original CU - Scroll Tracking - LunaMetrics Plugin tag. By default, they've set it to fire at 10% and 90%, as well as every 25% (i.e. at 25%, 50%, 75%, and 100%). In this example adjustment, I've set it to fire only at the 25% intervals, to reduce the total quantity of scroll tracking events.

You may also wish to modify your event to fire only on certain URLs. Once you've made your modifications and verified that all works in Preview mode, click Publish to send the new scroll tracking tags to your site.

Please leave a comment if this works (or doesn't work) for you!