Track outbound clicks with Google Analytics and jQuery
Update: Make sure you check out the new _trackEvent method of the Google Analytics pageTracker method. If your analytics account offers event tracking, this is the right way to do it if you don't want your events to count as pageviews. I've written a new post about tracking outbound clicks using the new method. -- Sometimes, you may want to know what outbound links a user is clicking on -- say, if you're linking to an affiliate's site and want to be able to count the clicks you're sending. Google Analytics offers this bit of code to accomplish this:
Google Analytics provides an easy way to track clicks on links that lead away from your site. Because these links do not lead to a page on your site containing the UTM JavaScript, you will need to tag the link itself. This piece of JavaScript assigns a pageview to any click on a link - the pageview is attributed to the filename you specify.Two problems here: one, it's Javascript in an onclick tag, which is ugly and bad; two, you've got to add that to every link you want to track. No fun. Progressive enhancement says you should use Javascript to add behaviors that will only work with Javascript. I wanted to add this tracking ability to my blog, to see which outbound links people were clicking on. jQuery to the rescue:
$('a').each(function() {
var $a = $(this);
var href = $a.attr('href');
// see if the link is external
if ( (href.match(/^http/)) && (! href.match(document.domain)) ) {
// if so, add the GA tracking code
$a.click(function() {
pageTracker._trackPageview('/outgoing/' + href);
});
}
});$('a').each(function() {
var $a = $(this);
var href = $a.attr('href');
if ( (href.match(/^http/)) && (! href.match(document.domain)) ) {
$a.click(function() {
// get the post title if there is one
// and add it to the string for tracking
var postTitle = $a.parents('div.post').find('h2:first');
href = href.replace('http://',''); // cleanup for nice GA reports
href = (postTitle.length > 0) ? postTitle.text() + '/' + href : href;
pageTracker._trackPageview('/outgoing/' + href);
});
}
});var fileTypes = ['doc','xls','pdf','mp3'];
$('a').each(function() {
var $a = $(this);
var href = $a.attr('href');
var hrefArray = href.split('.');
var extension = hrefArray[href.length - 1];
if ($.inArray(extension,fileTypes) != -1) {
$a.click(function() {
// get the post title if there is one
// and add it to the string for tracking
pageTracker._trackPageview('/documents/' + href);
});
}
});var pageTracker = _gat._getTracker("UA-XXXXXX-X");
pageTracker._initData();
pageTracker._trackPageview();
6 comments
Jan 11, 2008
Neil Watts said...
Hi Rebecca! Great work!
I think this is something similar to what I need?
I am trying to track how my viewers open up my animations to determine whether they use the 'save as' link or click the thumbnail to open up a custom sized browser window to view the movies (and to track total downloads too)?
I 'think' I've managed to install the code to track the direct download link, but I don't have a clue how to track the javascript controlled popup window links?
Any help would greatly appreciated.
A confused animator! :D
Apr 13, 2008
Automatic outbound link analytics with jQuery | Development Feeds said...
[...] it looks like I wasn’t the first to do this. An article by Rebecca Murphey shows how to do something similar, while also adding the referring post title to the tracking code. [...]
Jun 03, 2008
rdmey | Track user clicks on certain links said...
[...] to the server when a link is clicked. It was somewhat inspired by a post I wrote a while ago about tracking outbound links with Google Analytics and jQuery, but is actually even simpler. I've retooled my clicktrack script to work as a generic, 2.5k [...]
