How to track external links on google analytics

Last Friday I set up a single page website for Facebook Influence members to keep track of all the tips, tricks and resources available on the site.

I you haven’t already checked out the site, the basic function is that it lists a series of resources in thumbnail form with a title and description associated with them. Each resource is tagged with one or more categories for sorting, and these categories appear as navigation at the top of the page. Clicking on one of the categories re-orders the list of resources to show only those items.

To get an idea of the most popular categories I set up Event Tracking on the top navigation elements…. and out of interest it seems most people are looking for inspiration.

I also wanted to understand which of the resources were being clicked on the most, but unfortunately these resources are all external outbound links and therefore are not captured by regular analytics. I applied the same event tracking to these elements but found out that because they were outbound there was not enough time to register the click via the conventional Event Tracking method in Google.

Tracking External links with google analytic events

This page is where I got started working out how to track these click events

Step One

Include the following code after your Google Analytics code inside the </head> (only if you’re using the Asynchronous Code)
<script type="text/javascript">
function recordOutboundLink(link, category, action) {
_gat._getTrackerByName()._trackEvent(category, action);
setTimeout('document.location = "' + link.href + '"', 100);
}
</script>
This adds a 100 millisecond delay to the click function which gives the analytics enough time to register the external link has been clicked before the browser reloads.

Step Two

Step two is really a step 1.2.  I found that when I implemented my usual tracking code (category, action, opt_label, opt_value) I wasn’t getting any results back from the test clicks.

If you want to use those additional features you need to make a basic adjustment to the code above and include these options in the function;
<script type="text/javascript">
function recordOutboundLink(link, category, action, opt_label, opt_value) {
_gat._getTrackerByName()._trackEvent(category, action, opt_label, opt_value);
setTimeout('document.location = "' + link.href + '"', 100);
}
</script>

Step Three

Now that you have the function in place you need to update the links for all of your external resources and apply an onclick event.  This is when running a CMS makes it much easier to get things done.

<a href="http://www.example.com" onClick="recordOutboundLink(this, 'Outbound Links', 'example.com', <youropt_label>, <youropt_value>);return false;">

For me this was

<a href="http://www.noupe.com/showcases/40-great-examples-of-facebook-fan-pages.html" onclick="recordOutboundLink(this, 'Outbound Links', 'Noupe – Awesome FB pages', 'http://www.noupe.com/showcases/40-great-examples-of-facebook-fan-pages.html', 1);return false;" >

Conclusion

As you can see it only takes a few lines of code to get a much better idea about how people are using your website.  This data provides an excellent insight into your cusotmers movements and trends and means that you can plan your content to go along with what your customers trends are at any time.

As always, if you are looking to get more out of your website through understading the usage patterns a little better get in touch with me to have a chat.