可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

There has been a previous Question about using Google Analytics with jquery Mobile with a successful answer provided here. However this was for versions of jQuery prior to 1.9.

Please can someone help alter the code so that the depreciated .live event is replaced with the current .on event. I have tried but with no success.

Here is the JavaScript code:

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

});

回答1:

The code Google gives on the Tracking Info page you will look something like this, depending on what features you've chosen:

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-XXXXXXXX-1']);
  _gaq.push(['_setDomainName', 'foo.bar']);
  _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);
  })();

And you're told to put that immediately after the opening <body>. You should keep it in the same place with jQuery Mobile (tested on v1.3) by removing the _trackPageview line and adding a simple snippet to the end of that code block, giving:

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-XXXXXXXX-1']);
  _gaq.push(['_setDomainName', 'foo.bar']);

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

    $(document).on('pageshow', ':jqmData(role="page")', function(evt, data) {
        var url = $(this).jqmData('absUrl');
        try {
            if (url) {
                url = $.mobile.path.parseUrl(url)
                _gaq.push(['_trackPageview', url.pathname + url.search + url.hash]);
            }
            else {
                _gaq.push(['_trackPageview']);
            }
        }
        catch(e) {}
    });

回答2:

In addition to .live being replaced by .on, Google is replacing ga.js with analytics.js as part of the change to Universal Analytics.

I was using a variation of the code Walf posted to track individual pages on a jQuery Mobile based site, but needed to changed it around to work with the new Universal Analytics configuration. I have the following script just after the body tag:

(function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
    (i[r].q = i[r].q || []).push(arguments)
    }, i[r].l = 1 * new Date(); a = s.createElement(o),
    m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');

ga('create', 'UA-XXXXXXXX-X', 'site_name.com');
ga('send', 'pageview');

$(function () {
    $('[data-role=page]').on('pageshow', function (event, ui) {
        try {
            if (location.hash) {
                ga('send', 'pageview', location.hash);
            }
            else {
                ga('send', 'pageview');
            }
        }
        catch (error) {
        }
    });
});

Pages being listed by the location hash (e.g. #about) in Google Analytics gives me the information I want to see about how visitors are interacting with the site.

回答3:

After the opening body tag:

<script>
    (function(i, s, o, g, r, a, m) {
        i['GoogleAnalyticsObject'] = r;
        i[r] = i[r] || function() {
            (i[r].q = i[r].q || []).push(arguments);
        }, i[r].l = 1 * new Date();
        a = s.createElement(o),
        m = s.getElementsByTagName(o)[0];
        a.async = 1;
        a.src = g;
        m.parentNode.insertBefore(a, m);
    })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
    ga('create', 'UA-XXXXXXX-XX', 'exemple.com');
</script>

And in each page:

<div data-role="page" ...>
    ...

    <script>
        $(document).off("pageshow", 'div[data-role="page"]').on("pageshow", 'div[data-role="page"]', function() {
            ga('send', 'pageview', $.mobile.path.getLocation());
        });
    </script>
</div>

回答4:

After making the .live() to .on() change, I also had to move the script from <head> and to the end of <body>, just before the last </div> that was attached to the <div data-role="page">. Otherwise I would not get every page view.