Tracking of external links with Google Analytics - google-analytics

Question

I have a problem with tracking external links. It's not like my solution does not work at all, the problem is, it works only in very few cases. Like 1% of clicks is actually tracked in Analytics. First I had the timeout set to 100ms and thought it might be too short, but even with 500 nothing changed.
Anyone has an idea what might go wrong here?
<script type="text/javascript">
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXXXXX-X', 'domain.com');
ga('send', 'pageview');
</script>
<script type="text/javascript">
function recordOutboundLink(link, category, action) {
try {
ga('send', 'event', 'category', 'action');
} catch(err){}
setTimeout(function() {
document.location.href = link.href;
}, 500);
}
My links look like this:
a class="post" onclick="recordOutboundLink(this, 'Outbound Links', 'domain.com');" href="http://www.external.com" rel="nofollow">Click here
In Analytics I check in goals for "category = Outbound Links"
Thanks in advance!

Answer 1

There are a few issues with your code, but you should be using Universal Analytics built-in hitCallback function:
HTML:
<a class="post" onclick="recordOutboundLinks('Outbound Link', this.href); return false;" href="http://www.external.com" rel="nofollow">Click here</a>
JS:
<script type="text/javascript">
function recordOutboundLinks(category, link){
try {
ga('send', 'event', category, link, {'hitCallback': function() {
document.location.href = link;
}});
} catch(err){}
}
</script>

Answer 2

Looks like the issue is that you aren't preventing the default event for the link, so it doesn't matter what you set the timeout to.. your function gets executed but then the browser proceeds to execute the default event for the link: that is to follow the target specified in the href. You can update your code to this:
link (noticed use of event instead of this):
<a class="post" onclick="recordOutboundLink(event, 'Outbound Links', 'domain.com');" href="http://www.external.com" rel="nofollow">Click here</a>
function:
<script type="text/javascript">
function recordOutboundLink(event, category, action) {
try {
event.preventDefault(); // prevent default link action
ga('send', 'event', 'category', 'action');
} catch(err){}
setTimeout(function() {
document.location.href = event.target.href;
}, 200);
}
</script>
In my experience, a timeout of 100-200ms should be enough to get GA code to ping but you may have to play with that a little yet, because it's not guaranteed. Alternatively, you can write code to hook into when ga finishes its thing, and it would be easier if you are already using a framework like jQuery.. But overall I agree with Blexy in that you should switch to UA which provides a callback function (and in his example, he prevents the default by appending return false in the onclick).