Scroll Depth Tracking in Google Tag Manager – Tutorial

Today I am going to show you how to use the new scroll depth trigger in Google Tag Manager to track how far website visitors scroll contents on your website.

Introduction to Scroll Depth

The term which denotes how far website visitors scroll contents on your website is called the ‘Scroll Depth’. 

This scroll depth can be vertical or horizontal, depending upon the type of scrolling available on your website. So we can have two types of scroll depths: Vertical Scroll Depths and Horizontal Scroll Depths

  • Vertical Scroll depth measures how far website visitors scroll content on your website from top to bottom of a web page.
  • Horizontal Scroll depth measures how far website visitors scroll contents on your website from left to right of a web page.

How is Scroll Depth Measured?

The scroll depth (whether it is vertical or horizontal) is measured in either percentage or pixels.

  • If the value of the vertical scroll depth is 10% then it means 10% of the page was scrolled from top to bottom by a user.
  • If the value of the vertical scroll depth is 50% then it means 50% of the page was scrolled from top to bottom by a user.
  • If the value of the vertical scroll depth is 90% then it means 90% of the page was scrolled from top to bottom by a user.

90% Scroll depth can be considered equivalent to reaching the bottom of a web page as website visitors usually do not scroll 100% of a web page (unless the entire page fits in a default viewport)

// A viewport is the visible part of a web page.

Introduction to Scroll Depth Tracking

The tracking method which is used to measure ‘Scroll Depth’ is called ‘Scroll Depth Tracking’ or ‘Scroll Tracking’.

You can track scroll depth both vertically and horizontally depending upon the type of scrolling available on your website.

So we can have two types of scroll trackings:

Vertical Scroll Tracking and Horizontal Scroll Tracking

If vertical or horizontal scrollbars appear on most of your web pages and/or you run a content-rich website then you are a good candidate for implementing scroll tracking.

Through Scroll Tracking you can get an idea of how website visitors are consuming content on your website. For example, If you write very long articles but the majority of users exit your website after scrolling only 25% of your article pages then something is wrong with your website traffic or content.

You are either getting the wrong type of traffic on your website or your contents are not relevant to your target audience.

This is the kind of insight you can get through scroll tracking.

gtm 101

Get the E-Book (100 Pages)

CSS selectors in Google Tag Manager


Get the FREE E-Book (62 Pages)

Setting up Scroll Depth Tracking via Scroll Depth Trigger in GTM

Follow the steps below:

Step-1: Login to your Google Tag Manager (GTM) account and then click on the ‘Folders’ tab:

folders tab

Step-2: Click on the ‘New Folder’ button.

Step-3: Name your new folder ‘Scroll Tracking’ and then click on the ‘create’ button. We are going to use this folder to store all tags and triggers related to scroll tracking.

Step-4: Click on the ‘Variables’ tab:

variables tab

Step-5: Click on the ‘Configure’ button:

configure button

Step-6: Scroll down and then select the following three built-in variables related to Scroll tracking:

  1. Scroll Depth Threshold
  2. Scroll Depth Units
  3. Scroll Direction

scroll depth tracking google tag manager

Step-7: Click on the ‘Triggers’ tab:

triggers tab

Step-8: Click on the ‘New’ button to create a new trigger.

Step-9: Name your new trigger as ‘Scroll Depth Trigger’ and move the trigger to the folder named ‘Scroll Tracking’ (by clicking on the folder icon next to the trigger name):

scroll tracking folder

Step-10: Choose ‘Scroll Depth’ as trigger type:

scroll depth trigger type

Your screen should now look like the one below:

scroll depth trigger

Step-11: At this point, you need to decide your scroll tracking setup:

  • Whether you want to measure vertical scroll depth or horizontal scroll depth or both.
  • Whether you want to measure scroll depth in percentage or in pixels.
  • When the scroll depth event should fire.
  • What pages the scroll depth trigger should fire.

You can either decide your own scroll tracking setup or you can use the one I use:

trigger configuration

Here, I am measuring the vertical scroll depth in percentages.

The scroll depth event (gtm.scrollDepth) will fire whenever the vertical scroll depth of a web page crosses:

  1. 10%
  2. 25%
  3. 50%
  4. 75%
  5. 90%

The scroll depth trigger will fire on all pages of a website.

Step-12: Click on the ‘Save’ button to complete the creation of the new trigger.

Step-13: Click on the ‘Tags’ tab:

tags tab

Step-14: Click on the ‘New’ button to create a new tag.

Step-15: Name the new tag ‘Send Scroll Tracking data to GA’ and then move it to the ‘Scroll Tracking’ folder.

Step-16: Set up the new tag with following configuration:

tag configuration1

tag configuration2

tag configuration3

We are going to use this tag to send the scroll tracking data to Google Analytics.

Step-17: Set the firing trigger of the ‘Send Scroll Tracking data to GA’ tag to ‘Scroll Depth Trigger’, we created earlier:

firing trigger

Step-18: Click on the ‘Save’ button to complete the tag set up.

Step-19: Click on the ‘Preview’ button (on the top right-hand side) to preview and test your new scroll tracking setup:

preview button

Step-20: Navigate to a web page on your website where you want to test your new scroll tracking setup. You should see a ‘preview’ window at the bottom of your browser window:

gtm preview window

Step-21: Now gradually scroll down your web page.

As you start scrolling down, you should see new ‘gtm.ScrollDepth’ event(s) being listed….one after the other….under the ‘Summary’ column:

scroll depth event

Step-22: Click on one of the ‘gtm.scrollDepth’ events and then click on the ‘Data Layer’ tab:

datalayer tab

Step-23: Now look at the values of following data layer variables:

  • gtm.scrollThreshold
  • gtm.scrollUnits
  • gtm.scrollDirection

gtm scroll depth

gtm.scrollDepth‘ is the name of the event that activates the Scroll Depth trigger.

gtm.scrollThreshold‘ is the datalayer variable which stores the value of the scroll threshold that was crossed.

So if you scrolled to 50% of the page then the value of this data layer would be ’50’.

Similarly, if you scrolled to 90% of the page then the value of this data layer would be ’90’.

gtm.scrollUnits‘ datalayer variable measure scroll depth in ‘percent’ or ‘pixel’. So the value of this data layer variable could be either ‘percent’ or ‘pixels’

gtm.scrollDirection‘ denotes the type of scrolling action which caused the scrolling threshold to be passed. Its value can be either ‘vertical’ or ‘horizontal’

If you see the values of the data layer variables then it means, scroll tracking is working correctly.

Step-24: Navigate back to your GTM account and then click on the ‘Leave Preview mode’ button:

leave preview mode button

Step-25: Click on the ‘submit’ button (on the top right hand side):

submit button

Step-26: Enter your version name and then click on the ‘Publish’ button.

Step-27: Navigate back to your website and scroll down a couple of web pages.

Step-29: Wait for 10-15 minutes and then navigate to ‘Behavior’ > ‘Events’ > ‘Top Events’ report in your Google Analytics view:

top events report

Step-30: Find and click on ‘Scroll Tracking’ event category:

scroll tracking event category

In this event category you can find all of your scroll tracking data:

scroll tracking data

There are three more methods that you can use to install scroll tracking via Google Tag Manager.

You can read about these methods from this article: Implementing Scroll Tracking via Google Tag Manager

Other articles on specialized tracking in Google Analytics

  1. Google Analytics Ecommerce Tracking Tutorial
  2. Google Tag Manager Event Tracking Tutorial
  3. Google Analytics Event Tracking Tutorial
  4. Google Analytics Store Visits Tracking Tutorial
  5. Offline Conversion Tracking in Google Analytics – Tutorial
  6. Ecommerce Tracking Google Tag Manager (GTM) – Tutorial
  7. Tracking Virtual Pageviews in Google Tag Manager – Tutorial
  8. Google Tag Manager YouTube Video Tracking
  9. How to unlock not provided keywords in Google Analytics?
  10. Google Analytics Virtual Pageviews Tutorial
  11. Google Analytics and YouTube Integration Tutorial
  12. Google Analytics for Facebook Tutorial
  13. Cross Domain Tracking in Google Analytics – Complete Guide
  14. How to use two Google Analytics codes on one page
  15. The one thing that you don’t know about PayPal.com and the referral exclusion list
  16. Google Analytics Calculated Metrics – Tutorial
  17. Creating your own Google Analytics Tag Auditing System
  18. Google Tag Manager Search Tracking without Query Parameter
  19. Tracking Google Analytics Paypal Referral and other payment gateways
  20. How to Track Phone Calls in Google Analytics – Call Tracking Tutorial
  21. How to track leads in Google Analytics via CRM
  22. Postbacks in Google Analytics Explained
  23. Subscription & Recurring Revenue Analytics in Google Analytics
  24. Track the Impact of Google Analytics Cookie Consent on Website Traffic
  25. Tracking Offline Conversions in Google Ads
  26. Implementing Scroll Tracking via Google Tag Manager
  27. Site Search Tracking In Google Analytics Without Query Parameters
  28. Google Tag Manager Youtube Video Tracking via YouTube Video Trigger
  29. How to Correctly Measure Conversion Date & Time in Google Analytics
  30. Google Analytics Social Tracking – Twitter, Facebook, Google Plus and LinkedIn
  31. Cross Domain Tracking in Google Analytics – Complete Guide
  32. Google Analytics Linkedin & Twitter Tracking
  33. Creating Content Group in Google Analytics via tracking code using gtag.js
  34. Google Analytics Site Search Tracking via Query Parameters
  35. Google Analytics Site Search Tracking Tutorial
  36. Creating and Using Site Search Funnel in Google Analytics
  37. Learn to Setup Facebook Pixel Tracking via Google Tag Manager
  38. AMP Google Analytics Tracking – Learn to track AMP pages
  39. Setting up Sales Funnel across websites in Google Analytics
  40. Regex 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 BeyondSECOND EDITION OUT NOW!
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.

About the Author

Himanshu Sharma

  • Founder, OptimizeSmart.com
  • Over 15 years of experience in digital analytics and marketing
  • Author of four best-selling books on digital analytics and conversion optimization
  • Nominated for Digital Analytics Association Awards for Excellence
  • Runs one of the most popular blogs in the world on digital analytics
  • Consultant to countless small and big businesses over the decade
error: Alert: Content is protected !!