Track Outbound Clicks With Google Analytics And jQuery

Sometimes, you may want to know what outbound links a user is clickingon -- say, if you're linking to an affiliate's site and want to be ableto 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 onlinks that lead away from your site. Because these links do not lead toa page on your site containing the UTM JavaScript, you will need to tagthe link itself. This piece of JavaScript assigns a pageview to anyclick on a link - the pageview is attributed to the filename youspecify.

Two problems here: one, it's Javascript in an onclick tag, which isugly and bad; two, you've got to add that to every link you want totrack. 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. Notethat this example assumes you're using the new tracking code; you'llhave 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();