将 Google Analytics 与 Require.js 结合使用时出现问题

Question

我使用 require.js (http://requirejs.org/) 来实现我网站上的许多功能，到目前为止，它似乎运作良好。不过，我在尝试包含 Google Analytics 代码时遇到了问题。该代码似乎拒绝添加 utm.gif 并且没有向 Google 发送信标。我想知道这是否是一个范围问题。

define(function() {
    var Analytics = {};
    Analytics.Apply = function() {
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-XXXXX-X']);
    _gaq.push(['_trackPageview']);

    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);
}
return Analytics;
});

ga.debug 不会引发任何错误，并且 utm.gif 不会出现。如果我将代码移到 require.js 之外（我的意思是使用 require.js 的模块化 javascript，因此只需将其内联添加到页面中），utm.gif 就会成功添加到页面，并且 ga.debug 会发送其信标。

我发现这个网站似乎成功使用了它，但我不确定该网站做了什么不同的事情： http://paceyourself.net/2011/05/14/managing-client-side-javascript-with-requirejs/

其他人遇到组合问题require.js 和 GA？

Answer 1

其他答案都不适合我，但在阅读 Google Analytics 后，我设法找出了一些可行的方法文档。

在您的主 app.js

requirejs.config({
    paths: {
        ga: '//www.google-analytics.com/analytics'
    }
});

requirejs(['analytics'], function () {
    ...
});

自己的文件 analytics.js 中：

define(['ga'], function () {
    window.ga('create', 'UA-XXXXXX-1');
    window.ga('send', 'pageview');
});

这是有效的，因为 requirejs 保证在函数执行时，analytics.js > 将完成加载。这意味着 window.ga 函数已准备好接受命令。

Answer 2

请参阅此 requirejs 群组帖子，了解有关该问题的讨论。

Answer 3

对于最新版本的 Google Analytics，我与 RequireJS 一起使用的代码片段是 -

<script>
  window.GoogleAnalyticsObject = 'ga';
  window.ga = { q: [['create', 'UA-40327700-1', 'jspm.io'], ['send', 'pageview']], l: Date.now() };
  require(['http://www.google-analytics.com/analytics.js']);
</script>

Answer 4

开始吧：

define([ 'http://www.google-analytics.com/ga.js' ], function ( ga ) {
    ga = { q: [['create', 'UA-18710277-1', 'jspm.io'], ['send', 'pageview']], l: Date.now() };
});

这是我当前正在使用的模块，向@user2305274 致敬

Answer 5

使用较新的 analytics.js 时，其他解决方案对我不起作用。直接将 URL 作为依赖项放入是行不通的，因为 requirejs 无法确定脚本何时完成加载。 requirejs 的异步插件似乎也不适合我（尽管我将它用于谷歌地图 api）。

以下方法对我有用：

define(function (require) {

  var module;

  // Setup temporary Google Analytics objects.
  window.GoogleAnalyticsObject = "ga";
  window.ga = function () { (window.ga.q = window.ga.q || []).push(arguments); };
  window.ga.l = 1 * new Date();

  // Immediately add a pageview event to the queue.
  window.ga("create", "{{TrackingID}}", "{{Domain}}");
  window.ga("send", "pageview");

  // Create a function that wraps `window.ga`.
  // This allows dependant modules to use `window.ga` without knowingly
  // programming against a global object.
  module = function () { window.ga.apply(this, arguments); };

  // Asynchronously load Google Analytics, letting it take over our `window.ga`
  // object after it loads. This allows us to add events to `window.ga` even
  // before the library has fully loaded.
  require(["http://www.google-analytics.com/analytics.js"]);

  return module;

});