How to Track your Content Performance through Google Analytics

This is how to track your content performance through Google Analytics . If you are a blogger and you do track your site through Google Analytics, you should know how your posts are performing. Whether visitors are reading it or just skimming and if they reached the bottom of your page or not.

This excellent java script code lets you track how your audience are interacting with your blog post. You can set your goal based on this event tracking as not all bounces are without value when its a BLOG.

Credit for this post goes to:
Nick Mihailovski – Developer advocate at Google
Thomas Baekdal – Smart guy and publisher of www.baekdal.com
Avinash Kaushik – If you don’t know Avinash
Joost de Valk – Creator of the Google Analytics for WordPress
Eivind Savio – Blogger and GA consultant

And above all to Justin Cutroni

Just copy paste this code in WordPress in one of the text widget or paste it in the footer of your Blogger blog. It will do. Its magic. This will tell you the the user behavior on your single post visit. It will let you dissect your BOUNCE RATE.

<!– Google Analytics Scroll Tracking Script –>
<script>
jQuery(function($) {
// Debug flag
var debugMode = false;

// 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;

// Set some time variables to calculate reading time
var startTime = new Date();
var beginning = startTime.getTime();
var totalTime = 0;

// Track the aticle load
if (!debugMode) {
_gaq.push([‘_trackEvent’, ‘Reading’, ‘ArticleLoaded’, ”, , true]);
}

// Check the location and track user
function trackLocation() {
bottom = $(window).height() + $(window).scrollTop();
height = $(document).height();

// If user starts to scroll send an event
if (bottom > readerLocation && !scroller) {
currentTime = new Date();
scrollStart = currentTime.getTime();
timeToScroll = Math.round((scrollStart – beginning) / 1000);
if (!debugMode) {
_gaq.push([‘_trackEvent’, ‘Reading’, ‘StartReading’, ”, timeToScroll]);
} else {
alert(‘started reading ‘ + timeToScroll);
}
scroller = true;
}

// If user has hit the bottom of the content send an event
if (bottom >= $(‘#content’).scrollTop() + $(‘#content’).innerHeight() && !endContent) {
currentTime = new Date();
contentScrollEnd = currentTime.getTime();
timeToContentEnd = Math.round((contentScrollEnd – scrollStart) / 1000);
if (!debugMode) {
_gaq.push([‘_trackEvent’, ‘Reading’, ‘ContentBottom’, ”, timeToContentEnd]);
} else {
alert(‘end content section ‘+timeToContentEnd);
}
endContent = true;
}

// If user has hit the bottom of page send an event
if (bottom >= height && !didComplete) {
currentTime = new Date();
end = currentTime.getTime();
totalTime = Math.round((end – scrollStart) / 1000);
if (!debugMode) {
if (totalTime < 60) {
_gaq.push([‘_setCustomVar’, 5, ‘ReaderType’, ‘Scanner’, 2]);
} else {
_gaq.push([‘_setCustomVar’, 5, ‘ReaderType’, ‘Reader’, 2]);
}
_gaq.push([‘_trackEvent’, ‘Reading’, ‘PageBottom’, ”, totalTime]);
} else {
alert(‘bottom of page ‘+totalTime);
}
didComplete = true;
}
}

// Track the scrolling and track location
$(window).scroll(function() {
if (timer) {
clearTimeout(timer);
}

// Use a buffer so we don’t call trackLocation too often.
timer = setTimeout(trackLocation, callBackTime);
});
});
</script>

 

And hey you should be careful about this:

 

// If user has hit the bottom of the content send an event if (bottom >= $(‘#content’).scrollTop() + $(‘#content’).innerHeight() && !endContent) { currentTime = new Date(); contentScrollEnd = currentTime.getTime(); timeToContentEnd = Math.round((contentScrollEnd – scrollStart) / 1000); if (!debugMode) { _gaq.push([‘_trackEvent’, ‘Reading’, ‘ContentBottom’, ”, timeToContentEnd]); } else { alert(‘end content section ‘+timeToContentEnd); } endContent = true; }

It’s really important to note that the above code looks for a div specific to my blog. On my site the div is named content. It might be different on yours. Basically you’re looking for the container that holds the blog post or article. If it is class than replace it with .content and if it is a ID replace it with #content as I have done for my blog.

(Visited 123 times, 1 visits today)

Leave a Reply

Your email address will not be published. Required fields are marked *