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!

I’ve been trying to implement scroll tracking on my blog for a couple of months now without having to modify my blog’s source code. I have fairly basic knowledge of HTML, CSS, and JavaScript, but I’m certainly not an advanced developer capable of creating a solution. So, like all great researchers, I headed over to Google.com to see what I could find.

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

Requirements:

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:

I'm a Digital Marketing Analyst at InfoTrust LLC, a Google Analytics Certified Partner and Google Analytics Premium Authorized Reseller.I graduated from the University of Dayton in 2012 with an MBA/Marketing degree.

I’m running into some funny behavior where this seems to be effecting the user counts. I’m using GTM, but I’m not sure if this is potentially just a general issue with scrolldepth.js

Early this month, I temporarily disabled scroll tracking and noticed a sharp drop in the number of users. Then yesterday, I reconfigured the tag and associated macros and firing rules (with scrolldepth.js v 0.6) and saw my users shoot back up. You can see the trend in the screenshot of one of my views here: http://i.imgur.com/x3PTiiE.png. At first I thought this may have been an issue with the value of nonInteraction, but I’ve confirmed that that value gets set to true.

Hello I just tried to implemented this solution in one page website to track users interactions in our website, however, I didn’t succeed. It is a wordpress template where I don’t see any specified (DOM) elements. In that case how I should proceed in order to see users scrolling behaviour.

I’ve just switched from regular tracking to GTM I followed all the steps described in your post and looks that everything is working just fine

still, I got a bit confused with the additional WordPress plugin Riveted which I deactivated prior the switch; now in real-time Event tracking, Riveted still gets listed and showing data which led me asking you if this is normal or there’s something I’m missing (it looks like, by implementing ScrollDepth track through GTM, it also gives me data Rivete plugin did)

if I’m wrong and there’s need for further tweaks, where or what steps should I follow to setup the additional two trackings (Rivete, Screentime) in GTM? – shall I reactivate the Rivete WordPress plugin?

Hi Andy, I used this set up and it is working fine with my website, but there is one problem that it is tracking visitors who are not scrolling and if I set non interaction = false then bounce rate becomes zero. Please help me to solve this problem.

Hi, I recently wrote a small library for scroll tracking. It does not depend on jQuery and has a set of api to add tracking elements. Hope it will help tracking some sites that do not have jQuery. https://github.com/oddui/scrolltracker

Hello, Andy Gibson. I there an updated version of instructions for version scrolldepth.js v 0.6 . I tried copying the updated version of the pluging into my custom HTML tag in GTM, then I followed the step you outlined about. But it’s not working. Any advice?

I followed all steps and when previewing the solution in debug mode I see the events being fired (25%, 50%, 75% etc). However, after publishing I can’t seem to find it in Analytics. Where are the results displayed?

Hi Andy. Will look into this in more detail, but had a question about using scroll as an event and thus impact on bounce rate. We do have content rich page and so people reading then would be micro conversion. But am sure not all that scroll actually read

Hi Andy. All live with this, noted some behaviour though. In real time scroll depth only appears on Events (last 30) and not active users – under the events link. Equally if you assign it as a goal it it only appears on Goal hits (last 30) and not active users. Not a major problem though

Hi , thanks a lot, I just followed your lead, but sadly something went wrong. I did everything as you told, but the debugger mode told me that event equals ScrollDistance is not firing. can u give me some help?

Thank’s so much for this Andy. Just a tip: you might want to consider updating the tutorial for GTM v2 that will soon replace GTM. The UI and terminology in the new version of Tag Manager is quite different from it’s predecessor.

Thanks for this Andy. Just implemented it and it worked wonder. I only made one change: I changed the event action macro from “EventAction” to “URL Path” which shows me the scroll depth on a page by page basis.

Hi Andy your tutorial was great, just wondering if you ever tried to setup, Robs RivetedTiming script in GTM. I tried (kinda using your template for setting up scroll depth) got close but i am missing something, in GA “events” the eventlaction & eventlabel are showing “percentage” & Baseline|25%|50% and so on. Any help would be most welcomed

Great post, thanks. I have implemented this for a client in the container draft (v.1 GTM) but the only event I can see coming through is the Baseline event. I haven’t made any changes to the script (I have v0.4.1). The script fires on gtm.dom (I also tried the built-in All Pages rule). The UA event fires on {{event}} equals ScrollDistance.

Do you have any ideas? I thought maybe the minimum height was set too high as they are short pages but it’s set to 0.

Now that problem has gone..but still its not working.The GA tag created for this purpose is also not getting fired.what could be the prblm.how do I know that my website has jquery plugin installed or not.How to install jquery plugin

There are a few ways to check if your site has jQuery, just open up your Developer Tools Console and type in “$.fn.jquery” and hit Enter. It’ll return the version of jQuery your site is using OR it’ll throw an error, meaning you don’t have jQuery on your site.

I’d love to get this up and running in GTM v2 as well. I’ve got most of these steps recreated there, but am running into a couple of issues. I had to remove the Event = ‘ScrollDistance’ trigger completely to get the event to fire at all. After removing that, an event registers on page load in Google Analytics, but the Category and Action are both ‘undefined’, and the Label is ‘(not set)’; it also does not trigger additional events when scrolling down the page (so I’m not sure it’s firing the js at all).

I’m betting there are just a few configuration changes that need to be made, but I’m new to GTM and am not sure where to start. Any suggestions would be appreciated!

Also, just realized I had to remove the Event = ‘gtm.dom’ trigger for the Custom HTML Tag (with scrolldepth.js) to actually load on the page. Removing that trigger did not correct the undefined/(not set) issue tho.

Getting the error..Uncaught ReferenceError: jQuery is not defined…. sometimes and the events donot fire when this happens.. This is happening randomly on the same page error is being thrown sometimes and sometimes it works fine…

Thanks a lot Andy. Your step by step example walked me through all settings ( little common sense effort needed to complete the task with slightly different UI in google tag manager 2015 ). it works.

Notes for other beginners with GTM like me :

1. don’t include jquery.scrolldepth.min.js in your page – because it is already loaded through the GTM custom HTML tag as shown on this page by Andy. if you load both of them, then the events will fire multiple times (twice/double time). I came to this tutorial from scrolldepth lib page and it wasn’t obvious to me.

2. if you want the ScrollTiming event to reach your GA, then you need to define new tag with GA for it, the same way you did for ScrollDistance event. (GTM fire the ScrollTiming, but there is no GA tag to listen for this event – use GTM preview mode to see this happen).

This is great. Thanks for the great resource. How does GA track these events? For example: if a user scrolls all the way down the page and all 5 labels are fired (baseline, 25%, 50%, etc), does GA track that visit as has having all 5 unique event labels or just event with the label100%?

Thanks for putting this together. It helps a lot when being a non-coder and implementing important measurement from a marketing perspective.

To give feedback for others on how things have changed since GTM moved to version 2:

– When choosing your event, you no longer have to put: event equals ScrollDistance.

– Now it’s just event name: ScrollDistance.

If you’re using the 2nd version of the jquery script Andy made, the event name is actually “GAscroll” This caught me up for a while because I want to remove the baseline from my scroll rate but was having an issue.

Finally, if using WordPress, the plugin “jQuery UI Widgets” helps you integrate the jQuery library nicely and it’s free.

Thanks for the work you’ve done on this. I mentioned you on my blog and gave a few insights on common missteps people may run into (most notably that version 2 of the js uses the event name “GAscroll” rather than “ScrollDistance.”