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

Other articles on specialized tracking in Google Analytics

  1. Ecommerce Tracking in Google Analytics – Tutorial
  2. Event Tracking via Google Tag Manager – Tutorial
  3. Event Tracking in Google Analytics – Tutorial
  4. Guide to Google Analytics Store Visits Tracking
  5. Offline Conversion Tracking in Google Analytics – Tutorial
  6. Implementing E-Commerce Tracking via Google Tag Manager
  7. Tracking Virtual Pageviews in Google Tag Manager – Tutorial
  8. YouTube Video tracking via Google Tag Manager
  9. How to Use Keyword Hero to Reveal Not Provided Keywords in Google Analytics
  10. Virtual pageviews in Google Analytics – Tutorial
  11. Google Analytics and YouTube Integration Tutorial
  12. Google Analytics for Facebook Tutorial
  13. Google Analytics Cross Domain Tracking Explained Like Never Before
  14. Using multiple Google Analytics tracking codes on web pages
  15. The one thing that you don’t know about PayPal.com and the referral exclusion list
  16. Calculated Metrics in Google Analytics – Tutorial
  17. Creating your own Google Analytics Tag Auditing System
  18. Tracking Site Search without Query Parameter in Google Tag Manager
  19. Tracking true referrals in Google Analytics when using PayPal and other payment gateways
  20. Phone Call Tracking in Google Analytics and Beyond
  21. Learn to Track Qualified and Won Leads in Google Analytics
  22. Introduction to Postbacks in Google Analytics
  23. Google Analytics Recurring Revenue and Subscriptions Tracking Tutorial
  24. How to track the impact of cookie consent on website traffic in Google Analytics
  25. Tracking Offline Conversions in Google Ads
  26. Implementing Scroll Tracking via Google Tag Manager
  27. Scroll Tracking via Scroll Depth Trigger in Google Tag Manager
  28. Site Search Tracking In Google Analytics Without Query Parameters
  29. Video Tracking via YouTube Video Trigger In Google Tag Manager
  30. How to Correctly Measure Conversion Date & Time in Google Analytics
  31. Google Analytics Social Tracking – Twitter, Facebook, Google Plus and LinkedIn
  32. Google Analytics Cross Domain Tracking (ga.js)
  33. Tracking Twitter and Linkedin Social Interactions in Google Analytics
  34. Creating Content Group in Google Analytics via tracking code using gtag.js
  35. Tracking Site Search in Google Analytics with Query Parameters
  36. Understanding site search tracking in Google Analytics
  37. Creating and Using Site Search Funnel in Google Analytics
  38. Learn to Setup Facebook Pixel Tracking via Google Tag Manager
  39. Setting up & Tracking AMP Pages in Google Analytics
  40. Setting up Sales Funnel across websites in Google Analytics
  41. Regular Expressions (Regex) for Google Analytics & Google Tag Manager – Tutorial

Register for the FREE TRAINING...

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



Here’s what we’re going to cover in this training…

#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 !!