Google Analytics und jQuery Mobile


Bei der Benutzung von Google Analytics mit jQuery Mobile gibt es ein paar Besonderheiten zu beachten. So wird nicht jede Seite neu geladen bei jQuery Mobile, sondern der Inhalt (per Ajax) in die bestehende Seite eingefügt und die URL angepasst, so dass der Eindruck einer App entsteht.

Für die Verwendung von Google Analytics mit jQuery Mobile bedeutet dies, dass man am besten manuell die Pageviews zählen sollte:

Man integriert in den <head> Teil der Applikation den Code:

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXXX']);
/* do not track first page here*/
/*_gaq.push(['_trackPageview']);*/

(function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

und führt manuell für jede Unterseiten beim Laden die trackUser-Funktion aus mit der aktuellen URL:

$("#login").live('pageshow',function(ui, event)
{
    trackUser();
});
function trackUser()
{
    hash = location.hash;

    if (hash) {
        _gaq.push(['_trackPageview', hash.substr(1)]);
    } else {
        _gaq.push(['_trackPageview']);
    }
}