blog.rebeccamurphey.com Adventures in front-end consulting

Track outbound clicks with Google Analytics and jQuery

By Rebecca | January 6, 2008

categories: analytics, howto, 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:

 
<a href="http://www.example.com"
onClick="javascript: pageTracker._trackPageview('/outgoing/example.com');">
 

and says:

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);
    });
  }
 
});
 

In my case, I wanted to track the post title (if there was one), in addition to the outgoing link's href. So:

 
$('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);
    });
  }
 
});
 

You can use the same method to unobtrusively add tracking code to file downloads:

 
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);
    });
  }
 
});
 

See Google's help page for more information. Note that this example assumes you're using the new tracking code; you'll have to adjust accordingly if you're using the old tracking code. If you're using the new tracking code, it will look like this:

 
var pageTracker = _gat._getTracker("UA-XXXXXX-X");
pageTracker._initData();
pageTracker._trackPageview();
 

Tags: google analytics, progressive enhancement, seo | 6 Comments »