来自 file:// url 的 Google Analytics

Question

我们有一个 ajaxy 类型的基于 html 的应用程序框架，并希望谷歌分析能够使用它。 我相信我们已经正确设置了一些需要手动调用_trackPageview 。

然而，事情似乎没有得到报道。 现在，要么我无法正常工作，要么使用 url 上的file://协议从 javascript 进行 GA 跟踪默默地违反了一些我不知道的跨域策略。

那么 GA 是否通过file://与本地 html 一起使用？ 还是我的 GA 使用有问题？

请注意，我们使用的域实际上并不存在。 我们想使用类似移动应用程序跟踪的东西，但是来自 JavaScript 而不是本机库。 为了做到这一点，它看起来你设置了一个假域，并告诉跟踪器它应该报告为哪个域。

---

在我的<head>末尾：

<script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-XXXACCOUNTID-XX']);
  _gaq.push(['_setDomainName', 'myfake.domain.com']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = 'http://www.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
</script>

在我们的 JS 框架中，我们调用：

_gaq.push(['_trackPageview', '/some/path/here']);

Answer 1

Google 现在支持通过将其设置为 null 来禁用协议检查任务，从而允许您从file:// url 跟踪分析：

ga('create', 'UA-XXXXX-Y', 'auto');
ga('set', 'checkProtocolTask', null); // Disable file protocol checking.
ga('set', 'checkStorageTask', null); // Disable cookie storage checking.
ga('set', 'historyImportTask', null); // Disable history checking (requires reading from cookies).
ga('send', 'pageview');

Answer 2

需要进行一些调整：

禁用 cookie 存储

由于没有域在起作用，因此无法使用 Cookie，因此我们需要防止 GA 尝试使用它们。 这是通过在创建配置（ 文档）中设置'storage': 'none'来完成的。

禁用文件协议检查

默认情况下，如果协议（在我们的案例file ）不是http或https ，GA 将中止。 使用相应的任务禁用此检查： ga('set', 'checkProtocolTask', null)

手动设置活动页面

由于没有域，GA 无法导出表示活动页面的路径。 可以使用页面 URL 修改功能手动配置： ga('set', 'page', 'foobar')

随后的ga('send', 'pageview')将作为对/foobar的访问显示在数据中。

使用 localStorage 跟踪用户身份（可选）

禁用 cookie 后，不会跨页面加载跟踪用户，因此每次刷新都会触发对另一个唯一访问者的检测。 但是，我们可以通过设置'clientId': localStorage.getItem(someKey)在创建时提供自定义客户端 ID ，它会查找以前存储的客户端 ID。

存储 ids 是由

ga(function(tracker) {
  localStorage.setItem(someKey, tracker.get('clientId'));
})

一切结合

结合以上所有步骤，我们最终得到如下结果：

(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','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXXXXX-Y', {
    'storage': 'none',
    'clientId': localStorage.getItem('ga:clientId')
});
ga(function(tracker) {
    localStorage.setItem('ga:clientId', tracker.get('clientId'));
});
ga('set', 'checkProtocolTask', null);

ga('set', 'page', 'myPage');
ga('send', 'pageview');

Answer 3

好的，我想我已经解决了这个问题。 它已经困扰我几天了。

根据谷歌分析帮助中心，

访问者必须在其浏览器中启用 JavaScript、图像和 cookie，以便 Analytics 报告他们的访问。

这是我的理论：在我对 Mac OS X Snow Leopard 的测试中，从 file:// 运行的文档无法设置 cookie。 这是因为 cookie 是 HTTP 专有的，当您从 file:// 运行某些内容时，您没有使用 HTTP 协议。

由于您无法设置 cookie，ga.js 拒绝将 _utm.gif 请求发送到 Google 的服务器。 没有设置 cookie； 没有请求被发送到谷歌，所以在 GA 中没有记录任何内容。

解决方案：使用可以将域设置为http://localhost的开发环境（类似于 MAMP，如果您使用的是 Mac 并且需要 LAMP 堆栈）

（奇怪的脚注：我观察到一些奇怪的行为，其中 GA cookie 将设置为来自第三方非 CDN 域的无关导入脚本的域的第三方cookie。这可能是因为服务器发送带有文件的 HTTP cookie ，ga.js 将自己附加到该域。但是，这不会作为后门，因为它仍然不会将 _utm.gif 命中发送到 Google 的服务器）。

========

编辑：

您可以尝试人们为无 cookie GA 跟踪创建的各种变通方法之一。

您可能会从这个工具中获得一些成功： http : //code.google.com/p/google-analytics-js/downloads/list ，在此解释： http : //remysharp.com/2009/02/27/analytics -for-bookmarklets-injected-scripts/

您可以包含脚本，而不是所有 GA 代码，然后使用以下代码调用它：

gaTrack('UA-XXXACCOUNTID-XX', 'myfake.domain.com', '/some/path/here');

它专为书签/注入脚本跟踪而设计，但如果我放入 file:// 类型设置，它能够成功发送 __utm.gif 命中，这意味着它应该在 GA 中成功跟踪。

缺点是无 cookie 意味着它无法准确跟踪访问，只能跟踪页面查看级别的数据。

Answer 4

最终通过调整大小的黑客消息传递机制通过 iframe 进行了复杂的反弹。

本地文件在我们的服务器上包含一个 iframe。 当我们想要跟踪 GA 调用时，我们会使用我们需要的信息更改它的 url 哈希#_trackEvent,foo,bar ，然后更改 iframe 的宽度。 在 iframe 中， onresize()函数被触发并允许我们通过检查散列来提交 GA 调用。

尽管我讨厌这个黑客，但它完美无缺！

Answer 5

这是我的代码，它有效

<script>
function sendData()
{
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-148029185-2');

ga('create', 'UA-148029185-2', {
    'storage': 'none',
    'clientId': localStorage.getItem('ga:clientId')
});
ga(function(tracker) {
    localStorage.setItem('ga:clientId', tracker.get('clientId'));
});
ga('set', 'checkProtocolTask', null);

ga('set', 'page', '/xxxxxxxx');
ga('send', 'pageview');
}
</script>

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-148029185-2" onload="sendData()"></script>

Answer 6

除了重新调整Iframe的大小外，您可以使用onHashChange JS事件。

唯一的缺点是这种方法可在IE8 +上运行。 （没有IE6，IE7）。 它适用于其他浏览器，包括iOS和Android。