Implementing Scroll Tracking via Google Tag Manager

 

Scroll tracking is one of the methods of measuring how people are consuming your website contents.

People who actually read your article are most likely to scroll your article page (unless you can get away with Seth godin type articles) and by measuring the percentage of scroll, you can get a good idea of content consumption.

If majority of people do not scroll to the bottom of your articles then something may be wrong with your contents.

Method -1

Follow the steps below to implement scroll tracking via Google Tag Manager:

Step-1: Install jQuery on your website as my scripts use jQuery. If you find the installation tricky, then download the wordpress plugin called WP jQuery Plus which will install jQuery for you in just one click.

Step-2: Login to Google Tag Manager and create a new ‘Custom HTML’ tag with following specifications:

Tag Name: Scroll Tracking Script

Tag Type: Custom HTML Tag

HTML:Copy-paste the JavaScript code from here.

 

Note(1): I am using the Scroll Tracking Code of Justin Cutroni but with little modification. You can get the original code from here.

Note(2): The code above looks for a div specific to my blog named ‘authorTemplate’. It may be different in your case. So find the following line of code from the code above and change the div element (highlighted in bold):

// If user has hit the bottom of the content send an event
if (bottom >= $(“#authorTemplate“).scrollTop() + $(“#authorTemplate“).innerHeight() && !endContent) {

Firing Rule

Rule Name: All Pages

Rule Condition: url matches Regex .*

gtm rule 1

Click on the save button twice to create your new tag.

 

Step-3: Preview and debug your new tag, create a new container version and then publish the new container.

This is the simplest way to install scroll tracking via GTM.

Once you have installed the script, check the real time Events report to see whether your website is capturing the scroll events:

real time analytics

You will see output from my script in following format:

Event Category: Reading

Event Action: Title Tag of the Page

Event Label: Article Loaded, Start Reading, Content Bottom, Page Bottom

My script tracks the following events:

1. The number of times an article load in a web browser (identified by the event ‘Article loaded’)

2. When a user starts scrolling the page (identified by the event ‘Start Reading’). By default this event is triggered when a user has scrolled 150 pixels down the page. You can change this setting.

3. When a user scrolls to the bottom of an article (identified by the event ‘Content bottom’)

4. When a user scrolls to the bottom of a page (identified by the event ‘Page bottom’)

Step-4: Go to Behavior > Events > Top Events > Reading in your Universal Analytics view to get detailed scrolling insight for each article page:

scroll tracking result

If you have used Justin’s script before, you can quickly notice the difference in the results here. His script uses: Article Loaded, Start Reading, Content Bottom, Page Bottom as event action and then it drills down to page title:

justin script

Whereas my script uses: page title as event action and shows following actions: Article Loaded, Start Reading, Content Bottom, Page Bottom as event label for each article:

my script 1

In this way you can easily track the scroll tracking activity for each article.

 

Method -2 (HTML DOM independent version)

Another way of getting scroll tracking insight is by calculating the exact scroll depth in percentage: 25%. 50%, 75% and 100%.

Rob Flaherty ‘s Track Scroll Depth Plugin provide such type of insight. His plugin fires an event at 25%, 50%, 75% and 100% scroll. The advantage of his plugin over Justin’s script is that it is independent of HTML DOM.

If you remember, Justin’s script look for a specific div of your blog. If that div changes for someone reason, your scroll tracking may either stop working or start producing inaccurate results. A typical commercial website changes all the time. So you can never be so sure about your HTML DOM.

Follow the steps below to implement scroll depth tracking via Google Tag Manager:

Step-1: Install jQuery on your website as described above.

Step-2: Login to Google Tag Manager and create a new ‘Custom HTML’ tag with following specifications:

Tag Name: Scroll Depth Tracking Script

Tag Type: Custom HTML Tag

HTML:Copy-paste the JavaScript code from here

 

Note(1): I am using the Scroll Tracking Code of Rob Flaherty but with little modification. You can get the original code from here.

Firing Rule

Rule Name: All Pages

Rule Condition: url matches Regex .*

Click on the save button twice to create your new tag.

 

Step-3: Create a new Universal Analytics track for scroll depth tracking with following specifications:

Tag Name: UA Tag for Scroll Tracking

Tag Type: Universal Analytics

Tracking ID: <Enter your Web Property ID>

Track Type: Event

UA Tag for Scroll Tracking

If you look at the scroll depth tracking code, you can see that it is pushing event data into a data layer.

I don’t think there is any need for that but i choosed not to change the code much (more about it later).

So in order to extract event data from data layer, I need to create following 4 macros of type ‘Data Layer Variable’:

1. Macro Name: Event Category, Macro Type: Data Layer Variable, Data Layer Variable Name – eventCategory, Data Layer Version – Version2

2. Macro Name: Event Action, Macro Type: Data Layer Variable, Data Layer Variable Name – eventActionData Layer Version – Version2

3. Macro Name: Event Label, Macro Type: Data Layer Variable, Data Layer Variable Name – eventLabel, Data Layer Version – Version2

4. Macro Name: Event Value, Macro Type: Data Layer Variable, Data Layer Variable Name – eventValue, Data Layer Version – Version2

Following is an example of how you can create such type of macros:

event category macro

Step-4: Once you have created these macros, add them as event tracking parameters to the tag named ‘UA Tag for Scroll Tracking’:

event tracking parameters

Firing Rule

Rule Name: Check for Scroll Distance event

Rule Condition: event equals ScrollDistance

check for scroll distance event

Click on the save button twice to create your new tag.

Step-5: Preview and debug your new tags, create a new container version and then publish the new container.

Step-6: Go to Behavior > Events > Top Events > Reading in your Universal Analytics view to get detailed scrolling insight for each article page:

rob scriptIf you have used Rob’s original script/plugin before, you can quickly notice the difference in the results here. His script does not tie scroll events to a particular page whereas my script does. That is why I need to modify his script a bit.

Also worth noting is that I am using version 4 of his plugin. His latest plugin is version 6 which you can download from here.

The reason I didn’t use and modified the latest version is because, the latest script fire two more events  ‘Pixel Depth’ and ‘user timing’. My script doesn’t in order to stay within the Google Analytics Collection Limits and Quotas which is 500 hits per session. Also his latest script require lot more editing and testing than the version 4 script which i first encountered.

 

Method-3 (Hybrid version)

Finally I thought of combing both Justin and Rob’s scroll tracking scripts and create one super scroll tracking script.

Follow the steps below to implement Super scroll tracking via Google Tag Manager:

Step-1: Install jQuery on your website as described above.

Step-2: Login to Google Tag Manager and create a new ‘Custom HTML’ tag with following specifications:

Tag Name: Super Scroll Tracking Script

Tag Type: Custom HTML Tag

HTML:Copy-paste the JavaScript code from here

 

Firing Rule

Rule Name: All Pages

Rule Condition: url matches Regex .*

Click on the save button twice to create your new tag.

 

Step-3: Follow steps 3 to 6 as described above in method 2.

Following is one of the output of the Super Scroll Tracking Script for really in-depth scroll analysis:

super scroll tracking

Few caveats here.

I deliberately did not change the original scripts much because that would mean more testing and headache for me. Understanding someone’s else code is always a headache 🙂

Consequently my code is not as clean as it should be. It is working fine for me. Let me know if you catch a bug.

Other article you will find useful: Implementing E-Commerce Tracking via Google Tag Manager

 

Quick Announcement about my new books

maths and stats bottom banner email analytics bottom banner attribution modelling bottom banner

Book #1: Maths and Stats for Web Analytics and Conversion Optimization - This expert guide will teach you, how to leverage the knowledge of maths and statistics, in order to accurately interpret data and take actions, which can quickly improve the bottom-line of your online business.

Book #2: Master the Essentials of Email Marketing Analytics - This book focuses solely on the ‘analytics’ that power your email marketing optimization program and help you in dramatically reducing your cost per acquisition and increasing marketing ROI, by tracking the performance of the various KPIs and metrics used for email marketing.

Book #3: Attribution Modelling in Google Analytics and Beyond - Attribution modelling is the process of determining the most effective marketing channels for investment. This book has been written to help you, in implementing attribution modelling. It will teach you, how to leverage the knowledge of attribution modelling, in allocating marketing budget and understanding buying behaviour.


 

Himanshu Sharma

Certified web analyst and founder of OptimizeSmart.com

My name is Himanshu Sharma and I help businesses in finding and fixing their Google Analytics and conversion issues.
  • More than ten years' experience in SEO, PPC and web analytics
  • Certified web analyst (master level) from MarketMotive.com
  • Google Analytics certified
  • Google AdWords certified
  • Nominated for Digital Analytics Association Award for Excellence
  • Bachelors degree in Internet Science
  • Founder of OptimizeSmart.com and EventEducation.com
I am also the author of the book Maths and Stats for Web Analytics and Conversion Optimization If you have any questions or comments please contact me