Google Analytics interferes with history.back() in android browser?

Question

I have a html5 mobile app where everything exists on a single page and I use history.back/popstate/etc to change the contents of the page (via jQuery Mobile). I'm using Google Analytics to track various events, and on one page I track if the user exits via a particular button:

$('#my-back-button').bind('tap', function() {
    _gaq.push(['_trackEvent', 'mycategory', 'myaction']);
    history.back();
    return false;
});

In the android 2.2 browser history.back() is called but onpopstate is not fired and the page isn't changed. If I put window.onpopstate = function() { alert("!"); }; just before the history.back(), I see no alert.

If I reverse the two lines (history.back() first, then _gaq.push), it seems to work, but I can't rely on this kind of ordering throughout my code.

No exceptions are being thrown. It works fine in iOS and desktop Chrome.

Any ideas why history.back() doesn't work after a google analytics call?

Answer 1

Try wrapping the call to _gaq.push() in a async timeout of 0:

$('#my-back-button').bind('tap', function() {
    setTimeout(function() {
         _gaq.push(['_trackEvent', 'mycategory', 'myaction']);
    }, 0);
    history.back();
    return false;
});

This will allow history.back() to execute first before Google Analytics potentially affects the history stack.

Answer 2

Hm, okay a really nasty one: what happens if you wrap _gaq.push() into a new function and leave history.go() just where it is?

Answer 3

Maybe the call to google analytics adds a new entry to the history stack and history.back() just brings you to the page you are at the moment.

Or GA gives a new scope to history.

Try calling history.back() twice or use top.history.back() or window.history.back() or self.history.back()