jQuery Mobile and Google Analytics

Question

I've seen lots of posts that explain how to integrate Google analytics with your JQM site, but it doesn't seem to be working for me. I'm using JQM version 1.2 and have an external javascript file containing this code:

var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-12345678-9']);

(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); })();

$('[data-role=page]').live('pageshow', function (event, ui) { try { hash = location.hash; if (hash && hash.length > 1) { _gaq.push(['_trackPageview', hash.substr(1)]); } else { _gaq.push(['_trackPageview']); } } catch(err) { } });

Can you spot why this isn't working? Do I need to load the code inline on each page rather than have it in an external file?

UdeF UdeF · Accepted Answer · 2012-10-06T19:42:42

You have to trigger page views to the "pageshow" event.

See: http://roughlybrilliant.com/jquery_mobile_best_practices#7

Try this:

var _gaq = _gaq || [];

    $(document).ready(function(e) {
        (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);
        })();
}); 

    $('[data-role=page]').live('pageshow', function (event, ui) {
        try {
            _gaq.push(['_setAccount', 'YOUR_ANALYTICS_ID_GOES_HERE']);

            if ($.mobile.activePage.attr("data-url")) {
                _gaq.push(['_trackPageview', $.mobile.activePage.attr("data-url")]);
            } else {
                _gaq.push(['_trackPageview']);
            }
        } catch(err) {}

    });

If you put the above code in an external file, be sure that the code will be run in the right time (after JQM and the page is loaded)... better attach this code to the end of your main html file.

jQuery Mobile and Google Analytics

2 Answers