rdmey Track outbound clicks with Google Analytics and jQuery

Track outbound clicks with Google Analytics and jQuery

By Rebecca | January 6, 2008

categories: analytics, howto, jquery

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 |