从 file:// url 使用 Google Analytics

Question

从 file:// url 使用 Google Analytics

javascriptgoogle-analyticscross-domain

18

我们有一个基于HTML的AJAX应用程序框架，并希望与Google Analytics集成。我认为我们已经正确设置了需要手动调用_trackPageview的位置。

然而，似乎没有报告任何数据。现在可能是我没有设置正确，或者使用file://协议的javascript跟踪违反了某些我不知道的跨域策略。

那么，GA是否适用于本地HTML（通过file://）？还是我的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']);

- Alex Wayne

我没有看到任何提示信息表明script标签在file://资源上的工作方式有所不同。（在此处进行了检查[https://developer.mozilla.org/En/Same-origin_policy_for_file:_URIs]，以及其他地方）但也许是Google Analytics阻止了这个？ - Pekka

在我的情况下，这主要是由 WebKit 引擎驱动的浏览器。 - Alex Wayne

没有任何输出。但我可以告诉你，_gaq 是一个对象，看起来是由 Google Analytics 加载的，有大量的函数，包括 push()。 - Alex Wayne

你是否已经查看了GA的域名和目录设置？ - Marcel Korpel

你能发布与_utm.gif请求附加的查询字符串吗？如果我们能看到请求被记录下来的方式，调试会更容易些。 - Yahel

显示剩余2条评论

5个回答

9

需要进行一些微调：

禁用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的方法如下：

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

- Cedric Reichenbach

1

使用gtag可以实现这个吗？ - Naruto26

1

@Naruto26，你找到跳过使用gtag检查协议的方法了吗？由于新的GA4和其新属性G-xxxxxxx，似乎不可能实现。GA4不再使用analytics.js和ga()，而是只使用gtag.js + gtag()。 - mikep

@Naruto26 目前在GA4中还无法实现，谷歌对于3年前的主要bug报告漠不关心。祝你好运。 - igorsantos07

3

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

根据Google Analytics帮助中心，

访问者必须在他们的浏览器中启用JavaScript、图像和Cookie才能使Analytics报告他们的访问。

我的理论是：在Mac OS X Snow Leopard上进行的文件运行测试中，无法设置cookies。这是因为cookie专属于HTTP协议，而在file://下运行时，您并没有使用HTTP协议。

由于您无法设置cookies，ga.js会拒绝向Google的服务器发送_utm.gif请求。没有设置cookie，也没有向Google发送请求，因此GA中没有记录任何内容。

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

（奇怪的脚注：我观察到一些奇怪的行为，即GA cookies会设置为来自不相关的第三方非CDN域的导入脚本的域的第三方cookie。这可能是因为由于服务器随文件发送HTTP cookies，ga.js会将自己附加到该域。但是，这不会成为后门，因为仍然不会向Google的服务器发送_utm.gif请求）。

========

编辑：

您可以尝试创建用于无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意味着它将无法准确地跟踪访问，只能提供页面级别的数据。

- Yahel

我明白了。显然，为 file:// 设置 cookie 会很奇怪，因为没有域名。但在我的情况下，运行本地服务器并不真正起作用。我猜我不能通过 JS 使用它，真遗憾。 - Alex Wayne

访问者必须在其浏览器中启用JavaScript、图像和Cookie，以便分析报告其访问。是的，我同意Google告诉每个人添加到其页面的JavaScript脚本至少需要浏览器支持JavaScript。 - Armen Michaeli

1

最终通过iframe和resize hack消息传递机制实现了复杂的反弹。

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

尽管我非常讨厌这个hack，但它运行得非常完美！

- Alex Wayne

无法使其正常工作。Google Analytics 需要 cookies，即使您通过 http 协议的 iframe 加载页面，GA 仍然必须在某个地方设置 cookie。它唯一能够这样做的地方是在您的计算机上，但由于该页面最终仍然在 file:// 上，因此它无法这样做。 - ehynds

@ehynds 不对。当file：// URL有一个指向http：//someotherserver.com/analytics.html的iframe时，该服务器可以为该域设置cookie。 file：// url无法直接读取这些cookie，但在该iframe中运行的JS可以。而file：// url JS可以发送消息到该iframe，这就是它能够工作的原理。尽管如此，这种解决方案仍然不好。 - Alex Wayne

没错 - 但是 ga.js 设置 cookies，而不是服务器。当调用 __utm.gif 时，ga.js 会读取 cookies 并在 utmcc 参数中传递它们。使用您的方法，我看到 __utm.gif 文件的请求正在进行，但是 utmcc 参数为空，并且根据 Google 的说法，这是一个必填字段。 (http://code.google.com/apis/analytics/docs/tracking/gaTrackingTroubleshooting.html#basicDebugging) - ehynds

-1

这是我的代码，它可以运行

<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>

- thingswell

2

你找到跳过使用 gtag 进行新 GA4 属性的协议检查的方法了吗？对于新的 GA4 和它的新属性 G-xxxxxxx，似乎不可能。GA4 不再使用 analytics.js 和 ga()，而是仅使用 gtag.js + gtag()。在这里 https://www.google-analytics.com/analytics.js 中有 checkProtocolTask，但在这里 https://www.googletagmanager.com/gtag/js 中没有。 - mikep

这是我的代码，它能工作。 - 不，它不能工作 - igorsantos07

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jim Geurts · Accepted Answer

现在谷歌支持通过将其设置为 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');