Question

使用JS跟踪的网站通常使用这种代码：

＆＃xA;＆＃xA;

＆＃xD;＆＃xA;

 ＆lt; script＆gt;＆＃xD;＆＃xA; （function（h，o，t，j，a，r）{＆＃xD;＆＃xA; h.hj = h.hj || function（）{（h.hj.q = h.hj.q | | []）。push（arguments）};＆＃xD;＆＃xA; h._hjSettings = {hjid：9999，hjsv：5};＆＃xD;＆＃xA; a = o.getElementsByTagName（'head' ）[0];＆＃xD;＆＃xA; r = o.createElement（'script'）; r.async = 1;＆＃xD;＆＃xA; r.src = t + h._hjSettings.hjid + j + h._hjSettings.hjsv;＆＃xD;＆＃xA; a.appendChild（r）;＆＃xD;＆＃xA;}）（window，document，'// static.hotjar.com/c/hotjar - ”， 'JS SV ='）;？＆＃的xD;＆＃XA;＆LT; /脚本＆GT;

＆＃的xD;＆＃XA;

＆＃的xD;＆ #xA;

＆＃xD;＆＃xA; 
＆＃xA;＆＃xA; 最后，这些脚本只需添加＆lt; script＆gt; 标记到页面的＆lt; head＆gt; ，所以肯定必须有这样做的原因。
＆＃xA;＆＃xA; 是它是出于广告拦截旁路的原因吗？生成的请求是否与＆lt; head＆gt; 中的硬编码相同？＆＃xA;

Answer 1

我是Hotjar的首席架构师，所以我将解释为什么我们以这种特殊的方式做到这一点。

我们需要在加载主脚本之前做一些事情。

h.hj = h.hj ||函数（）{（h.hj.q = h.hj.q || []）推（参数）。};

该特定行允许我们存储在加载主脚本后执行的操作。它允许在加载脚本之前调用hj（＆＃39; trackVirtualPageView＆＃39; /＃39; / url＆＃39;）之类的内容。

我们可以将设置等内容存储为代码段的一部分。

h._hjSettings = {hjid：9999，hjsv：5};

在加载脚本时，这绝对可以作为查询字符串的一部分添加。使用这种方法的缺点是我们会得到不太优化的缓存，因为浏览器不可能知道script.js？hjid = 1和script.js？hjid = 2实际上加载了相同的JS文件。

我们在最后一部分所做的事实上只是创建一个<script async=1>标记并将其添加到<head>，这非常有效。我们之所以通过JS做这件事，是因为我们希望让用户尽可能简单地让代码放在一个地方。

我可能会做一些更好的事情，我很幸福没有意识到这一点，如果有的话，请联系并告诉我这件事！：）

Answer 2

至少部分答案是供应商希望以不阻止页面呈现的方式加载库。

如果浏览器遇到脚本元素，它会尝试获取脚本源，并可能会阻止页面呈现，直到下载完整的脚本。在过去的糟糕时期过去，网站会显示空白，因为无法及时下载（然后是同步的）Google Analytics脚本并停止呈现页面。脚本注入成为使脚本无阻塞的公认方法。

还有其他方法（推迟，asynch等 - for historical interest here is a link to an 2009 article that discusses the issue，因为问题是旧的），但脚本注入是一种方便的方式来设置一些变量（如果谷歌这样做的话）它必须是最好的方式，或者似乎是与某些公司合作的过程。）

为什么像Hotjar和Google Analytics这样的网站使用复杂的跟踪代码而不仅仅是<script>标记？

2 个答案: