為什么像Hotjar和Google Analytics這樣的網站使用復雜的跟蹤代碼而不僅僅是<script>標記？

Question

使用JS跟蹤的網站通常使用這種代碼：

 <script> (function(h,o,t,j,a,r){ h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)}; h._hjSettings={hjid:9999,hjsv:5}; a=o.getElementsByTagName('head')[0]; r=o.createElement('script');r.async=1; r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv; a.appendChild(r); })(window,document,'//static.hotjar.com/c/hotjar-','.js?sv='); </script>

最后，這些腳本只是將<script>標簽添加到頁面的<head>中，所以肯定必須有這樣一個原因，即他們這樣做。

它是否適用於廣告屏蔽旁路的原因？ 生成的請求不會像在<head>硬編碼一樣嗎？

Answer 1

我是Hotjar的首席架構師，所以我將解釋為什么我們以這種特殊的方式做到這一點。

我們需要在加載主腳本之前做一些事情。
h.hj = h.hj ||函數（）{。（h.hj.q = h.hj.q || []）推（參數）};

該特定行允許我們在加載主腳本后存儲要執行的操作。 它允許在我們的腳本加載之前調用hj（'trackVirtualPageView'，'/ url'）之類的東西。

我們可以將設置之類的內容存儲為代碼段的一部分。
h._hjSettings = {hjid：9999，hjsv：5};

在加載腳本時，這絕對可以作為查詢字符串的一部分添加。 使用這種方法的缺點是我們會得到不太優化的緩存，因為瀏覽器不可能知道script.js？hjid = 1和script.js？hjid = 2實際上加載了相同的JS文件。

我們在最后一部分中所做的實際上只是創建一個<script async=1>標記並將其添加到<head> ，這非常有效。 我們之所以通過JS這樣做是因為我們希望讓用戶盡可能簡單地讓代碼放在一個地方。

可能會有更好的做我們正在做的事情，我很幸福沒有意識到，如果有，請聯系並告訴我它！ :)

Answer 2

至少部分答案是供應商希望以不阻止頁面呈現的方式加載庫。

如果瀏覽器遇到腳本元素，它會嘗試獲取腳本源，並可能會阻止頁面呈現，直到下載完整的腳本。 在過去的糟糕時期過去，網站會顯示空白，因為無法及時下載（然后是同步的）Google Analytics腳本並停止呈現頁面。 腳本注入成為使腳本無阻塞的可接受方法。

還有其他方法（defer，asynch等 - 為了歷史的興趣，這里有一篇關於討論該問題的2009年文章的鏈接，因為問題是舊的），但腳本注入是一種方便的方法來設置一些變量沿着方式（如果谷歌這樣做，它必須是最好的方式，或者似乎是與某些公司合作的過程）。

為什么像Hotjar和Google Analytics這樣的網站使用復雜的跟蹤代碼而不僅僅是<script>標記？

問題描述

2 個解決方案

解決方案1
5 2017-08-26 22:22:03

解決方案2
1 2017-08-24 14:27:49

為什么像Hotjar和Google Analytics這樣的網站使用復雜的跟蹤代碼而不僅僅是<script>標記？

問題描述

2 個解決方案

解決方案1 5 2017-08-26 22:22:03

解決方案2 1 2017-08-24 14:27:49

解決方案1
5 2017-08-26 22:22:03

解決方案2
1 2017-08-24 14:27:49