An In-Depth Look At Tracking Content Engagement

So last week I wrote a guest blog for inform.ly about some of my favorite Google Analytics hacks and tricks, and then realized it was missing something. I realized that it was going to be huge, and so I cut out most of the actual code in order to give a more high-level overview of the kinds of awesome things you could do with GA if you spent a couple of minutes going over the documentation. Well, now that the high-level thinking stuff is out there, the only thing left to do is zoom way in and look at the actual code and get really granular with this shit.

That’s what this post is about. We’re going to dive headfirst into the swimming pool of developing tracking protocols and implementing GA wizardry on your site. If you have no idea what JavaScript is or how HTML works…Don’t Worry! I’m going to try to take this nice and slow, explain everything, and make it practical enough that even coding n00bs can follow along and get up and running with these scripts in no time. Best of all, you might even learn something.

Edit: It has been brought to my attention that Justin Cutroni did something similar last year. To which I say “Neener neener, I figured it out on my own without the help of the GA development team!”

Tracking Content Engagement

I’m not going to go into the “why” here, since I’ve already covered that in the inform.ly article. I will, however, say that the main reason you’re going to want this code is for tracking one-page visitors. These are the folks who come in through an external link, and then bounce. Since “Time on Page” is calculated based on the time-stamp from the NEXT page visited,and these visitors don’t HAVE a next page visited, you will have no actionable information about them. All you will see is a high bounce rate. Which is fine and dandy, except that it tells you NOTHING. So, here’s what you do:

 Step 1: Where’s Our Content?

The first thing you need to do is figure out where the user is on your page. There are a couple of ways to do that. Cutrioni suggests looking for the top and bottom of the <div> tag that the content is in, and that’s not a bad way, but that doesn’t help us if the user starts reading the content, then decides half-way through that your writing sucks and they want nothing more to do with it.

Instead, we’re going to break up our articles into four parts. First, find the name of the <div> that your actual article lives in. Usually, it’s going to be in something like “content” or “article”. We’re going to use our last article, How To Create an Editorial Calendar, as an example.

So, pulling up our wonderful debugging panel, we see that in this case, what we’re looking for is <div class=”post_content”>

Remember when I told you we were going to divide up our content into four pieces? To do that, you’re going to need to declare a couple of variables:


//The first three variables are shorthand, and give us
//a quick way to reference the content, the height of the
//content, and the top of the content

var A = $(".post_content"); var H = A.height(); var T = A.offset.top();

//Then we declare the 25%, 50%, 75%, and 100% markers

var a25 = T + (H * .25);
var a50 = T + (H * .5);
var a75 = T + (H * .75);
var a100 = T + H;

Step 2: Where’s the Visitor?

Got it? Good. That tells you what section of the page you need to be tracking. The next step is finding out where the user is currently looking. To do this, we’re going to find out where the top of the scroll bar is and add it to the size of the user’s monitor to figure out where the bottom of their screen happens to be.

To do this, we’re going to use jQuery’s excellent .scrollTop() method. The code will look something like:

//You'll notice I use a lot of shorthand (one-letter variable names, etc.). If
//you feel comfortable with JavaScript, shorthand helps keep the size of your
//pages smaller, and thus helps load times. If you AREN'T comfortable with
//JavaScript, write out the names to be descriptive and easy to remember (e.g. "windowBottom" instead of "B"

var B = $(window).scrollTop() + $(window).height();

So now, at any given moment, you know where the user is looking. Ta Da! JavaScript is fun!

Step 3: Bringing It All Together

So, now we have two individual components that are just floating in the JavaScript void with no context. It’s time to bring everything together and give it life! To do that, we’re going to load our script as soon as our HTML document (page) is ready, using the standard jQuery ready function. If you have never worked with jQuery before, this is important to learn and memorize, as you’ll be loading almost all of your fancy scripts through something like this:

$(function() {
//first, declare all the variables we'll be using
var A = $(".post_content"); var H = A.height(); var T = A.offset.top(); var B = 0;

    //Then we declare the 25%, 50%, 75%, and 100% markers
    var a25 = T + (H * .25);
    var a50 = T + (H * .5);
    var a75 = T + (H * .75);
    var a100 = T + H;

    //Now, let's bind a trigger to the scroll event. Every time our
//visitor scrolls, we want to update their window position

$(window).scroll(function() {
B = $(window).scrollTop() + $(window).height();

//And then we check if the bottom of the window is now
//below one of our markers and fire a GA event if it is
switch(true) {
case (B > a100): _gaq.push([‘_trackEvent’, ‘content’, ‘scroll100’]); break;
case (B > a75): _gaq.push([‘_trackEvent’, ‘content’, ‘scroll75’]); break;
case (B > a50): _gaq.push([‘_trackEvent’, ‘content’, ‘scroll50’]); break;;
case (B > a25): _gaq.push([‘_trackEvent’, ‘content’, ‘scroll25’]); break;;
case default: break;
}
});
});

And there you have it! Don’t worry if you don’t understand exactly what’s going on. You can look up the various things we did on your own time. Just know that what this will do is create four events in your Google Analytics setup: one for reading a page all the way to the end, one for reading 75% of the content, one for 50% of the content, and one for 25%.

There are a couple of things to keep in mind:

1. This will change your bounce rate. That’s sort of the point – if someone is scrolling through your page, you want to reflect that in the bounce rate.
2. Everyone who gets to a certain level will have fired off all the events above that level. So someone who reads an article all the way through has also read 25, 50, and 75% of the article. What you’re going to be looking for is variations from the lowest to the highest level (that is, the difference between how many people read 25% of the article and how many people read 100%.
3. You can get much fancier than this. Cutrioni’s blog (see link above) certainly did with timers and custom variables and what have you. We’ll get there, but for most people that isn’t terribly necessary. Most websites will have no real way to use that information. Instead, for now, focus on the big picture: is your bounce rate high because people hate your website, or because they only read one article at a time and come back later?

If you have any thoughts, questions, ideas, or sass, please let me know in the comments and I’ll try to answer them!