Measuring How Far Someone Scrolls Down Your Website
This is a 2017 updated version on how to implement Scroll Depth for your website using the new versions of Google Analytics (Universal Analytics) and Google Tag Manager.
When measuring success of a digital marketing campaign, most people look to site goals (completed actions they want the user to do). That can be someone signing up, buying something or completing some kind of action on your site.
But what if you want to measure the “stickiness” of your content? For that, people generally look into Average Session Duration (how long a user stays on your site) and Bounce Rate (how many users leave your site, without browsing to another page). While those are good indicators of how “sticky” your content is, it leaves out a crucial piece (especially for one pager sites). That piece is how far a user scrolls on a certain page.
Surprisingly, Google Analytics (the most popular website tracking software in the world), does not have a built in option to measure Scroll Depth (how far a user scrolls down a page). That’s what this guide is for.
In order to follow along in this guide, you’ll need to:
- Have Google Analytics installed on your site
- Have GTM (Google Tag Manager) tag installed on your site
To start implementing Scroll Depth, we need to use the jQuery code snippet created by Robert Flaherty. In the guise of not reinventing the wheel, I’ll just show you how to implement it.
It requires the implementation of 2 tags: A Custom HTML Tag (does the heavy lifting of measuring Scroll Depth), and a Universal Analytics Tag (to send that data into Google Analytics) both within GTM (Google Tag Manager).
Step One: Custom HTML Tag
1) The first thing you need to do is create a new tag (i’m calling mine Scroll Depth). To do this, inside of GTM go to the Tag tab and click New.
2) Next, click on Tag Configuration and choose Custom HTML Tag as the Tag Type.
Then, paste the code from the following link into the HTML section (taken from Andy Gibson) :
https://www.dropbox.com/s/mi1bdoifp19x2tw/scrolldepth.js
You can leave Support document.write un-ticked.
On the bottom of the same screen, go down to the Triggering section.
This is where you can choose where you want to capture Scroll Depth. For this guide, I’ll select All Pages.
Once you’re done, click Save and continue.
3) The next thing you need to do is a Add a Firing Rule, choosing {{event}} equals gtm.dom
4) You should end up with the following:
Save and carry on!
Step Two: Universal Analytics Tag
For the next part of the implementation of Scroll Depth, you’ll need to create another Universal Analytics Tag. The purpose of this tag is to pass the scroll depth data you’re collecting from GTM into Google Analytics. Note, that this does not conflict with the normal Universal Analytics tracking code that you’re using for your site.
1) The first thing you need to do is create 4 variables (eventCategory, eventAction, eventLabel and eventValue). Why? It’s basically needed to hold whatever values we’re pulling in from the previous step, that then gets passed as an “event”.
The way to define these variables is within Google Tag Manager go to Variables and create NEW and choose Data Layer Variable.
Next, just enter the variable name you’re creating like below for eventCategory
Once you’re done, create new variable for eventAction, eventLabel and eventValue as well.
Once you’re done, you’ll see the variables defined as below:
2) Next we need to create a Universal Analytics Tag (name it whatever you want. I’m calling mine “Universal Analytics Scroll Depth).
The most important step is to insert your Universal Analytics Tracking ID that looks like UA-xxxxxx-xx.
3) Choose the Track Type as Event, and insert the following:
4) The final step is under Triggering we need to add a new Custom Event trigger and name it ScrollDistance
5) Click Save after you make sure your final settings look like the following:
All done! Just Publish your Container!
To verify if it’s working, you can use the built in Preview and Debug tool within Google Tag Manager and you should see 2 tags firings
You should also see events being populated in your Universal Analytics under REAL-TIME -> Events
To see a more detailed look, you can go to BEHAVIOR -> Events
Pretty neat huh! :)
