How to Count Your Outbound Click Stats with Onclick in Google Analytics

Updated May 2010

This is an old post referencing a version of this blog that no longer exists. No matter though – thanks to a number of requests I’ve added the actual code snippet (copy / paste) for outbound click tracking and added a section on using event tracking too. Scroll down to the bottom to get the code snippets or read on!

Counting Your Outbound Clicks with Onclick in GA

This evening I’ve set up my side bar “Find me on” links to track outbound clicks using a javascript onclick event. I’ve set this up mainly out of a curiousity to find out how much of my traffic exits via my WordPress sidebar, and of course an interest in how this type of outbound link tracking works!

My post builds on a great article (and plugin) from Joost De Valk. His article, Checking your outbound click stats is a fantastic run through of how to use the Google Analytics “content drilldown” report to work out where you’re sending traffic (providing you’re tracking the clicks). If you’ve correctly installed his plugin, your comments, downloads, comment author link, article links and blogroll link clicks are all tracked automatically. Those outbound clicks should look like this:

But what if, like me, you’ve created a bespoke sidebar, that isn’t quite dynamic enough to talk to a plugin like this? Basically, I’ve hard coded my sidebar links and I’d like to be able to track what exit clicks they’re generating.

Tracking your (hardcoded) sidebar link outbound clicks with a javascript onclick event

I’m going to use my “Find me on” links on the right hand side of this blog as the example. In short, I have worked through the HTML in this code and replaced the ordinary link anchor (<a href=) with the onclick event that will trigger the Google Analytics outbound link click tracking:

The first snippet of code is my Linkedin profile link. It’s an ordinary bit of code for an image that carries an outbound link in the HTML anchor.

Below is our next snippet. By using firebug in inspect mode, I grabbed the default onclick code from an outbound link from one of my recent articles and carefully replaced the href= url to the one I want to track. You will notice (If you look at an onclick in another article post on this blog) that I have changed the code “/outbound/article/” to “/outbound/sidebar”. This change will separate out click data coming from my sidebar – and will appear neatly in the content drilldown report above.

Finally, I need to update the first code snippet with this new onlick event. All that needs to be done here is replace the old HTML anchor link with this entire line of code:

Here’s the copy / paste code snippet:

<a onclick="javascript:pageTracker._trackPageview('/outbound/sidebar-logo/www.linkedin.com');" href="http://www.linkedin.com/in/richardbaxterseo"><img src="http://seogadget.co.uk/images/linkedin.gif" alt="linkedin - Richard Baxter" /></a>

Click tracking with Events in Google Analytics

Event tracking was actually meant for tracking where a pageload may not occur, but it’s useful for nearly anything where an action occurs on the site. It makes for a pretty handy way to track any kind of click though – largely thanks to Google analytics categorisation system for types of event. Here, in the event tracking section for Google Analytics you can see categories, actions and labels.

Events are categorised and assigned actions and labels in the JavaScript. This simple example shows event tracking in action on a “post to Facebook” action:

<a href="http://seogadget.co.uk/" onClick="pageTracker._trackEvent('Events', 'Exit click', 'SEOgadget');">http://seogadget.co.uk</a>

The category in this example is “events”, the action, “exit click” and the label “SEOgadget”.

Categorisation in event tracking is enormously powerful as soon as you get a good handle on it – for more information check out this resource over at Google code.