I recently ran into an interesting issue in Google Analytics – I wanted to track an event and then immediately direct the browser to a different page.  Easy right?
The problem was when the event tracking was implemented like this…

_gaq.push(['_trackEvent', 'Category', 'event', 'value']);
document.location = 'someOtherPage.html';

…the event call to Google Analytics was cancelled by the browser navigating away from the page before the event could be registered.

What I need here is a callback function that fires after the event has been registered. Google is providing this functionality in their new version of Analytics which is currently in beta.

But how could I incorporate this function using ga.js?

A little poking around led me to this answer in which flu describes how to use the above mentioned ‘hitCallback’ in ga.js.

Using flu’s answer as a starting point I found this code worked well:

_gaq.push(['_set','hitCallback',function(){
     document.location='someOtherPage.html';	
}]);
_gaq.push(['_trackEvent', 'Category', 'event', 'value']);

One last thing to consider at this point – now the browser navigation function is reliant on the Google Analytics object to be present. It would probably be a good idea to check the availability of GA and account for folks who have blocked it or otherwise don’t have the object available.

Something like the following should produce the desired result:

var callbackFunction = function(){
  document.location=someOtherPage.html;	
}
if(window._gat){
_gaq.push(['_set','hitCallback',callbackFunction]);
_gaq.push(['_trackEvent', 'Category', 'event', 'value']);
} else {
  callbackFunction();	
}