Advanced Content Tracking with Universal Analytics

A while ago I wrote Advanced Content Tracking – a post about how to measure if users are actually reading your content. I’ve been getting a lot of requests to update this code for Universal Analytics.

So here it is – an updated script specifically for use with Universal Analytics.

This Google Analytics customization collects data as users scroll down a page. It uses events to track when a post loads, when the user scrolls more than 150 pixels, when the user reaches the bottom of the content and when the user reaches the bottom of the page.

This technique uses Google Analytics events to track a user as they scroll down a page of content.

The end result is some cool data about how many users actually read content. Here’s a sample of what the data looks like. This is just an basic event report with the Event Action and Event Label.

You can access the Reading data in your Event reports. Here we see a single article and how often users scrolled, read the whole article and got to the bottom of the page.

The Scroll Tracking Code

Here is the JavaScript code that measures user scrolling.

TIP – You can use the tabs at the top of the code window to try the script. Just click on Result.

What’s changed in this version?

First, the blog post title is now collected as part of the event. Specifically I’m pulling the page title from the HTML and putting it into the event label. This makes it easier to drill down and see which pages people are reading. This was possible before using the Page Title dimension, but using the event label makes it just a bit easier. See the image above.

Another thing I change is I now use a Custom Dimension rather than a Custom Variable, to collect the ‘reader type’. Custom variables do not exist in Universal Analytics.

This change will impact your data! You will no longer see data in the Custom Variables report – because you’re not using Custom Variables. Custom Dimensions are only available in Custom Reports and Custom Dashboards.

I also changed how the Custom Dimensions are set. This script will set a Custom Dimension when the user reaches the bottom of the post content – not the bottom of the page. When they reach the bottom of the content they are categorized as a scanner or a reader.

• A scanner is someone that simple scrolls to the bottom of the content in less than 60 seconds.
• A reader is someone that take more than 60 seconds to reach the bottom of the content.

This is hardly a scientific way to categorize users, but it works for me :)

Finally, I added three custom metrics to store the time metrics: time to scroll, time to content bottom and time to page bottom.

Remember, in order to configure Custom Dimensions and Custom Metric you must first add them via your Google Analytics admin settings.

Other than the above changes the functionality is still the same.

Implementing the code

Step 1: There are a few code changes that you must make in order for this code to work on YOUR site.

1. Turn off debugging: This flag will display alert messages, rather than send GA data, when the user scrolls, reaches the bottom of the content and reaches the bottom of the page. If you do not set this to FALSE your users will get all sorts of alert messages :)

2. Decide how far you want for scroll depth: I send an event after the user scrolls 150 px. You can change this value, but I believe it works fine and does capture user engagement.

3. Specify where the bottom of your content is: This is the most important setting. This script sends an event when the user gets to the bottom of a post. That’s determined by the HTML. For me, the HTML is identified as .entry-content, as shown in this code.

[code lang=”js”]
if (bottom >= $(‘.entry-content’).scrollTop() + $(‘.entry-content’).innerHeight() && !endContent) {
[/code]

You must change this line of code to identify a piece of HTML on your site that signifies the end of the content. This is the hardest part of the implementation.

Step 2: Add the code before the closing [code][/code] on your site. Make sure it appears AFTER the Universal Analytics page tag. It should look something like this when complete:

[code lang=”js”]
<head>

… all sorts of tags …

<script>
//
// Universal Analytics page tag
//
(function(i,s,o,g,r,a,m){i[‘GoogleAnalyticsObject’]=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,’script’,’//www.google-analytics.com/analytics.js’,’ga’);

ga(‘create’, ‘UA-XXXXXX-YY’);
ga(‘send’, ‘pageview’);

//
// Scroll tracking script
//
jQuery(function($) {
// Debug flag
var debugMode = true;

// Default time delay before checking location
var callBackTime = 100;

// # px before tracking a reader
var readerLocation = 150;

// Set some flags for tracking & execution
var timer = 0;
var scroller = false;
var endContent = false;
var didComplete = false;

… More code here …

</script>
[/code]

That should be it. You should see data instantly in the Real Time Event reports.

I encourage you to read the instructions in my original post.

Finally, a lot of people have asked me about implementing this script with Google Tag Manager. This really warms my heart :) I love tag management!

You can use this script with Google Tag Manager – but it takes a bit of work. I’ll write a separate post on that topic.

That’s it. I hope you find this script useful. Feel free to modify it to fit your needs. I’ve really enjoyed the data that it generates – it’s helped me better understand my readers and content.