External Link Tracking through Google Analytics

Every time when we need to track external links and want to see how many links were clicked with our website. We can track using multiple methods i.e. Google Analytic’s trackEvent or Virtual trackPageview.

We can track third party links using trackEvent function of  Google Analytics. But when it comes to appending all links in dynamically generated pages and in static pages. It becomes head-ache for appending the code and testing if everything works fine with each links.

Implement following javascript code to track external links through Google Analytics accurately. It helps in saving time by elimination of adding external link tracking code manually.

Here’s the snippet of the code:

<!-- include jquery javascript framework -->
<script type='text/javascript' src='https://code.jquery.com/jquery-1.7.min.js'></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXXXX-X']); //set account id

_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';

var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);

})();

//code block to attach trackevent code for external links/mailto links

$(document).ready(function(){

// Creating custom :external selector

$.expr[':'].external = function(obj){

return !obj.href.match(/^javascript/) && (obj.hostname != location.hostname);

};

// Add 'external' CSS class to all external links

$('a:external').addClass('external');

$('a.external').click(function(){

var obcat = this.href.match(/^mailto:/);

var targeturl = this.href;

if (obcat){

targeturl = targeturl.replace('mailto:','');

_gaq.push(['_trackEvent', 'Mailto', targeturl , document.location.href,1,true]);

}else{

var targetname = this.text;
var isDoc = this.href.match(/.(?:doc|eps|jpg|png|svg|xls|ppt|pdf|xls|zip|txt|vsd|vxd|js|css|rar|exe|wma|mov|avi|wmv|mp3)($|&|?)/);
if (isDoc) {
 _gaq.push(['_trackEvent', 'DocDownlod', targetname, document.location.href,1,true]);
}else{
 _gaq.push(['_trackEvent', 'Outbound', targeturl, document.location.href,1,true]);
}

}

});

$('a').click(function(){
 var targetname = this.text;
 var isDoc = this.href.match(/.(?:doc|eps|jpg|png|svg|xls|ppt|pdf|xls|zip|txt|vsd|vxd|js|css|rar|exe|wma|mov|avi|wmv|mp3)($|&|?)/);
 if (isDoc) {
  _gaq.push(['_trackEvent', 'DocDownlod', targetname, document.location.href,1,true]);
 }
});

});

</script>

Explanation of the code:

Jquery Javascript Framework is required to work with it. Though you can also use mootools, prototype javascript framework.

<script type='text/javascript' src='https://code.jquery.com/jquery-1.7.min.js'></script>

We can include the jquery’s library to work with DOM – Javascript

<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXXXX-X']); //set account id
_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';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

Above code is self explanatory, that includes Google Analytics’s Asynchronous code.

We wrap our function in $(document).ready so that it doesn’t affect page loading process.

//code block to attach trackevent code for external links/mailto links
$(document).ready(function(){
...
...
});

</script>

Then we’ll have to create a custom external selector using a function where it says whether hostname matches with current document’s hostname.

// Creating custom :external selector
$.expr[':'].external = function(obj){
return !obj.href.match(/^javascript/) && (obj.hostname != location.hostname);
};

Then we can append a custom class to all those links which are external links

// Add 'external' CSS class to all external links
$('a:external').addClass('external');

Now we can add a check if the external link is either mailto link or actual 3rd party URL and attach  a click event function for trackEvent

$('a.external').click(function(){
var obcat = this.href.match(/^mailto:/);
var targeturl = this.href;
if (obcat){
targeturl = targeturl.replace('mailto:','');
_gaq.push(['_trackEvent', 'Mailto', targeturl , document.location.href,1,true]);
}else{

var targetname = this.text;
var isDoc = this.href.match(/.(?:doc|eps|jpg|png|svg|xls|ppt|pdf|xls|zip|txt|vsd|vxd|js|css|rar|exe|wma|mov|avi|wmv|mp3)($|&|?)/);
if (isDoc) {
 _gaq.push(['_trackEvent', 'DocDownlod', targetname, document.location.href,1,true]);
}else{
 _gaq.push(['_trackEvent', 'Outbound', targeturl, document.location.href,1,true]);
}
}
});

We can check if the current link’s href matches with mailto then fire ‘Mailto’ trackevent, ‘DocDownload’ or ‘Outbound’ trackevent.

Here we’ve added 1 and “true” in the 4th and 5th argument additionally. 5th argument is a new feature which prevents the trackevent call in the calculation of bounce rate.

You can view all these events reported in your GA Interface under

Content > Event Tracking > Categories > Outbound/Mailto/DocDownload

There’s one more usage of appending cookie parameters automatically to all external links and forms. I’ll talk about it next time.

Requirement:

A Jquery Framework (If you are already using a jquery library you don’t need copy jquery library reference)

Script needs to be pasted through all pages of your website, where you want to track external links and mail to links.

Alteration:

You may use virtual trackpageview, instead of trackevent but it’s your choice.

Note:

When you use it with multiple javascript frameworks necessary safeguard needs to be added for the code. If you are using javascript functions to redirect to external links it wouldn’t work.