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 the 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 the following specifications:

  • Tag Name: Scroll tracking script
  • Tag Type: Custom HTML tag
  • HTML: Copy-paste the JavaScript code from this txt file.

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 the output from my script in the 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’)

Get the E-Book (62 Pages)

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 the page title as event action and shows the following actions: Article Loaded, Start Reading, Content Bottom, Page Bottom as the event label for each article:

my script 1

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 provides 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 looks 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 the following specifications:

  • Tag Name: Scroll Depth Tracking Script
  • Tag Type: Custom HTML Tag
  • HTML: Copy-paste the JavaScript code from this txt file

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 chose not to change the code much (more about it later).

So in order to extract event data from the data layer, I need to create the following four 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 that the latest script fire two more events  ‘Pixel Depth’ and ‘user timing’.

My script doesn’t do that in order to stay within the Google Analytics Collection Limits and Quotas which is 500 hits per session.

Also, his latest script requires a 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 the following specifications:

  • Tag Name: Super Scroll Tracking Script
  • Tag Type: Custom HTML Tag
  • HTML: Copy-paste the JavaScript code from this txt file

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 outputs of the Super Scroll Tracking Script for really in-depth scroll analysis:

super scroll tracking

There are a 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 articles you will find useful

#1 Scroll Tracking via Scroll Depth Trigger in Google Tag Manager

#2  Implementing E-Commerce Tracking via Google Tag Manager

   

EXCLUSIVE FREE TRAINING REVEALS....

"How to use Digital Analytics to generate floods of new Sales and Customers without spending years figuring everything out on your own."


(even if you are completely new to analytics)


Here’s what we’re going to cover…

#1 Why digital analytics is the key to online business success.

​#2 The number 1 reason why most marketers are not able to scale their advertising and maximize sales.

#3 Why Google and Facebook ads don’t work for most businesses & how to make them work.

#4 ​Why you won’t get any competitive advantage in the marketplace just by knowing Google Analytics.

​#5 The number 1 reason why conversion optimization is not working for your business.

​#6 How to advertise on any marketing platform for FREE with an unlimited budget.

​#7 How to learn and master digital analytics and conversion optimization in record time.

 
   

My best selling books on Digital Analytics and Conversion Optimization

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.

Master the Essentials of Email Marketing Analytics
This book focuses solely on the ‘analytics’ that power your email marketing optimization program and will help you dramatically reduce your cost per acquisition and increase marketing ROI by tracking the performance of the various KPIs and metrics used for email marketing.

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 implement attribution modelling. It will teach you how to leverage the knowledge of attribution modelling in order to allocate marketing budget and understand buying behaviour.

Attribution Modelling in Google Ads and Facebook
This book has been written to help you implement attribution modelling in Google Ads (Google AdWords) and Facebook. It will teach you, how to leverage the knowledge of attribution modelling in order to understand the customer purchasing journey and determine the most effective marketing channels for investment.

Himanshu Sharma

Digital Marketing Consultant and Founder of Optimizesmart.com

Himanshu helps business owners and marketing professionals in generating more sales and ROI by fixing their website tracking issues, helping them understand their true customers' purchase journey and helping them determine the most effective marketing channels for investment.

He has over 12 years of experience in digital analytics and digital marketing.

He was nominated for the Digital Analytics Association's Awards for Excellence. The Digital Analytics Association is a world-renowned not-for-profit association that helps organisations overcome the challenges of data acquisition and application.

He is the author of four best-selling books on analytics and conversion optimization:

error: Alert: Content is protected !!