How does google analytics track events when user n

Question

In Google's documentation it is said that an event can be tracked in the following way:

<a onclick="_gaq.push(['_trackEvent', 'category', 'action', 'opt_label', opt_value]);">click me</a> 

or older version:

<a onclick="pageTracker._trackEvent('category', 'action', 'opt_label', opt_value);">click me</a>

I was looking with Firebug to the request that are made when a click on a link and I see there aborted request:

http://www.google-analytics.com/__utm.gif?utmwv=4.7.2&utmn=907737223&....

This happens because browser unload all javascript when user navigates to a new page. How in this case event tracking is performed?

Edit: Since one picture can be worth a thousand words...

When I click a link firebug shows me this sequence of requests (here are shown first four, after follows requests to fill page content)

Answer 1

This problem is answered in Google's documentation:

use

<script type="text/javascript">
function recordOutboundLink(link, category, action) {
  try {
    var myTracker=_gat._getTrackerByName();
    _gaq.push(['myTracker._trackEvent', ' + category + ', ' + action + ']);
    setTimeout('document.location = "' + link.href + '"', 100)
  }catch(err){}
}
</script>

or

<script type="text/javascript">
function recordOutboundLink(link, category, action) {
  try {
    var pageTracker=_gat._getTracker("UA-XXXXX-X");
    pageTracker._trackEvent(category, action);
    setTimeout('document.location = "' + link.href + '"', 100)
  }catch(err){}
}
</script>

This more or less the same as the answer from Crayon Violet, but has a nicer method name and is the official solution recommended by Google.

Answer 2

As above, this is due to the page being unloaded prior to the Async call returning. If you want to implement a small delay to allow gaq to sync, I would suggest the following:

First add a link and add an extra class or data attribute:

 <a href="xxx" data-track-exit="true">My Link</a>

Then add into your Javascript:

 $("a[data-track-exit]").on('click', function(e) {
   e.preventDefault();
   var thatEl = $(this);
   thatEl.unbind(e.type, arguments.callee);
   _gaq.push( [ "_trackEvent", action, e.type, 'label', 1 ] );
   setTimeout(function() {
     thatEl.trigger(event);
   }, 200);
 });

I don't really condone this behavior (e.g. if you are going to another page on your site, try to capture the data on that page), but it is a decent stop-gap. This can be extrapolated not just for click events, but also form submits and anything else that would also cause a page unload. Hope this helps!

Answer 3

I had the same issue. Try this one, it works for me. Looks like that ga doesnt like numbers as a label value. So, convert it to string.

trackEvent: function(category, action, opt_label, opt_value){
    if(typeof opt_label === 'undefined') opt_label = '';
    if(typeof opt_value === 'undefined') opt_value = 1; 
    _gaq.push([
        '_trackEvent', 
         String(category), 
         String(action), 
         String(opt_label), 
         opt_value
    ]);
 }

Answer 4

The problem is that there isn't enough time for the script to finish running before the user is taken to the next page. What you can do is create a wrapper function for your GA code and in the onclick, call the wrapper function and after the GA code is triggered in your wrapper function, set a time out and update location.href with the link's url. Example:

<a href="somepage.html" onclick="wrapper_function(this,'category', 'action', 'opt_label', 'opt_value');return false;">click me</a>

<script type='text/javascript'>
function wrapper_function(that,category,action,opt_label,opt_value) {
  _gaq.push(['_trackEvent', category, action, opt_label, opt_value]);
  window.setTimeout("window.location.href='" + that.href + "'", 1000);
}
</script>

code will vary a bit based on your link but hopefully you get the idea - basically it waits a little bit before taking the user to the target url to give the script some time to execute.

Update: This answer was posted several years ago and quite a lot has happened since then, yet I continue to get feedback (and upvotes) occasionally, so I thought I'd update this answer with new info. This answer is still doable but if you are using Universal Analytics then there is a hitCallback function available. The hitCallback function is also available to their traditional _gaq (ga.js) but it's not officially documented.