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.
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:- Log into your Google Analytics account.
- Click on "Real-Time" and then "Events".
- Load your website in another tab / window and click on an outbound link.
- You'll see the outbound link appear after a few seconds:
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:
- Once you've located "Outbound Links" (see 6. in the image above), simply click on it and this will reveal all the outbound links: