javascript - 具有 HTML5 异步属性和协议(protocol)相关 URL 的 Google Analytics JavaScript 跟踪代码

Question

以下是 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>

使用协议(protocol)相关 URL，我们可以避免检查 location.protocol，并且 async 属性应该负责 modern browsers 中的不显眼加载。 ，并且会在其他方面优雅地降级。

这样不是更好吗？

Answer 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 注入(inject)方法的问题在于，script[async] 并不是注入(inject)的唯一机制被设为异步。在旧版浏览器中，即使没有 script[async] 支持，基于 JS 的注入(inject)也可能导致异步注入(inject)。

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

(注意:协议(protocol)相对 URL 在此有效，因为 https://www.google-analytics.com/ga.js 已由 Google 设置为有效。)