How to integrate Google Analytics with jQuery Mobile application?

Question

I try to develop a jQuery Mobile application with multi-page template. I want to add Google Analytics into the application.

I reference this documents, Using Google Analytics with jQuery Mobile . It seems not work in my application.

The code in my app is below:

<script type="text/javascript">
    var _gaq = _gaq || [];

    (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]').on('pageshow', function (event, ui) {
        try {
            _gaq.push(['_setAccount', 'UA-30119852-1']);
            hash = location.hash;

            if (hash) {
                _gaq.push(['_trackPageview', hash.substr(1)]);
            } else {
                _gaq.push(['_trackPageview']);
            }
        } catch(err) {      
        }
    });
</script>

How can I integrate Google Analytics with jQuery Mobile application?

Answer 1

$(document).delegate('[data-role=page]', 'pageshow', function (event, ui) {
console.log('pageshow event handler called for ');
var url = location.href;
console.log('pageshow event url = '+url);

try  
{
    //_gaq.push(['_trackPageview', url]);
    _gaq.push( ['_trackPageview', event.target.id] );
    console.log('done pushing page '+url);
} 
catch(error) {
    // error catch
    console.log('got error '+error);
}
});