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’)

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: 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:

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

#2  Implementing E-Commerce Tracking via Google Tag Manager

Other Articles on Specialised Tracking in Google Analytics

  1. Google Analytics Recurring Revenue and Subscriptions Tracking Guide
  2. How to track the impact of cookie consent on website traffic in Google Analytics
  3. Phone Call Tracking in Google Analytics and Beyond
  4. Scroll Tracking via Scroll Depth Trigger in Google Tag Manager
  5. Video Tracking via YouTube Video Trigger In Google Tag Manager
  6. Calculated Metrics in Google Analytics – Complete Guide
  7. The one thing that you don’t know about PayPal.com and the referral exclusion list
  8. Introduction to Postbacks in Google Analytics
  9. Creating Content Group in Google Analytics via tracking code using gtag.js
  10. Tracking Site Search without Query Parameter in Google Tag Manager
  11. Setting Up Site Search Tracking for POST based search engines in Google Analytics
  12. Tracking Site Search for GET-Based Search Engines in Google Analytics
  13. Understanding site search tracking in Google Analytics
  14. Tracking Virtual Pageviews in Google Tag Manager – Complete Guide
  15. Creating and using Site Search Funnel in Google Analytics
  16. Learn to Setup Facebook Pixel Tracking via Google Tag Manager
  17. How to use Keyword Hero to reveal Not Provided keywords in Google Analytics
  18. Guide to Event Tracking via Google Tag Manager
  19. Learn to track Qualified and Won leads in Google Analytics
  20. Creating your own Google Analytics Tag Auditing System
  21. Using multiple Google Analytics tracking codes on web pages
  22. Guide to Offline Conversion Tracking in Google Analytics
  23. Google Analytics and YouTube Integration Guide
  24. Complete Guide to Google Analytics for Facebook
  25. Tracking true referrals in Google Analytics when using PayPal and other payment gateways
  26. Virtual pageviews in Google Analytics – Complete Guide
  27. YouTube Video tracking via Google Tag Manager
  28. Implementing E-Commerce Tracking via Google Tag Manager
  29. Event Tracking in Google Analytics – Complete Guide
  30. E-Commerce Tracking in Google Analytics – Complete Guide
  31. Google Analytics Cross Domain Tracking Explained Like Never Before
  32. Google Analytics Social Tracking – Twitter, Facebook, Google Plus and LinkedIn
  33. Setting up & Tracking AMP Pages in Google Analytics
  34. Setting up Sales Funnel across websites in Google Analytics
  35. Using Data Visualization to analyze the SEO Performance
  36. Tracking offline conversions in Google Adwords
  37. How to Correctly Measure Conversion Date & Time in Google Analytics
  38. Tracking Twitter and Linkedin Social Interactions in Google Analytics
  39. Implementing Scroll Tracking via Google Tag Manager
  40. Phone Call Tracking and ROI calculations – Champion’s Guide
  41. Google Analytics Cross Domain Tracking (ga.js)
  42. Open Graph Protocol for Facebook Explained with Examples
  43. How to Exclude URL Query Parameters in Google Analytics?
  44. Understanding Google Analytics Default Page Setting
  45. Implementing rollup reporting in Google Analytics
 

Do you know the difference between Digital Analytics and Google Analytics?


99.99% of course creators themselves don’t know the difference between Digital analytics, Google Analytics (GA) and Google Tag Manager (GTM).

So they are teaching GA and GTM in the name of teaching Digital analytics.

They just copy each other. Monkey see, monkey do.

But Digital analytics is not about GA, GTM.

It is about analyzing and interpreting data, setting up goals, strategies and KPIs.

It’s about creating strategic roadmap for your business.


Digital Analytics is the core skill. Google Analytics is just a tool used to implement ‘Digital Analytics’.

You can also implement ‘Digital analytics’ via other tools like ‘adobe analytics’, ‘kissmetrics’ etc.

Using Google Analytics without the good understanding of ‘Digital analytics’ is like driving around in a car, in a big city without understanding the traffic rules and road signs.

You are either likely to end up somewhere other than your destination or you get involved in an accident.


You learn data analysis and interpretation from Digital analytics and not from Google Analytics.

The direction in which your analysis will move, will determine the direction in which your marketing campaigns and eventually your company will move to get the highest possible return on investment.

You get that direction from ‘Digital analytics’ and not from ‘Google Analytics’.


You learn to set up KPIs, strategies and measurement framework for your business from ‘Digital analytics’ and not from ‘Google Analytics’.

So if you are taking a course only on 'Google Analytics’, you are learning to use one of the tools of ‘Digital analytics’. You are not learning the ‘Digital analytics’ itself.

Since any person can learn to use Google Analytics in couple of weeks, you do no get any competitive advantage in the marketplace just by knowing GA.

You need to know lot more than GA in order to work in digital analytics and marketing field.


So what I have done, if you are interested, is I have put together a completely free training that will teach you exactly how I have been able to leverage digital analytics to generate floods of news sales and customers and how you can literally copy what I have done to get similar results.

Here what You'll Learn On This FREE Web Class!


1) The number 1 reason why most marketers and business owners are not able to scale their advertising and maximise sales.

2) Why you won’t get any competitive advantage in the marketplace just by knowing Google Analytics.

3) The number 1 reason why conversion optimization is not working for your business.

4) How to advertise on any marketing platform for FREE with an unlimited budget.

5) How to learn and master digital analytics 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 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 which 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 !!