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

标签 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>

最后,那些脚本只是添加一个 <script>标记到 <head>的页面,所以肯定有他们这样做的原因。

是为了绕过广告拦截的原因吗?生成的请求是否与在 <head> 中硬编码的请求相同? ?

最佳答案

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

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

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

该特定行允许我们存储在加载主脚本后要执行的操作。它允许在我们的脚本加载之前调用 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 来做的原因是我们希望通过只要求他们将代码放在一个地方来让我们的用户尽可能简单。

做我们正在做的事情可能会更好,但我很幸运地没有意识到,如果有,请联系我并告诉我! :)

关于javascript - 为什么像 Hotjar 和 Google Analytics 这样的网站使用复杂的跟踪代码而不是仅仅使用 &lt;script&gt; 标签?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45861427/

相关文章:

javascript - 我可以在我的 React 应用程序中查看 redux 操作的历史记录吗?

javascript - 将子 Prop 传递给 Gatsby V2 中的子组件

c# - Google Tag Manager 服务器端跟踪 .NET

google-analytics - 仅当href ='#'时才触发链接上的GA事件跟踪

java - 刷新时 Facebook SDK Android AppEventsLogger NullPointerException

javascript - 我的红色方 block 不会出现,因为 : "speedX and speedY aren' t defined"-console

javascript - 以编程方式触发 onclick 事件?

通过 Google Analytics 跟踪出站链接的 HTML 有效方法?

Android.Gms.Analytics.HitBuilders.AppViewBuilder 已过时

javascript - 带有下拉表单的动态按钮上事件跟踪的变量值