How does google analytics track events when user navigates to other page inside one domain

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

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.

Answer 2

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.