与HTML5异步属性和相对协议网址

这里谷歌分析JavaScript跟踪代码是谷歌的异步Analytics跟踪代码：与HTML5异步属性和相对协议网址

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

有了让我们避免以检查location.protocol相对协议网址，并async属性应该照顾不显眼装载在modern browsers，和其他人将优雅降级。

这不是更好吗？

来源

2012-05-09 Web_Designer

你可以这样做：

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

任何短，你的风险覆盖_gaq是ga.js负荷，特别是GA覆盖_gaq.push功能。

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

但是，上述代码应该适用于所有浏览器，但ga.js将在较旧的浏览器上阻止。保存的额外字节不值得提高性能，但如果你这样做，你应该把脚本放在页脚中。

（注：协议相对URL将在这里工作，因为https://www.google-analytics.com/ga.js已设置由谷歌来工作。）

来源

2012-05-09 21:04:31 Yahel

请注意，这里的协议检查不是一个好主意。对于SSL，子域也会更改。 – Eduardo

我实实在在地尝试了它，它似乎既是'https：// ssl.google-analytics.com/ga.js'和'https：// www.google-analytics.com/ga.js'。 – Eduardo

@EduardoCereto是的，有一段时间，没有'https：// www'服务，但他们（默默地？）在一年前添加了它。 – Yahel

我认为这在以前的浏览器中突破，假设异步被忽略。

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

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

来源

2012-05-09 19:30:17

注意，而异步标签将现代兼容的浏览器足够它不会做的伎俩老不兼容的浏览器。当然，他们优雅地退化。但是它们由于不是异步而降级，只是忽略了异步属性。另一方面，如果您使用动态插入，则会导致不兼容的浏览器表现得非常像异步。

另一个重要的问题是，如果你只是重新定义_gaq对象，它可能会导致问题，如果ga.js文件已被加载。它不应该发生在大多数情况下，但是有些网站最终会因为各种原因或者错误而多次包含标签，这就是为什么保持逻辑的一个好主意。

谷歌分析的目标不是很漂亮，而是跨浏览器，不仅仅是从优雅的角度降低，而且在所有浏览器上尽可能以完全相同的方式进行。如果它在每个浏览器上以稍微不同的方式工作，它可能会歪曲一个浏览器的指标，这是您不想要的。数据分析的第一条金科玉律是数据一致性。即使这意味着您需要为Mac支持ie5.5。

来源

2012-05-10 04:03:43 Eduardo

与HTML5异步属性和相对协议网址

回答

相关问题