與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異步屬性和相對協議網址

回答

相關問題