Google Analytucs graph
3 March 2008

Google Track outbound links automatically

As many people are aware, you can track outbound links in google analytics manually, but what about some unobtrusive code…

Google analytics help center has a great article on how to manually track outbound links, but it's not obtrusive and puts allot of burden on the developer.

So I thought I would write a little script to do it automatically and unobtrusive. I am using the wonderful library mootools, but it's simple enough that you don't need it, and can be rewritten very easily.

modified

Based on remy's suggestion, doing a test for window.location.host instead of el.href.test(/^http:\/\//)

da code

//no tracker then quit
if(!pageTracker) return;

//suggested by remy
var host = window.location.host;

//go thru each link
$$('a').each(function(el)
{
  //if rel tag is google and track if based on what
  //is inside bracker
  //ex: google[download/thisfile]
  if(el.rel && el.rel.test(/^google/i))
  {
    el.addEvent('click',function()
    {
      var track_id = this.rel.match(/^google\[(.*)\]$/);
      if(track_id)
      {
        //we have a match use array[1] for tracking
        pageTracker._trackPageview(track_id[1]);
      }

    });
  }
  
  //if has http, must be external link, track as 
  //outbound/domainname
  //else if(el.href && el.href.test(/^http:\/\//))
  else if(el.host != host)  
  {
    el.addEvent('click',function()
    {
      var track_id = this.href.match(/^http:\/\/([^/]+)/);
      if(track_id)
      {
        //we have a match use array[1] for tracking
        pageTracker._trackPageview('outgoing/'+track_id[1]);
      }

    });
  }
});

code breakdown

Call when document is ready. Go through all "a" tags. Again I am using mootools to grab all links with $$('a'), but you can use document.getElementsByTagName('a') to grab all the hrefs on a page. If we want tracking, based on REL tag, or external link, AND the google tracker (pageTracker) exist, then add onclick dynamically to the link.

First if checks to see there is a rel tag like rel="google[download/thisfile]" then track link as download/thisfile.

Second if checks to see href starts with http://anything that has a different window.location.host, and with a little regex gets the domain and tracks it as outgoing/DOMAIN. note: that for my site, anything that starts with an "http://" is an external link.

source

google_track_links.js
 

Superb little hack.

For simplification’s sake – you could just match against the anchor’s host property, i.e.:

// cache host


var host = window.location.host;

// …further down the code
if (el.host != host) {
// addEvent
}

2008-03-03
Remy Sharp

thanks remy … that is a great idea !

2008-03-03
Daniel Bulli2

Fantastic, this will save so much time!

2008-03-04
Yunus

Site has been moved

nuff-respec.com is no longer being updated. Please head over to dbulli.com for new content