为什么像Hotjar和Google Analytics(分析)这样的网站使用复杂的跟踪代码,而不仅仅是<script>标签?

Oli*_*nay 3 javascript google-analytics event-tracking hotjar

使用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>
Run Code Online (Sandbox Code Playgroud)

最后,这些脚本只是在页面的<script>标签中添加了一个标记<head>,因此,肯定有一定理由要这样做。

是出于广告屏蔽绕过的原因吗?生成的请求与在硬编码中的请求不同<head>吗?

小智 6

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

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

    h.hj = h.hj || function(){(h.hj.q = h.hj.q || [])。push(arguments)};

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

  1. 我们可以将诸如设置之类的内容存储为代码段的一部分。

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

加载脚本时,可以绝对将其添加为查询字符串的一部分。使用该方法的缺点是,由于浏览器无法知道script.js?hjid = 1和script.js?hjid = 2实际上加载了相同的JS文件,因此我们无法获得最佳的缓存。

  1. 实际上,我们在最后一部分所做的只是创建一个<script async=1>标签并将其添加到<head>效果很好的标签中。我们通过JS执行此操作的原因是,我们希望通过仅要求用户将代码放在一个位置来使其尽可能地易于使用。

可能有更好的方法来做我们正在做的事情,而这些事情我很高兴地没意识到,如果有的话,请伸手告诉我!:)