Noise to Signal

◂ Blog

Introducing Differential Scroll Tracking with GTM

One of the benefits of being a freelance analyst is that I have access to dozens of different client instances of Google Analytics and Google Tag Manager. One common implementation I find is scroll tracking. Whether through a custom plug-in or GTM’s out of box tracking, clients often implement events that look like this:

Event Category: Scroll
Event Action: {% Threshold}

From there, you can then add up the number of scroll events, divide them by the number of visits to the page, compare that number to other pages, and call it a day. You’ve successfully measured engagement across multiple pages.

Or have you?

A couple of things have bothered me about this approach:

  1. Pages have different sizes which means that a 75% scroll event may be very unimpressive on a smaller page and very impressive on a larger page.
  2. Users have different viewport sizes which means that a 75% event can trigger at different points on the page for different users.
  3. Users with larger viewports will, by definition, trigger more scroll events on page load than users with smaller viewports.

I don’t have any silver bullets yet for #1 or #2, but I came up with a fairly elegant solution to #3 that I’m calling Differential Scroll Tracking. The idea is simple, we only track scroll events beyond what the user initially views on page load.

[Differential Scroll Tracking] = [Total Scroll Events] – [Scroll Events Fired on Page Load]

This is accomplished through a simple JavaScript variable in GTM that calculates the percentage of the document that the user can see on page load. We then tell GTM to only fire scroll events for values above that number.

How about some examples. Here we see 3 users load the same responsive page and assume the organization wants to track scroll tracking in increments of 25%.

User A Valid Thresholds: 50%, 75%, 100%

User B Valid Thresholds: 75%, 100%

User C Valid Thresholds: 25%, 50%, 75%, 100%

We removed the possibility of a 25% event from Users A and B but allowed it for C. Additionally, User B will not trigger a 50% scroll event. Differential Scroll Tracking collects data on user engagement, rather than the out-of-box tracking which is often simply a proxy for the size of the user’s device.

Here’s how you can configure this in GTM:

1. Create a new JavaScript variable called “JS – Thresholds Greater than Initial Viewport” and input the following JavaScript:

  var thresholds = "";
  // Calculate the % of document the user views on page load
  var initial_verical_viewport_pct = document.body.clientHeight / document.documentElement.scrollHeight;
  for(i = 25;i<=100;i+=25)
        //Append thresholds only if greater than user's initial %
  	if(i / 100.0 > initial_verical_viewport_pct)
      thresholds = thresholds + i + ",";
  	//remove last comma
  	thresholds = thresholds.replace(/,\s*$/, "");
	return thresholds; //Example output: "50,75,100"

2. Create a new Scroll Depth trigger configured as follows. Note that we use our GTM variable from above in the “Percentages” field.

3. Create your GA scroll tracking tag as normal. Be sure to associate it with your new trigger.

I haven’t tried this in the wild. Let me know if you do as I’d love to hear any comments or feedback.


Adam Ribaudo

Adam Ribaudo is the owner and founder of Noise to Signal LLC. He works with clients to ensure that their marketing technologies work together to provide measurable outcomes.


01. Judge

Hi Adam, a few thoughts.
1. I just totally engaged with this page. Went up and down, re-read some parts to really understand. Great article. Did you measure all my engagement? (Well, I commented too so maybe that wipes out the other metrics)
2. Is it possible to know when a tab is in or out of focus? Seems like this is how you’d cover #1 and #2 right? If a high scroll percentage is equal to only a few pixels, then how long did that user spend on the page *while it was an active tab*? Seems to me like this metric could be aggregated with your differential scroll depth for an overall engagement value for the page. But there’s a lot of unknowns in that statement.

Hope all is well.

02. Adam

Yea, there are ways to check whether a tab is active or not. Sounds like you’re suggesting mixing ‘scroll depth’ with ‘time active’ as a single unit of measure which is reasonable, but opens up a lot of other questions like: Is more time spent on this page a better or worse outcome?

Leave a Reply

Home   Blog   Portfolio   Contact  

Bringing clarity to marketers in a noisy world © 2023