Thursday, 19 December 2019 23:00

Scroll Tracking with Google Tag Manager | GTM Scroll Tracking

Written by
Rate this item
(3 votes)

Scroll tracking as a useful gauge of your audience and their interest in website content.  GTM scroll tracking is supported with built in triggers and variables.  

So it is time to update an old blog article - the twist we will add is custom dimension to track users who scroll through your page quickly (Scanners) who take time to fully read your content (Readers).  How do we tell a scanner from a reader - we pick an approximate time to read - 30 seconds, 60 seconds... and use that in our implementation.  This idea is all based off of Justin Cutroni's great article - Advanced Content Tracking with Universal Analytics.

scroll reader scanner

Scroll Triggers

GTM scroll tracking trigger

The built in Scroll Depth trigger allows us to track scrolling by percent or by pixel.  (Similar to the YouTube video tracking trigger.)  In this example we have set the value of 25, 50, 75 and 100% for the depth our trigger will fire.

We also can set when we want to enable this trigger - in this case we have selected the built in Window Load event (gtm.load).  And you could fire this on every page - but in this case we are primarily interested in the blog articles so we have set to some pages.  Since our blog articles all start with '/blog' we are all set.

Scroll and Timer Variables

First we will configure the built in scroll variables.  The three below are:

  • Scroll Depth Threshold - this holds the numeric value of the users scrolling - so it could be percent or pixels depending on the Scroll Depth trigger settings.
  • Scroll Depth Units - can have a value of Percent or Pixel to indicates the Scroll Depth Threshold measurement units.
  • Scroll Direction - allows for either vertical scroll depths or horizontal scroll depths.  Imagine a horizontal slide show...

 GTM scroll tracking variables

We also want to track who is reading or scanning our articles.  However, there is not a built in scroll tracking timer wo we need to create one using basic JavaScript and create in a HTML Tag:

GTM scroll tracking timer

We fire this tag on the pageview event - but if you wanted to get fancy it could be setup to start on the Scroll Threshold Depth = 0.

<script>
var timerValue = 0;
// Create a timer that updates every second
intervalId = setInterval(function(){
  timerValue += 1;
}, 1000);
</script>

And then to access the timer value variable in our tags we create a JavaScript variable:

GTM scroll tracking timer variable

(You may want to rename this variable in the JavaScript and here to avoid it conflicting with any other variable names...  the problem with Global Variables!!!)

And then a Custom Javascript variable to calculate the User Reader Type Custom Dimenension:

GTM scroll reader type variable

The logic is when the user has scrolled to the end of the article - did they scroll quickly defined as less than 60 seconds or take longer than 60 seconds.  We'll define the first user a Scanner and then second type of user a Reader.  And then we will include this in our GA Settings variable to send this custom dimension back with our scroll event.

Here is the code:

<script>
function() {
 if ({{Scroll Depth Threshold}} === 100) {
   if ({{JS - Timer Value}} >= 60) {
     return 'Reader';
     }
   else {
     return 'Scanner';
   }
 }
}
</script>

If you change the {{Scroll Depth Threshold}} to a different value - say '90' don't forget to update this check here.

 

Include this new 'JS - Reader Type' in the correct custom dimension. You can see that below in our Custom Dimension #1 - but your implementation may vary.

GTM scroll ga settings variable

GTM Scroll 

Everything is now in place for our Google Analytics Event tag.

GTM scroll ga event tag

  • Tag Type is a Universal Analytics
  • Track Type - Event
  • Category - Scroll Tracking, but you can set this to whatever makes sense for your reporting
  • Action - Page URL here but sometimes Scroll Depth Threshold makes sense, again this depends on your reporting.
  • Label - Scroll Depth Threshhold sometime people also like to include the Scroll Unit of percent or pixel
  • Non-Interaction Hit - the variable here is set to false - we are defining this as an Interaction.  Keep in mind that interaction will change your bounce rate - so a user that comes to a page and scrolls to the first threshold will not be a bounce.
  • Google Analytics Settings - we use our GA Settings Variable which includes the Reader Type variable for our custom dimension.

 

 

Read 120268 times Last modified on Friday, 25 February 2022 15:32
Jay Murphy

Jay Murphy is a digital analytics expert and founder of Trionia, where he specializes in transforming data into actionable insights for large and mid-sized businesses. With over thirty years of experience and a passion for Google Analytics since its inception, Jay has honed his skills to bridge the gap between technical data analysis and strategic business planning. An educator at heart, he has developed and taught comprehensive digital marketing courses at both the undergraduate level and within organizations, enriching minds with his deep understanding of the digital analytics landscape.

His career, which began in systems analysis for spacecraft guidance, has evolved through roles that blend technical acumen with strategic vision across various sectors, including Fortune 500, Higher Education and Non-Profits. Certified in Google Analytics since 2011, Jay's leadership at Trionia has spearheaded successful online campaigns and innovative marketing strategies, underlining his commitment to leveraging data for growth. Jay's approach goes beyond the numbers; he's a storyteller who uses data to drive business success, making him a pivotal figure in the digital marketing world.

Leave a comment

Make sure you enter all the required information, indicated by an asterisk (*). HTML code is not allowed.