The Particle Lab

Illustration for How to track traffic exiting your site

How to track traffic exiting your site

By Marc, 20 Jan 2010

Thanks to the great work Google have been putting in, we can now gather an enormous amount of information about our site visitors for free using Google Analytics. One of the metrics that I have always been curious about is the 'Exit Page'. Sadly, all visitors do eventually leave our sites and this metric shows what was the last page they viewed before leaving. Even more sadly, that's as far as we can get with a basic Google Analytics deployment. Wouldn't it be great if we could see where our visitors went after leaving our site?

Well, with a little bit of javascript magic we can.

What you'll need on your site

How do we do it

We're going to be using the Event Tracking functionality of Google Analytics to track whenever someone follows an external link on our site. Firstly we need a way of determining which links are actually external. We could add additional classes to any links you want to track or we can use a little jQuery tickery to determine that automatically.

Haven't used jQuery before? Don't know what on earth the $() function is? Check out the getting started guide, you'll thank me later

$.expr[':'].external = function(obj){
  return !obj.href.match(/^mailto:/)
    && (obj.hostname != document.location.hostname);
jQuery Howto

This adds the :external filter allowing us to use $('a:external') to select external links.

All we need to do now is to use this selector to track events when these links are clicked. The documentation shows that the _trackEvent() method takes four parameters; Category, Action, Label and Value. Of these four, only the Category and Action are mandatory. We'll be using the optional Label parameter to pass the URL of the external site back to Google Analytics.


Taking it further

We're using a Category of 'Outbound', as these events are all related to off-site events, and an Action of 'Link' as we're looking at links. We can expand on this using a little more jQuery to change this Action based on some conditions, for example if the link is within another element, if it has a particular class or if the url contains a string.

  var link = $(this), type = 'Link';

  if ( link.closest('ul.comments').length == 1 ) type = 'Comment';
  if ( link.hasClass('amazon') ) type = 'Affiliate';
  if ( (/pastrami/i).test(link.attr('href') ) type = 'Tasty';


You could also this technique for other similar events, that might not otherwise be tracked by Google Analytics, such as for downloads

// track downloads of Acrobat and ZIP files
$('a:not(:external)').filter(function() {
  return (/\.(pdf|zip)$/i).test($(this).attr('href'));
}).click(function() {
  var href = $(this).attr('href'),
      pos = href.lastIndexOf('.'),
      ext = href.substr(pos+1).toUpperCase();

All done

Once that is all in place and you've had some events tracked by Google Analytics you'll be able to see the events showing up in the reports. Here's a shot of the events shortly after the launch of the Neutron Creations site on the 19th January 2010.

So that's it. Now you can track where your visitors are going when they eventually leave your site. If you have any improvements or other uses for this sound off about them in the comments.

Photo: lansakit
Photo of Marc Roberts, who wrote this blog post

Marc Roberts is Principal & Co-Founder at Neutron Creations, where he rules over all web development and technical direction. His favourite drink is a sweet manhattan and his favourite sandwich is a croque-monsieur. For a plethora of miscellany follow Marc Roberts on twitter.

comments powered by Disqus