如何使用 Jquery、Jquery Mobile 和 RequireJS 设置 Google Analytics？

Question

这几天一直困扰着我，我还没有找到让它工作的方法。我的网站正在使用 Jquery、Jquery-Mobile 和 RequireJS，我想将 Google Analytics 添加到组合中。

我的分析设置是这样的（另请参阅here）：

<script type="text/javascript">
    var _gaq = _gaq || [];
    (function() {
         ... regular stufff 
    })();
// bind to pageshow event
$(document).on('pageshow', 'div:jqmData(role="page").basePage', function (event, ui) {
try {
    _gaq.push(['_setAccount', 'ID';
    _gaq.push(['_gat._anonymizeIp']);
    var url = location.href;
        try  {
            if (location.hash) {
                url = location.hash;
                }
            _gaq.push(['_trackPageview', url]);
            } catch(err) {}
        }); 
    </script>

所以我正在监听 JQM pageshow 事件以跟踪 Analytics。这个 sn-p 被粘贴到所有页面的末尾。

我已经像这样将 Analytics 放入 requireJS：

Main.js：

require.config({ 
    baseUrl: "../js/",  
    paths: {
        "jquery":        "libs/jquery/jquery.min",
        "jqm":           "libs/jquery-mobile/jquery-mobile.min", 
        "analytics":     "https://www.google-analytics.com/ga"
        }

require(['order!jquery', 'order!jqm', 'order!analytics', 'app'],
    function(jquery, jqm, analytics, App){  
        App.start();        
        });

在 App.js 中：

var start = function() {
   require(['order!jquery', 'order!jqm', 'order!analytics'],function() {
    // do stuff
   });

问题是，Analytics sn-p 位于每个页面 HTML 标记的末尾，所以虽然我认为我已经在 requireJS 中正确设置了它，之前加载了 Jquery 和 Jquery Mobile，但我仍然遇到错误：

 $ is not defined
  ....ocument).on('pageshow', 'div:jqmData(role="page").basePage', function (event, ui...

当第一页加载时。

我猜是因为 HTML 标记超出了 require 的范围，并且在加载 JQM 之前被解析。不过，必须有一种方法来正确设置它。

问题：
知道为什么会弹出错误以及我能做些什么吗？

感谢您的帮助！

编辑：
好的。这样做很有效：

在我的页眉中，我声明了第一部分：

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

然后在我的 requirejs 启动函数中，我调用了第二个 sn-p：

    var start = function() {
        require(['order!jquery', 'order!jqm'],function() {
            var analyticsHasBeenSet; 
            ...
            var analyize = function () {

                if ( analyticsHasBeenSet != true ){
                    analyticsHasBeenSet = true;
                    require(['https://www.google-analytics.com/ga.js'], function (App) {

                        $(document).on('pageshow', 'div:jqmData(role="page"), function() {
                            _gaq.push(['_setAccount', '']);
                            _gaq.push(['_gat._anonymizeIp']);
                            var url = location.href;
                            try  {
                                if (location.hash) {
                                    url = location.hash;
                                    }
                                _gaq.push(['_trackPageview', url]);
                                } catch(err) { // error catch }
                            });
                        });
                     }
                 }
            analyize();

这样，第二个 sn-p 只会在 Jquery 和 Jquery Mobile 加载后执行。通过设置一个全局变量（我希望），绑定只会被启动一次。到目前为止似乎有效。

Answer 1

问题很可能出在您对订单的使用上！插入。这应该只用于标准的 .js 文件，而不是模块。

订单插件最好与传统脚本一起使用。它不是 需要使用 define() 来定义模块的脚本。有可能的 混搭“订单！”具有常规依赖项的依赖项，但是 只有“命令！”将按相对顺序评估每个 其他。

http://requirejs.org/docs/api.html#order

您的分析路径应修改为传统的 js 文件（因为 ga.js 不会将自身注册为模块）

"analytics":     "https://www.google-analytics.com/ga.js"

jQuery 和 jQuery mobile 确实将自己注册为模块，因此您对它们的配置是正确的。

在你的 require 调用中，你只需要：

require(['jquery', 'jqm', 'analytics'],function($, jqm) {
    // analytics is not a module so _gaq will now exist as a global var.
   });

看到 ga.js 是唯一不是模块的文件，顺序！插件可能用处不大，因为它仅在您有多个需要按特定顺序加载的传统脚本时才重要。

订单插件最好与传统脚本一起使用。它不是 需要使用 define() 来定义模块的脚本。有可能的 混搭“订单！”具有常规依赖项的依赖项，但是 只有“命令！”将按相对顺序评估每个 其他。

然而，值得注意的是，Google 提供的用于使用 Google Analytics 的代码 sn-p 已经考虑了异步加载，因此可能根本不需要使用 Require。