Track Outbound Links on your Website – A method that works!

By the Editor In Analytics, Development No comments

We build a lot of content heavy directory-like websites here at iMod Digital for our clients and a really common request post-launch is that they would like to be able to track the number of times a visitor on the website clicks a link to go to another website. The idea here is to be able to tell their customers (i.e. businesses who list on their directory websites) how many times people have clicked on their links. This provides our clients with business intelligence that allows them to report effectively to their customers who are paying subscription fees for visibility.

Intro Header

One of the problems we’ve run into is that there are countless options available to achieve this, from plugins for WordPress to Google Tag Manager and so the list goes on. However, half of the plugins don’t work and integrations take time. Instead, we wanted a rapid solution that we could roll out for our clients and not necessarily charge for the feature but rather offer it as a post-launch bonus. After a lot of research and testing we have managed to track down some code that has worked for us. We’ve applied the code to WordPress websites as well as bespoke websites successfully.

In this article we’re going to guide you through how you implement the code, how to test that you’ve implemented it correctly and finally how to see all the links for a specific date range.

Let’s get going.

Implementation

As with anything that has to do with code, if you’re not familiar with changing code then it might be best to point your web designer to this article and ask them to set it up. If you are familiar with code and feel confident in doing this, please proceed accordingly:

One of the best parts about this code, apart from the comments, is that all you need to do is copy and paste it between the <head> and </head> tags on your website. In you’re using WordPress, then the ideal placement is in your header.php file so that it carries across every page on the website.

Caution: You must be using Google’s new Universal Analytics tracking code.

<script type=”text/javascript”>
function _gaLt(event) {

/* If GA is blocked or not loaded then don’t track */
if (!ga.hasOwnProperty(“loaded”) || ga.loaded != true) {
return;
}

var el = event.srcElement || event.target;

/* Loop up the DOM tree through parent elements if clicked element is not a link (eg: an image inside a link) */
while (el && (typeof el.tagName == ‘undefined’ || el.tagName.toLowerCase() != ‘a’ || !el.href)) {
el = el.parentNode;
}

/* if a link has been clicked */
if (el && el.href) {

var link = el.href;

/* Only if it is an external link */
if (link.indexOf(location.host) == -1 && !link.match(/^javascript:/i)) {
/* Is target set and not _(self|parent|top)? */
var target = (el.target && !el.target.match(/^_(self|parent|top)$/i)) ? el.target : false;

var hbrun = false; // tracker has not yet run

/* HitCallback to open link in same window after tracker */
var hitBack = function() {
/* run once only */
if (hbrun) return;
hbrun = true;
window.location.href = link;
};

/* If target opens a new window then just track */
if (el.target && !el.target.match(/^_(self|parent|top)$/i)) {
ga(
“send”, “event”, “Outgoing Links”, link,
document.location.pathname + document.location.search
);
} else {
/* send event with callback */
ga(
“send”, “event”, “Outgoing Links”, link,
document.location.pathname + document.location.search, {
“hitCallback”: hitBack
}
);

/* Run hitCallback if GA takes too long */
setTimeout(hitBack, 1000);

/* Prevent standard click */
event.preventDefault ? event.preventDefault() : event.returnValue = !1;
}
}

}
}

/* Attach the event to all clicks in the document after page has loaded */
var w = window;
w.addEventListener ? w.addEventListener(“load”, function() {
document.body.addEventListener(“click”, _gaLt, !1)
}, !1) : w.attachEvent && w.attachEvent(“onload”, function() {
document.body.attachEvent(“onclick”, _gaLt)
});
</script>

Once you’ve implemented the code, it’s time to perform a quick test to see that it’s working. Because Google Analytics isn’t instant with data, what we don’t want to do is wait a few hours to then test, but instead use the real-time reporting to know immediately. Below is a simple test that you may perform.

Testing

Just 4 simple steps and you’ll know whether you’ve successfully implemented the code:

  1. Log into your Google Analytics account.
  2. Click on “Real-Time” and then “Events”.
  3. Load your website in another tab / window and click on an outbound link.
  4. You’ll see the outbound link appear after a few seconds:
Google Analytics Real-Time Events Tracking Outbound Links

In the image above, you can see that someone clicked on the “Redisa” link on the website that the code was implemented on.

Success!

Now that we know it’s working, at the end of a month we might want to see all the outbound link clicks for the month. In order to do this there are a few more steps but it’s not too complicated and we’ve done our best to lay it out for you below with some screen captures to assist.

Finding Links

Please note that you won’t be able to do this immediately, you need to give it a good few hours or a day or two for Google Analytics to gather some data. Once you’ve allowed some time to pass, the following steps will get you what we need:

  • Log into your Google Analytics account.
  • Click on “Behavior”, then “Events” and finally “Top Events”.
  • In the list that appears we’re interested in “Outbound Links”.
  • An easy way to find “Outbound Link” is to search for it in the little search on the right, as below:

Google Analytics Event Categories

  • Once you’ve located “Outbound Links” (see 6. in the image above), simply click on it and this will reveal all the outbound links:

Google Analytics Event Actions

Nice and easy?

Conclusion

Although we’ve approached this article from the point of view of someone who runs a directory-like website, tracking outbound links can be incredibly useful on any website for the simple reason that it shows you what your visitors are doing. If you find that a lot of visitors are clicking through to a specific external site, it might make sense to look at this external website and determine whether you could build a resource on your own website instead. The idea here is to keep your visitors on your website rather than allowing them to move to someone else’s. Another idea could be to reach out to a website that your visitors are clicking to and forging a relationship with said website. The options are endless, but one thing’s very clear.. this is useful data to track.

We hope you’ve enjoyed our short guide and welcome any questions in the comments below.