Analytics & Digital Marketing Tips
April 10, 2014 Joe Christopher Google Analytics
Sooner or later, you’re going to want to know how deep users scroll on a page.
Wouldn’t it be great if you could track vertical scroll percentage of page and view it easily in Google Analytics? Good news…in this blog post;
Being an analytics geek, I love data (all kinds). I recently purchased a device called Automatic that connects to my car and collects data from my vehicle’s data port. It connects to my phone and a beautiful app shows me data about my driving behavior.
To illustrate the value of scroll tracking, let’s take the Automatic website as an example. Go ahead and open the site so that you can see how long of a page it is.
Welcome back…it sure is a long page, eh? Great design and lots of important information, but it (currently) measures in at 5,887 pixels tall.
If we knew what percentage of the page users saw, what could we learn? Using the example of the Automatic website, here are some examples:
Okay, these are just a few examples of conversion rate optimization questions you could ask. Guessing that you are starting to see the value in tracking this scroll depth data for all your site content types (e.g. home page, category pages, detail pages, blog posts), right?
If you want to ensure this data is actionable, we recommend tracking by quartiles, quintiles, or at the most deciles. Otherwise, if you track too small an increment, you will have a hard time spotting trends in your data. In determining what is best for you, make sure you consider factors such as your site’s volume of traffic, typical page length, and whether or not you have any consistency in logical content sections.
We’ve written a plugin that is very easy to implement (in fact, if you are using a Tag Management Tool, you could get this implemented in a matter of minutes). We do recommend that you place this in its own tag within your tag management solution like GTM (Google Tag Manager).
There are no JavaScript framework requirements (you don’t need jQuery for this) and we’ve tested this across all major browsers.
You are welcome to take and modify the code to fit your needs, but I think you’ll find that what we’ve provided is quite flexible.
Here are the details on what it does (in case you are interested):
First, the plugin code. We host and link to this on BitBucket to keep it current and up-to-date with the latest changes. Please download or pull the repo from our BitBucket.
Next, the code to grab the values (can be executed at any time):
bamPercentPageViewedCallback = bamPercentPageViewed.callback(); if(bamPercentPageViewedCallback !== false) { //send ga data ga('set', 'dimension6', bamPercentPageViewedCallback.documentLocation); ga('set', 'dimension7', bamPercentPageViewedCallback.scrollPercent.toString()); }
Finally, the initialization code (should be called after the above code):
bamPercentPageViewed.init({ percentInterval : '10' //other options.... });
Here’s the list of configuration options in the init (all are optional):
percentInterval: '10', //the increment at which to bucket the percentage value (10, 25, etc) cookieName: '_bamPercentPageViewed', //use if you want to name the cookie something else trackDelay: 1500 //The delay (in ms) before a scroll position is considered stable (reduce scroll bouncers)
The default behavior of this plugin will be to capture the max scroll percentage value on the subsequent pageview. This means that if the user exits on the page in question, we won’t capture data on the percent of page viewed. To combat this, you could hook in the callback call with your external link click tracking function to set a custom dimension with an event when the user clicks on an exit link.
In the report data, we capture the previous page URI so that you can correlate percent viewed (since we send the data on the subsequent pageview). This also gives you a dimension of data that shows the previous page URI of any hit-level dimension.
If you use a technology, such as ajax that doesn’t fire a pageview or execute the script each time, you can simply grab the callback data and determine when you want to send the data.
This plugin works great in Classic and Universal Google Analytics. In fact, it works with pretty much any analytics tool since it is pure JavaScript with a flexible output (yes, you could use this in Adobe SiteCatalyst if you’d like).
Let’s say you decided to use the labels “Previous Page” and “Scroll Percentage” for your custom dimensions. How do you get to the data?
Simple, build a custom report. Build from the screenshot below:
(Note: Keep in mind that we happened to use custom dimension #6 for “Previous Page” and custom dimension #7 for “Scroll Percentage” in our example, but this may vary for your implementation.)
Using the Scroll Depth Custom Report that we just showed you how to create; you will select a page (e.g. www.domain.com/services) and then you will see a detailed scroll percentage breakdown report like this.
(Note: Change your graph type to “Performance” in order to get the bar chart with percentages (highlighted on above screenshot). Check out this post for more on Google Analytics graph presentation types.)
The next thing I wanted to do was create a segment of visits that saw the /about page and also scrolled to at least 50% of that page. This is surprisingly difficult in Google Analytics since hit-level segmentation is not possible (only visit and user level). If this is important, you need to combine the data into a single dimension. In Universal Analytics, you can simply create a custom filter to do this (or you could edit the code).
Here’s the custom filter for this, where the output would be something like ‘http://www.mydomain.com/about:50’.
From here, I could create a segment with a RegEx matching the /about page and that the number is 50 or above. Here’s that RegEx: .*/about:(5|6|7|8|9|10)0$
We hope you use this scroll depth tracking data to make more informed decisions. If you need help understanding the data and taking the next step (or implementing this tracking code), we are available to help.
Do you have ideas for the next plugin we should write for the analytics community? If so, leave a comment below.
Stoke Your Passion for Digital
Subscribe for a monthly digest of analytics tips, digital marketing news, and case studies from experts certified with Google, Adobe, Tableau, Tealium, and more!