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

【问题标题】：Why do websites like Hotjar and Google Analytics use complex tracking code instead of just a <script> tag?为什么像 Hotjar 和 Google Analytics 这样的网站使用复杂的跟踪代码而不仅仅是 <script> 标签？
【发布时间】：2018-02-02 07:48:06
【问题描述】：

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

最后，这些脚本只是在页面的<head> 中添加了一个<script> 标签，所以他们这样做肯定是有原因的。

是因为绕过广告拦截的原因吗？生成的请求会不会和在<head> 中硬编码一样？

【问题讨论】：

标签： javascript google-analytics event-tracking hotjar

【解决方案1】：

我是 Hotjar 的首席架构师，所以我将解释我们采用这种特殊方式的原因。

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

h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(参数)};

该特定行允许我们存储要在加载主脚本后执行的操作。它允许在我们的脚本加载之前调用 hj('trackVirtualPageView', '/url') 之类的东西。

我们可以将设置等内容存储为 sn-p 的一部分。

h._hjSettings={hjid:9999,hjsv:5};

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

我们在最后一部分中所做的实际上只是创建了一个<script async=1> 标记并将其添加到<head> 中，效果非常好。我们通过 JS 来做这件事的原因是，我们希望通过只要求他们将代码放在一个地方来让用户尽可能简单地使用它。

可能会有更好的方法来做我们正在做的事情，但我很幸福地不知道，如果有的话，请联系我并告诉我！ :)

【讨论】：

我的代码似乎有点不同，它包含一个非同步的 XMLHttpRequest，这是因为您正在非异步加载新的异步脚本吗？
嘿@eKIK - 跑题了，但你知道为什么 Hotjar 注入脚本会在我的 Angular5 SPA 上每隔 30~ 毫秒不断重新加载主体附加的 iFrame (src="vars.hotjar.com/rcj-99d43ead6bdf30da8ed5ffcb4f17100c.html")？产生数千一分钟的请求，我不知所措:)
嗨@Xarus - 对此非常抱歉。我们确实在一段时间内遇到了一个错误，某些网站遇到了这个问题。应该可以解决 - 但如果不是您的情况，如果您可以转到 help.hotjar.com 并单击左下角右下角的小“帮助”按钮并给我们留言，我将不胜感激。如果它仍然发生，我们一定会帮助您找出解决方法！
嗨@eKIK，不用担心 - 您的支持团队回复我，让我知道情况；我们现在都很好，用户体验团队正在愉快地查看热图/记录等:)
@Brandito “同步”

【解决方案2】：

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

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

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

【讨论】：