Question

这已经困扰了我几天了，我还没有办法让它发挥作用。我的网站正在使用Jquery，Jquery-Mobile和RequireJS，我希望将Google Analytics添加到其中。

我的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事件以跟踪Google Analytics。此代码段粘贴到所有页面的末尾。

我已经将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
   });

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

 $ 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启动函数中，我正在调用第二个片段：

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

这样，第二个片段只会在加载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(['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的代码段已经考虑了异步加载，因此可能根本不需要使用Require。

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

1 个答案: