具有 HTML5 异步属性和协议相关 URL 的 Google Analytics JavaScript 跟踪代码答案

【问题标题】：Google Analytics JavaScript tracking code with the HTML5 async attribute and a protocol-relative URL具有 HTML5 异步属性和协议相关 URL 的 Google Analytics JavaScript 跟踪代码
【发布时间】：2023-04-01 18:31:01
【问题描述】：

这是 Google 的异步分析跟踪代码：

<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-XXXXX-Y']);
  _gaq.push(['_trackPageview']);

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

如果你问我这很丑陋。它可以浓缩成这样（来源：Mathias）：

<script>
  var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
  (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
  g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
  s.parentNode.insertBefore(g,s)}(document,'script'));
</script>

但是为什么我们不能只使用 HTML5 的 async 属性和 protocol-relative URL 呢？

<script src="//www.google-analytics.com/ga.js" async></script>
<script>var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];</script>

使用相对于协议的 URL，我们不必检查 location.protocol，async 属性应该负责 modern browsers 中的不显眼加载，并且会在其他地方优雅地降级。

这样不是更好吗？

【问题讨论】：

标签： javascript html asynchronous google-analytics lazy-loading

【解决方案1】：

你可以这样做：

<script src="//www.google-analytics.com/ga.js" async></script>
<script>var _gaq= _gaq || [];
_gaq.push(['_setAccount','UA-XXXXX-X'],['_trackPageview']);
</script>

任何更短的内容都会有覆盖ga.js 加载的_gaq 的风险，特别是GA 覆盖的_gaq.push 函数。

硬编码script[async]而不是使用DOM注入方法的问题在于script[async]不是使注入异步的唯一机制。在较旧的浏览器中，即使没有 script[async] 支持，基于 JS 的注入也会导致异步注入。

不过，上面的代码应该可以在所有浏览器中运行，但ga.js 会在旧浏览器上被阻止。节省的额外字节不值得性能损失，但如果这样做，则应将脚本放在页脚中。

（注意：协议相对 URL 在这里可以使用，因为 https://www.google-analytics.com/ga.js 已由 Google 设置为可以使用。）

【讨论】：

请注意，这里单独进行协议检查并不是一个好主意。对于 SSL，子域也会发生变化。
我确实试过了，似乎https://ssl.google-analytics.com/ga.js 和https://www.google-analytics.com/ga.js 都可以。
@EduardoCereto 是的，有一段时间没有https://www 服务，但他们（默默地？）大约一年前添加了它。

【解决方案2】：

请注意，虽然 async 标记对于现代兼容的浏览器来说已经足够了，但它对旧的不兼容的浏览器不起作用。当然，它们会优雅地退化。但是它们完全不是异步的，只是忽略了 async 属性而降级。另一方面，如果您像他们使用的那样使用动态插入，则会使不兼容的浏览器表现得更像是异步的。

另一个重要的一点是，如果您只是重新定义 _gaq 对象，如果之前已加载 ga.js 文件，则可能会导致问题。大多数情况下不应该发生这种情况，但有些网站由于各种原因或只是错误地多次包含该标签，这就是为什么保留_gaq = _gaq || [] 逻辑是个好主意。

Google 分析的目标不是漂亮，它是跨浏览器，不仅仅是因为它可以优雅地降级，而且还因为它尽可能在所有浏览器上以完全相同的方式工作。如果它在每个浏览器上的工作方式略有不同，它可能会扭曲一个浏览器的指标，这是你不想要的。数据分析的第一条黄金法则是数据一致性。即使这意味着你需要支持 ie5.5 for Mac。

【讨论】：

【解决方案3】：

假设异步被忽略，我在旧浏览器中看到了这种情况。

通过使脚本内联，非异步浏览器会立即下载并执行它。此时，它将解析 _gaq，它到目前为止是一个数组，并执行存储的命令。然后它重写 push 方法，并继续使用它作为执行请求的函数（例如 _trackEvent）。

因此，通过同步获取脚本，然后将 _gaq 定义为数组，您将覆盖 Google 对 _gaq 所做的更改，并且会阻止页面浏览量被跟踪。

【讨论】：