Scroll Tracking Recipe (v2) for Google Tag Manager

This idea was originally proposed by Simo Ahava.

What does this recipe do? Adds automatic scroll tracking to every page on your site and sends events to Google Analytics. But this works differently, compared to the existing v1 configuration. Version 1 tracks all the thresholds that were passed by the visitor. In version 2, GTM will be looking for the farthest threshold that was reached by a visitor (10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90%, or 100%).

When a visitor is about to leave the page (e.g. tries to close a browser tab, refreshes the page, or navigates to another page), then GTM will send one scroll event with that farthest scroll threshold. Important: you will still see many Scroll Depth events in the preview and debug mode, but only one event will be sent to GA right before the visitor navigates to another page, or closes the browser tab, or refreshes the page.

Warning: this setup is using a feature called beacon API and not all browsers support it.

All events (pushed to Google Analytics) are set as non-interaction hits, thus they will not affect your bounce rate or time on website/page metrics.

INSTRUCTIONS

1. Download Container File
   Download the container JSON file (right-click on the link and click “Save Link As” or “Save Target As” to save the JSON file to your computer).
2. Import JSON File into GTM
   Log into your own Google Tag Manager container and head to the Admin section of the site. Under Container options, select Import Container. Read this blog post for more details about importing a container file.
3. Replace the already existing GA Settings Variable with your own
   Currently, the GA Event – Scrolling tag is using the GA Settings Variable named {{REPLACE THIS VARIABLE WITH YOUR OWN GA SETTINGS VARIABLE}}. Click that field and pick your already existing GA Settings Variable instead.
4. Preview & Publish
   Use the Preview options to test this container on your own site. Try testing each of the events to make sure they’re working properly. If everything looks good, go ahead and publish!

View all 40+ Google Tag Manager Recipes