Scroll Tracking Recipe for GTM
Adds automatic scroll tracking to every page on your site and sends events to Google Analytics. By default, tracks user scroll depth at the 10%, 25%, 50%, 75%, 90%, and 100% marks, but can be customized. Download the container JSON file. (You may need to right-click on the link and choose “Save Link As” or “Save Target As” to save the JSON file to your computer.) Log into your own Google Tag Manager container and head to the Admin section of the site. Under Container options, select Import Container. Check out this blog post for more details about importing a container file. Update or create a new Constant Variable named {{YOUR_GA_TRACKING_ID}} with your Google Analytics Tracking ID (a.k.a. UA Number). 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! You can customize how often events fire by editing the configuration at the end of the tag "CU – LunaMetrics Scroll Tracking Plugin." Plug-and-play dependency-free scroll tracker for observing user scroll behavior on the web. Supports everything north of IE8. Tracking waypoints can be set on: Tracking can be set to measure “every” occurrence (e.g., every 25%) or each of a list of occurrences (e.g., 10%, 25%, 90%). The area observed can be customized by setting a custom Marker locations are refreshed when the document height changes or the window is resized. Include the library in your code, then construct a Additional handlers can be added at any time: To track scrolling with single-page applications (e.g. Angular apps), call To track scroll behavior with Google Analytics, replace YOUR_GA_PROPERTY_ID with your UA number and adjust the config variable to track what you’d like. Once you publish your next container, scroll tracking will begin working immediately. Constructs a ScrollTracker instance. HTMLElement to treat as scrolling context. Defaults to Minimum height of context required to track. The tracker won’t run if the context height is less than the minHeight setting. Registers a handler for a given configuration. Array of numbers. Track every n percentages from 0 to 100 for each number in the array. Array of numbers. Track each percentage in the array. Array of numbers. Track every n pixel depths from 0 to the document height for each number in the array. Array of numbers. Track each pixel depth in the array. Array of CSS selectors. Track when each instance of a matched element scrolls into view. Array of CSS selectors. Track first element that matches each selector in the array. Cleans up timer and event bindings. Resets the internal cache of tracker marks.Instructions
1. Download Container File
2. Import JSON File into GTM
3. Update With Your Own Tracking ID
4. Preview & Publish
Optional: Update Scroll Breakpoints
Documentation
Scroll Tracking Library & Google Tag Manager Plugin
context
. The library supports tracking nested scrollable areas (e.g., overflows).Installation
ScrollTracker
. NOTE: It’s up to you to ensure the DOM is ready before constructing your tracker. Register handlers for pixels, percentages, or elements by calling .on()
and passing in a configuration object:
if (document.readyState !== 'loading') {
init();
} else {
document.addEventListener('DOMContentLoaded', init);
}
function init() {
var tracker = window.ScrollTracker();
tracker.on({
percentages: {
every: [25]
}
}, function(evt) {
console.log(evt.data.label); // > "25%"
console.log(evt.data.depth); // > 500
});
}
tracker.on({
percentages: {
every: [25]
},
elements: {
each: ['.header', '.footer']
}
}, someNewHandler);
Tracking With SPAs
ScrollTracker#reset()
when a new "page" is rendered. This will reset the internal cache of marks that have been tracked. For example, using Angular 1.X.X & ngRoute:
// In your Config somewhere
$rootScope.$on('$routeChangeSuccess', function() {
$scrollTracker.reset();
});
Google Analytics
<script>
(function(document, window) {
var config = {
percentages: {
each: [10, 90],
every: [25]
}
};
var trackerId = YOUR_GA_PROPERTY_ID; // e.g. UA-000000-00
if (document.readyState !== 'loading') {
init();
} else {
document.addEventListener('DOMContentLoaded', init);
}
function init() {
getTracker(trackerId, registerScrollTracker);
}
function registerScrollTracker(tracker) {
var scrollTracker = window.ScrollTracker();
scrollTracker.on(config, function(evt) {
tracker.send('event', {
eventCategory: 'Scroll Tracking',
eventAction: evt.data.label,
eventLabel: document.location.pathname,
nonInteraction: true
});
});
}
function getTracker(trackerId, cb, ran) {
var ga = window[window.GoogleAnalyticsObject] ;
ga(function() {
var trackers = ga.getAll();
var len = trackers.length;
var tracker;
var i;
for (i = 0; i < len; i++) {
tracker = trackers[i];
if (tracker.get('trackingId') === trackerId) return cb(tracker);
}
if (!ran) {
setTimeout(function() {
getTracker(trackerId, cb, true);
}, 0);
}
});
}
})(document, window);
</script>
Google Tag Manager Plugin
Technical Documentation
ScrollTracker(opts)
opts.context
<body>
.
var nestedTracker = ScrollTracker({
context: document.getElementById('chat-sidebar')
});
opts.minHeight
var nestedTracker = ScrollTracker({
minHeight: viewportHeight()
});
function viewportHeight() {
var elem = (document.compatMode === "CSS1Compat") ?
document.documentElement :
document.body;
return elem.clientHeight;
}
ScrollTracker#on(config, handler)
config.percentages.every
tracker.on({
percentages: {
every: [25] // Tracks 25%, 50%, 75%, and 100%
}
}, handler);
config.percentages.each
tracker.on({
percentages: {
each: [10, 90] // Tracks 10% and 90%
}
}, handler);
config.pixels.every
tracker.on({
pixels: {
every: [100] // Tracks 100px, 200px, 300px, ...
}
}, handler);
config.pixels.each
tracker.on({
pixels: {
each: [100, 900] // Tracks 100px and 900px
}
}, handler);
config.elements.every
tracker.on({
elements: {
every: ['.li .widget'] // Tracks .li .widget[0], .li .widget[1], ...
}
}, handler);
config.elements.each
tracker.on({
elements: {
each: ['.widgets', '.footer'] // Tracks '.widgets', '.footer'
}
}, handler);
ScrollTracker#destroy()
ScrollTracker#reset()