Update 10/24/13: The Scroll Depth Plugin tag has been updated below for the custom HTML tag that goes in Google Tag Manager. Everything should work!
Update 2/15/14: Rob Flaherty updated his Scroll Depth plugin to support GTM, so I removed the steps that used a fork of his plugin. Great work Rob!
Enter Rob Flaherty’s Track Scroll Depth Plugin
I came across Rob’s “Tracking Scroll Depth with jQuery and Google Analytics” blog post. Rob developed a jQuery plugin to track the percentage of the page a visitors scrolls. It sends this information as events to measure baseline (0%), 25%, 50%, 75%, and 100% scroll depth. This is exactly what I need! See the code here, on the project page: https://github.com/robflaherty/jquery-scrolldepth/blob/master/jquery.scrolldepth.js
But, this method requires that you modify your source code and upload the script to your site. I had some trouble doing this (*sad face*, *embarrassed face*), so I searched for a similar solution to use dataLayer pushes so I could send events using Google Tag Manager.
With the support for GTM in Rob’s latest update, I can now use his script + GTM to track all of these scroll depth events.
Steps to Track Scroll Depth
- Site uses Google Analytics (Classic and/or Universal Analytics)
- Site implements GA through Google Tag Manager
- Knowledge of GA + GTM
- Ability to read and follow directions 🙂
Step 1: Create Custom HTML Tag Using the Scroll Depth Plugin
Within the GTM container for my site, I will need to create a new “Custom HTML Tag” and add the code you see in the scrolltracking.js file below:
What this script will do, if you are using GTM, is make a dataLayer push for each scrolling event. Events within GTM are different from events with GA, so this won’t actually send any events to GA. We will need to build a separate event tracking tag to pull these events from the dataLayer and push them into GA as event tracking.
You will need to set a firing rule so that this script fires on gtm.dom, meaning it will fire once the DOM is ready. The custom HTML tag will look like this in GTM:
Step 2: Create New Google Analytics Tag for Event Tracking
Now the script will fire and push an event to the dataLayer each time a user scrolls down the page. To push these dataLayer events to GA as events (a little confusing I know), I will need to create a new Google Analytics event tracking tag using the same UA number. It will look very similar to your current GA tag, but instead of the “Track Type” being set to Pageview, you will need to change it to Event Tracking.
Now you will need to set up the Event Category, Event Action, Event Label, and Event Value fields for the event. We will do this dynamically by creating four macros that will pull these values from the dataLayer. Each one of the fields will need its own macro. So, for Event Category, click on the + Lego looking button and select “New Macro”. It should look like this:
Event Category Macro
Event Action Macro
Event Label Macro
Event Value Macro
NOTE: Rob’s scroll depth plugin sets all events to NonInteraction = true, meaning they will not affect the site’s bounce rate. You can build a macro, similar to the Event Tracking Parameters macros, to set these events to NonInteraction = true, or you can merely select True for Non-Interaction Hit below the Event Tracking Parameters.
You will also need to set the tag to fire on “event equals ScrollDistance”. Your final event tracking tag should look like this:
Step Three: Create Version and Publish in GTM
Now you’ve set up GTM to track scroll depth, feel free to test using GTM’s Debug mode, the GA Debugger extension, or your GA Real-Time Events report.
Let me know your thoughts, have you tried to implement something like this before? Having any trouble? Hit the comments! And don’t forget to check out Rob’s Scroll Depth plugin page at https://github.com/robflaherty/jquery-scrolldepth.
Disclaimer: The scroll depth plugin is not my solution, so any questions related to it affecting your site should be directed to Rob Flaherty.