Lets track content engagement!

published on

Site statistics
It's no secret that Boagworld is my absolute favourite podcast. Now a while back, more specifically in episode 193 of the Boagworld podcast, Paul interviewed Matt Curry on how to get more out of your site's statistics. The examples are very Google Analytics-specific, but the thinking is quite general. Anyhow, they got me inspired to track my content engagement, so I started researching.

After a while I stumbled upon this great but somewhat dated article from “Run tings proper“. It goes on to explain how you could within Google Analytics track how deep your users scroll. And so track their engagement of your content – it’s a brilliant idea!

The gist of things

The article explains how using jQuery we can simply track how deep the user scrolls in percent by looking at the scroll event of the window document object. The article goes on to say that if a user has scrolled to more than 90% of your site height, they’ve consumed your article. So here’s the code that he suggested in his article:

var IsDuplicateScrollEvent = 0;

$(document).ready(function () {
    SetupGoogleAnalyticsTrackEvents();
});

function SetupGoogleAnalyticsTrackEvents(){
    TrackEventsForMinimumPageScroll();
}

function TrackEventsForMinimumPageScroll(){
    $(window).scroll(function(){
        var scrollPercent = GetScrollPercent();

    });
}

function GetScrollPercent(){
    var bottom = $(window).height() + $(window).scrollTop();
    var height = $(document).height();
    return Math.round(100*bottom/height);
}

function TrackEvent(Category, Action, Label){
    pageTracker._trackEvent(Category, Action, Label);
}

The idea is great, but it’s a some what flawed implementation. Here’s a couple of issues that I’ve found:

Issue 1 – How big’s your footer

If you like me have a fat footer, you will need to adjust the code presented in the article to reflect at which percentage your sites content ends and the footer starts.

Issue 2 – Different amount of comments

So I found a couple of good posts on Content Engagement. Now I wan’t to track to what extent the viewers consume my content. To do so I wan’t to know how long my visitors view my page, how deep they’ve scrolled So sometimes a post gets a couple of comments or no comment at all, but other posts on the other hand get tons of comments and the length of comments can easily span double or ten times the height of the original post. In this case you might wan’t to know wheter or not the user has read the comments or just the post. So if we just track the depth of the users scrolling we cannot across our different posts determine how much they actually see.

Issue 3 – Full site or large portion in view at landing

Now this issue is most prominent on sites that have really short information bits, or sites that have users with high resolution displays. It has a close connection to the fold, in that what you see instantly needs to be taken in to account.

Let’s assume either one of the above scenarios and your visitor immeadiately see 90% or more of the site, thus triggering the code without any active scrolling. That doesn’t mean that the user has read the content at all and since we haven’t experienced any interaction we can track it as a separate event. Yes track it! If we don’t track it, it will be a major flaw in our statistic and so we have to track and analyse it separately, here, time spent on page becomes of huge importance.

Lets do that upon domReady as this:

$(document).ready(function () {
	if(GetScrollPercent() > 100){
		IsDuplicateScrollEvent = 1;
		TrackEvent("Content Engagement", "Full page on load", document.location.href);
	}
	SetupGoogleAnalyticsTrackEvents();
});

Issue 4 – It uses an DOM-object that does not exist

I believe the DOM-object pageTracker existed in an earlier version of the Google Analytics inclusion snippet. It can certainly still be found in the help-documents in and around Google Analytics, however, when you setup a new site the object referenced in the snippet is called _gaq.

So heads up on that!

A half way solution – tracking what you see.

Now since percentages is flawed for a number of reasons we’ll try out another approach. This has to do with detecting which elements that the browser is actually displaying on the screen at this very moment. Into the arena enters InView, a little snippet written by Remy Sharp. Now we can ignore issues 1, 2, 3 and 4 as long as we do the special tracking mentioned in issue 3.

So assuming you have included the inview.js along with the TrackEvent- and GetScrollPercent-functions from RunTingsProper I would use the following code:

var IsDuplicateScrollEvent = 0;
$(document).ready(function() {
    if(GetScrollPercent() > 100){
    	IsDuplicateScrollEvent = 1;
    	TrackEvent("Content Engagement", "Full page on load", document.location.href);
    }
    $('#comments').one('inview', function (event, visible) {
        TrackEvent("Content Engagement", "Scrolled through article.",document.location.href);
    });
    $('#footer').one('inview', function (event, visible) {
        TrackEvent("Content Engagement", "Scrolled through comments.",document.location.href);
    });
});


So what do you think? Could the code be more efficient? Is there a better way to do it? Let me know in the comments!

Loads more to do! Got any ideas? Submit them!

There is loads of stuff you could do, and I have a lot of stuff in my pipeline for August. But I want to highlight a couple of other important parts of content engagement, and that is participation, in-depth viewing of images, time spent on website and erronous clicks. These issues require full blown articles on their own so I hope to write more on this topic soon.

Participation

You have all sorts of participation that needs to be tracked, you have comments, trackbacks or pingbacks but also buzz about your site in different social media like Twitter, De.licio.us  and Facebook.

Tracking time correctly:

All of you bloggers out there should be aware of a ‘bug’ in how Google Analytics works in measuring time spent on a website. It measures the difference of the timestamps from first and second visit. Which means if you get a lot of one visit stops from your users which you probably do if links to certain posts of yours are traveling around in the tweet- and blogo-sphere.

I would probably solve it by letting a javascript function be executed on the document.unload-event that measures the time difference from domReady to document.unload and tracking that to Google Analytics.

Tracking in-depth viewing of images:

If you like me sometimes has images that need to be clicked on to view in full scale you will want to track those click-events to see which image-content is good.

Tracking erronous clicks:

Since you of course already do usability testing with real users you here have a great tool to discover small flaws in your interface. I’m in the future going to start tracking clicks on images that are not links. However, to do this properly I figure that all images need to have an unique ID and hence is quite a project, and an error prone project at that.

So what more signs of users engaging in our content can we track? And how would you do it? Write it up in the comments below!