Is there a racing condition when tracking clicked links?

Question

I want to track clicks that users on my page. But I'm a little confused. Looking at this code:

<a href="http://example.com" onClick=”_gaq.push(['_trackEvent', 'External Link', 'Twitter Link', 'Follow Us - Words']);”>Follow Us</a>

^ What if user get's redirected to http://example.com before google analitics tracks - then what? Am I right that that example has a race condition?

You can delay the going to new site by 100 ms or so to make sure the tracking takes place — Huangism, Jul 14 '14 at 20:00
I believe it should still execute. Have you tried it? also, you could target a new window/tab so that the current page stays open. I am also fairly certain that within google analytics there are script options to track the links and clicks — Adjit, Jul 14 '14 at 20:03
@Adjit `_gaq.push` merely pushes to standard JS array. And then extra http request has to be dispatched to Google server. So as far as I understand - it's who makes it first: tracking or page redirect. And yes - in some cases it might track - but in some cases redirect will be faster - right? — Dannyboy, Jul 14 '14 at 20:06
Truthfully I have no idea, which is why I suggest you test it out. But if you want to add a short delay to allow the tracking request take a look here http://stackoverflow.com/questions/11366627/add-class-to-html-on-link-click-and-add-delay-redirection-fade-out-page — Adjit, Jul 14 '14 at 20:09
possible duplicate of [Google Analytics hitCallback event tracking not working](http://stackoverflow.com/questions/22743105/google-analytics-hitcallback-event-tracking-not-working) — Blexy, Jul 14 '14 at 21:40

score 3 · Answer 1 · answered Jul 14 '14 at 20:36

3

There is no race condition. The click handler is called and executes completely before page navigation starts. That click handler creates an ajax request whose response is inconsequential. The ajax request is started before page navigation is started.

Don't be fooled by the method name. According to google:

This function is named push so that an array can be used in the place of _gaq before Analytics has completely loaded. While Analytics is loading, commands will be pushed/queued onto the array. When Analytics finishes loading, it replaces the array with the _gaq object and executes all the queued commands. Subsequent calls to _gaq.push resolve to this function, which executes commands as they are pushed.

While initially, .push() merely pushes commands into an array, once Analytics has loaded, those commands are executed immediately.

answered Jul 14 '14 at 20:36

gilly3

87,962
25
144
176

I knew about array-> object transformation. But tracking call is still asynchronous afaik - is it not? Here's a [ticket](http://stackoverflow.com/questions/3427580/race-condition-and-using-google-analytics-asynchronous-gaq-synchronously) that I think confirms that: – Dannyboy Jul 15 '14 at 11:39
@Dannyboy - I like to find out for myself, so I checked in the debugger. I stepped through google's obfuscated code and verified that the gif beacon is created before the click handler returns. It's asynchronous in that it doesn't wait for a response from the server, but the code that creates the request (via gif beacon) is synchronous. – gilly3 Jul 15 '14 at 16:36
thank you for verifying this! Am I understanding this correctly - that there is no guarantee that gif beacon reaches google server before page get's reloaded? – Dannyboy Jul 15 '14 at 17:11
@Dannyboy - The http request gets sent, no doubt. It is conceivable that the page could get reloaded before google receives the request, but so what? Why would it matter if google received the request after the external link request was processed instead of before? – gilly3 Jul 18 '14 at 16:59

score 0 · Answer 2 · answered Jul 14 '14 at 20:11

You can do this:

With jQuery:

$('a').on('click', function(e){
    e.preventDefault();
    var $el = $(this);
    _gaq.push(['_trackEvent', 'External Link', 'Twitter Link', 'Follow Us - Words']);
    setTimeout(function(){
       window.location.href = $el.attr('href');
    }, 100);
});

Without jQuery:

document.getElementById('someIdOfLink').addEventListener('click', function(){
   return false;
   var $el = this;
    _gaq.push(['_trackEvent', 'External Link', 'Twitter Link', 'Follow Us - Words']);
    setTimeout(function(){
       window.location.href = $el.getAttribute('href');
    }, 100);
});

hope help you!

Is there a racing condition when tracking clicked links?

2 Answers2