Sooner or later, you’re going to want to know how deep users scroll on a page. Whether this is for your blog, for your FAQs page, your pricing page or your product tour, you need to know to what extent do visitors search on your website and how much of your content is actually being read. Enter scroll tracking.
Based on this new information, you can decide to make optimizations on your content, make changes on how the pages are structured and see what’s working with your content and what’s not.
You can also respond to business and marketing questions and increase your conversions.
The answer to those questions, and a few others as well, is one: Google Scroll Tracking.
To start with, there are some tools or plugins that surely can do this work. Nevertheless, most of the times it is not very convenient to monitor the heatmap using a third-party tool. Other times, the client doesn’t understand its use or hasn’t already installed it; you want to make decisions based on this data.
Wouldn’t it be great if you could track vertical scroll percentage of the page and view it in Google Analytics with two clicks? Indeed, when you have the data in one place, within Google Analytics, your work becomes e-z. It is so much easier to create segments and see how scroll impacts conversion, engagement, and other on-site behaviors!
First things first! Let’s clear some common misunderstandings before we move on.
Why do you need scroll tracking? Why is Google Analytics not enough?
Let’s examine the scenario when someone raises this question “Do you know if your website visitors read your blog?”.
What could someone do with Google Analytics alone?
They would login on Google Analytics and:
Not really.
The bounce rate is an engagement rate of the website but not of the blog post or a specific page. In addition, the average session duration is not a metric that can give you the correct information 100% regarding the engagement of a blog post, as it only includes data from the non-bounced sessions.
This is not what I’d call clear information I could rely on. We should be able to respond with certainty and take decisions based on data.
This is where scroll tracking comes in.
Ready? Let’s do this!
Login to your Google Tag Manager account.
If this is your first encounter with Tag Manager, here’s a Google Tag Manager guide to help you with the setup.
Make a new Tag.
Before you do anything else, make sure to state your Google Analytics ID as a Custom Variable. To make sure that this is done correctly, here is how to do it:
From the menu on the left, select variables >> user-defined variables >> NEW >> Google Analytics settings and fill in with your Google Analytics ID. Then, click Save.
Then, select tag type >> universal analytics from the left menu.
Choose the event as “track type,” and label the event however you like.
Remember, this label will also appear in Google Analytics.
As action select the scroll depth, so it will dynamically use what we have set as a percentage of the page. As the label, we put the page URL so that we can see the percentage of scrolling on specific pages.
Important tip: Do not forget to select true as “non-interaction hit.” This way, you will not affect the bounce rate with the scrolling event.
Next, select the trigger from the list. What you are looking for is the “Scroll Depth” trigger from the user engagement category.
Then, select the percentages that you wish to monitor (for example 25% of the page, 50% percent of the page and 80% of the page) and the page you want this event to be triggered on.
Once you click Save, you will see your new tag on your tag list. Submit it, and you are all set!
For this option, we have created a script that triggers events when a visitor reaches the percentages 25%, 50%, 75%, and 90%.
Of course, you can change these percentages or add any number you like. You should always do what makes more senses to your website’s needs!
Here is the code script: https://pastebin.com/8wjY9eHa
As for the code:
if (percent == 25): this is the percentage that will trigger the event. This is at your discretion, and you can put the percentage that you want.
{{Page URL}}: It dynamically reads the URL of the page on which the events are triggered. So then you will be able to see on specific pages, how many times the users reached up to 100%.
{ ‘nonInteraction’: 1 }: We use “nonIteraction” as to make sure that when triggering this event, it will not affect other metrics, such as bounce rate or avg. Session duration.
Select Top Events >> Scrolling from the left menu. Next, select Page as a secondary dimension, and put in the Advanced filter field the URL of the page that we are interested in.
What we are looking in are the columns with Unique events, not total events. Total events metric refers to the total of times triggering these events, while unique events in unique visits triggered by events.
It wasn’t so hard, was it?
I hope you either of these techniques and use scroll tracking in your advantage. Thanks to scroll tracking you can be in a place to make better decisions. Use that data to improve and understand your:
That’s all for today!
Sotiris is a data oriented Engineer. He uses his skills in Analytics, SEO and PPC to plan and build Growth processes. His ability to extract insights from data, combined with his knowledge in frameworks such as AngularJS, acts as a catalyst to execute fast and precisely.
A list with some of the best performance marketing agencies that are experts in PPC,…
Page load speed, a compelling headline, social proof, and a clear call to action. All…
AI knowledge or prompt engineering alone does not equip teams to lead in the AI…
Democratizing Innovation is the potential ability of users to develop what they need themselves. AI…
B2B vs B2C Marketing: are they that different? In some ways, yes. From price sensitivity…
Are you looking to work with one of the top B2B marketing agencies? Here's a…
View Comments
For the implementation without using Google Tag Manager, we have to just add this code on our page?
Yes. The script that exists in https://pastebin.com/8wjY9eHa is a script you can put on your page together with all other scripts.
"Unknown variable “Scroll Depth Threshold” found in a tag. Edit the tag and remove the reference to the unknown variable."
Hey Adam, I think you have to enable the built-in scrolling data layer variables first. I followed these instructions and the variable seems to work for me. https://www.getelevar.com/how-to/implement-new-scroll-depth-tracking-gtm/
Great tutorial Sotiris, thanks!
I did not like the original JavaScript code for Google Analytics scroll event submission, because it has fired multiple 25, 50, 75 and 90% events if you scrolled up and down. I have modified the script to fire each event only once on the page. You can find the code here:
https://pastebin.com/XDRRAPGG
The pastebin example is **extremely** poorly written. Aside from double-firing events (as Primoz mentioned), it also uses direct equality, meaning if I scroll from 49->51% then the 50% bucket will be missed entirely. The data it produces is the definition of "garbage in, garbage out" in data science.