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?

Answer 1

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.

Answer 2

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) {}

    });

warn: live method renamed to on

Could be a seperate file injected into your (php, jsp) page

and you must inject it just before closing div of data-role page

You can check jquery mobile best practices and more specific See: http://roughlybrilliant.com/jquery_mobile_best_practices#7