How to Set Up Scroll Tracking via GTM

Overview

To acquire more information about your visitors’ behavior, implement scroll tracking. Scroll tracking is one way to measure the percentage of scroll, how far a user is scrolling or how much of your posts/articles have been read and consumed by the visitor.

With the help of Scroll Tracking you will collect valuable information about the percentages of page consumption (25%, 50%, 75%, and 100%) as readers scroll down the page. The Scroll Tracking Report records powerful events that took place within your web page.

In this post, we will be providing you a step-by-step guide on how to implement scroll tracking for your website using Google Tag Manager. You will soon find implementing scroll tracking is straightforward, easy and worthwhile.

Step1: You need to have Scroll Depth  jQuery installed on your website. Below is the jQuery link.

1)   https://github.com/robflaherty/jquery-scrolldepth/blob/master/jquery.scrolldepth.js

Step2:

2.1 Login to Google Tag Manager

  1.    Now login to your Google Tag Manager account; from left navigation Click Tag and create a new ‘Custom HTML’ tag.
  2.   Give a descriptive name to the tag, for example Scroll Tracking Script
  3.    Copy & paste the script code above in the HTML container
  4.   Choose a trigger ‘All Pages’
  5.   Save the tag

2.2 Set up a firing rule i.e. create triggers for the above custom html tag to fire

  1.    Click on Trigger from left navigation
  2.   Click New, give a name to trigger, for example ‘Scroll Distance’
  3.    Choose Trigger Type as Custom Event
  4.   Event Name: Scroll Distance
  5.   Fire on Some Custom Events
  6. Choose Event contains Scroll Distance
  7.    Savehow-to-set-up-scroll-tracking-via-gtm-1

2.3: Set up Variables. You need to create 3 data layer variables for your scroll tracking.

Variable1: Event Category

  1.    Click on Variables from left navigation
  2.   Click New, choose variable type: Data Layer Variable
  3.    Give a name: eventCategory
  4.   Version 2
  5.   Savehow-to-set-up-scroll-tracking-via-gtm-2

Variable2: Event Action

  1.    Click on Variables from left navigation
  2.   Click New, choose variable type: Data Layer Variable
  3.    Give a name: eventAction
  4.   Version 2
  5.   Save

Variable3: Event Label

  1.    Click on Variables from left navigation
  2.   Click New, choose variable type: Data Layer Variable
  3.    Give a name: eventLabel
  4.   Version 2
  5.   Save

Finally you are done with the variable setup.

2.4 Create a new Universal Analytics tag for scroll depth tracking

  1.    Click Tag, then ‘New’; choose tag type: Universal Analytics
  2.   Give a descriptive name to the tag, for example Scroll Tracking UA
  3.    Input Tracking ID: UA-XXXXXXX
  4.   Track Type: Event
  5.   Add the variables you created in the above steps: Category, Action and Label
  6.   Now choose the trigger ‘Scroll Distance’ you created in the earlier step
  7.    Savehow-to-set-up-scroll-tracking-via-gtm-3

Now you are almost done.

Preview and debug your tags:

Ensure your scrolling setup is working as expected before publishing the tags. Open your website in a new tab. Debug your scroll tracking tags. When you are done, create a new container version and then publish the new container.

Final Thoughts:

Google Tag Manager is handicapped by offering too much simplicity. But it does help by minimizing the effort necessary to implement scroll depth tracking. Now, you can access real-time scroll data in your Google Analytics by clicking Real Time > Events on left navigation.

And after few hours you will see the data in the event report by navigating to Behavior > Events.

If you like my articles,