Question

I have an issue with Google Analytics Event Tracking that is only apparent on Chrome and no other browser.

I have the following Google Analytics Tracking Code firing on my site for a click on an anchor link:

_gaq.push(['_trackEvent', 'Basket Remove', product_name, product_code, product_price, false]);          
_gaq.push(['rollup._trackEvent', 'Basket Remove', product_name, product_code, product_price, false]);       

Using a Web Proxy tool I can see that the first one is firing, but the second one is not. This appears to be the case for a number of _trackEvent clicks where the click is a link to another page, and as I have said is only apparent in Google Chrome.

It is almost as if Chrome has decided to redirect away to the link in the anchor before completing the JavaScript execution. I am not experiencing this problem in IE or FF.

I've tried sticking a setTimeout after, and between, the calls but to no avail.

setTimeout('document.location="' + link.href + '"', 500);
Was it helpful?

Solution

The issue is that Chrome (and other browsers) will cancel any pending image requests when a request for loading a new page in the current window is made. You've probably been lucky that the first _trackEvent request is getting recorded because of the extra processing going on during the second _trackEvent.

When adding a delay to a link, you need to make sure to keep the link's default action from executing -- otherwise the default action follows the link before the setTimeout function can occur.

The following code checks to see if the link is opening in a new window -- if not, it delays following the link by 150ms:

function track(link) {
  _gaq.push(['_trackEvent', 'Basket Remove', product_name, product_code, product_price, false]);          
  _gaq.push(['rollup._trackEvent', 'Basket Remove', product_name, product_code, product_price, false]);
  if ('_blank' == link.target) return true;
  var url = link.href;
  setTimeout(function(){ document.location = url; }, 150);
  return false;
}

<a href="someURL" onclick="return track(this);">ClickMe</a>

OTHER TIPS

For those who arrived here and the proposed answer was not working for them:

What I did was placing the tracking code (i.e. _gaq.push() within the setTimeout function, and giving 1500ms as a parameter.

I work with analytics.js and my code looks like this:

setTimeout(function(){ga('send', 'event', 'click' , 'label',2);}, 1500);

So essentially, I do not interfere with the natural usage of my site with tracking. Rather report tracking after what the user did already happened.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top