Keeping up with Google: How to Track External Links with the New Analytics Script

Feb 4

In this post, I will introduce you to the latest analytics code from Google, show you how you can update your inline external link tracking to work with it, and then demonstrate how to use a javascript framework to do all the heavy lifting for you.

Back in December of 2009, Google released a fantastic update to it’s analytics (urchin?) app which they called asynchronous tracking. Without getting technical, the big advantage of this update is that it loads the necessary files faster. In addition, you can now safely move you analytics code into the head of your HTML. This matters because you can get a better idea of who is coming to your site and “bouncing” away before the entire page loads. When the script is in the footer, a visitor can leave before the page fully loads and Google never tracks the visit.

Here’s the new asynchronous script from Google:


var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-XXXXX-X']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ga);
  })();

How to update your external or outgoing link tracking

I don’t claim to be much of a developer (you’ve been warned!) so my big dilemma was figuring out how to get outgoing link tracking working with the new google analytics code. You can find the official usage guide here, but it wasn’t clear enough to me, so I went searching for a better explanation. I found a nice write-up well worth reading on using the async script and jquery to track click events here, which I’ll come back to, but what I initially wanted to know was how to track outgoing links inline with an “onclick” event.

The old method was to use the “_pagetracker” variable and looked like this (if you were linking to my site for example *wink* *wink*):


<a onclick="pageTracker._trackPageview('/outgoing/painteddigital.com');"  href="http://painteddigital.com" target="_blank">

But the new method uses the “_gaq” system to manage things and throws in some brackets to confuse you, but you can format it like this:


<a onclick="_gaq.push(['_trackPageview', '/outgoing/painteddigital.com']);" href="http://painteddigital.com" target="_blank">

That’s all there is to it! …unless you want to make things easy for yourself and automate this so you don’t have to enter it into each link. With Jquery, this is is pretty simple. I have a client who needed to track on Joomla which is stuck on Mootools 1.11 so I’ll post that code here as well.

How to automatically track outbound links with JQuery

I recommend that you also use the new Google CDN Ajax library to load your JQuery for you, so I initialize with that (If you have any questions, just ask in the comments). You could also switch out target*=”_blank” for rel*=”external” if you use that tag.


google.setOnLoadCallback(function() {
	$('a[target*="_blank"]').click(function () {
		_gaq.push(['_trackPageview','/outgoing/'+$(this).attr('href')]);
	});
});

How to automatically track all external links with Mootools 1.11

The try/catch isn’t necessary, but it’s a nice catchall


window.addEvent('domready', function() {
	$$('a[target*="_blank"]').addEvent('click', function(){
		try {
			if(_gaq) {
				_gaq.push(['_trackPageview', '/outgoing/'+ this.getProperty('href');]);
			}
		}
		catch (err) {}
	});
});

If you find that something I’ve posted is not working out for you, let me know and I will try and help in the comments as best I can.

About Matt

I'm the founder and proud owner of Painted Digital. I love to draw, design, and make new things. You can follow me on twitter @painteddigital. Say hi! I'd love to hear from you.

Liked this post? You can subscribe to the RSS feed, get updates emailed to you, or check out some similar posts.