Heap Analytics的脚本代码是做什么用的？

Question

所以Heap Analytics要求我把这段代码粘贴进去才能使用他们的产品 -

<script type="text/javascript">
  window.heap=window.heap||[];heap.load=function(a){window._heapid=a;var b=document.createElement("script");b.type="text/javascript",b.async=!0,b.src=("https:"===document.location.protocol?"https:":"http:")+"//cdn.heapanalytics.com/js/heap.js";var c=document.getElementsByTagName("script")[0];c.parentNode.insertBefore(b,c);var d=function(a){return function(){heap.push([a].concat(Array.prototype.slice.call(arguments,0)))}},e=["identify","track"];for(var f=0;f<e.length;f++)heap[e[f]]=d(e[f])};
  heap.load("YOUR_APP_ID");
</script>

这段代码的作用是什么？（除了应用程序id的所有内容）

我在开源 analytics.js 中找到了类似的内容。

<script type="text/javascript">
window.analytics||(window.analytics=[]),window.analytics.methods=["identify","track","trackLink","trackForm","trackClick","trackSubmit","page","pageview","ab","alias","ready","group","on","once","off"],window.analytics.factory=function(t){return function(){var a=Array.prototype.slice.call(arguments);return a.unshift(t),window.analytics.push(a),window.analytics}};for(var i=0;i<window.analytics.methods.length;i++){var method=window.analytics.methods[i];window.analytics[method]=window.analytics.factory(method)}window.analytics.load=function(t){var a=document.createElement("script");a.type="text/javascript",a.async=!0,a.src=("https:"===document.location.protocol?"https://":"http://")+"d2dq2ahtl5zl1z.cloudfront.net/analytics.js/v1/"+t+"/analytics.min.js";var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(a,n)},window.analytics.SNIPPET_VERSION="2.0.8",
window.analytics.load("YOUR_WRITE_KEY");
window.analytics.page();
</script>

这是在做类似的事情吗？（乍一看像是这样）

- praks5432

---

像 http://jsbeautifier.org/ 这样的工具可以帮助澄清一些类似这样的谜团。 - Scott Sauyet

Answer 1

以下是截至2021年5月的代码片段：

window.heap = window.heap || [], heap.load = function (e, t) {
  window.heap.appid = e, window.heap.config = t = t || {};
  var r = document.createElement("script");
  r.type = "text/javascript", r.async = true, r.src = "https://cdn.heapanalytics.com/js/heap-" + e + ".js";
  var a = document.getElementsByTagName("script")[0];
  a.parentNode.insertBefore(r, a);
  for (var n = function (e) {
    return function () {
      heap.push([e].concat(Array.prototype.slice.call(arguments, 0)));
    };
  }, p = ["addEventProperties", "addUserProperties", "clearEventProperties", "identify", "resetIdentity", "removeEventProperty", "setEventProperties", "track", "unsetEventProperty"], o = 0; o < p.length; o++) heap[p[o]] = n(p[o]);
};

heap.load("YOUR_APP_ID");

首先，它定义了一个全局的heap对象。

然后它定义了一个heap.load方法。heap.load首先将你的应用程序ID e和选项t设置为以后使用的window.heap对象。

接下来，它创建一个新的脚本元素来加载heap.js跟踪脚本。heap.js向Heap发送事件数据。

在heap.js开始加载后，heap.load存根以下方法，以便它们可以在heap.js完成加载之前调用：

heap.addEventProperties
heap.addUserProperties
heap.clearEventProperties
heap.identify
heap.resetIdentity
heap.removeEventProperty
heap.setEventProperties
heap.track
heap.unsetEventProperty

最后，脚本会使用您的应用程序 ID 调用之前定义的 heap.load。 :)

您可以在Heap 的开发者文档中了解更多信息。

- drewinglis

Answer 2

它会在页面上打印一个内联的Javascript调用，引用、加载并初始化外部站点的分析跟踪脚本，并使用特定于您的网站的参数（如跟踪选项和ID）。

- Ennui

---

啊，好的 - 那第二个脚本也是在做同样的事情吗？还是实际上添加了事件处理程序？ - praks5432

在我看来，它似乎是定义要跟踪的自定义事件，或者至少是初始化它们。值得注意的是，以这种方式注入脚本（而不仅仅是按照通常的方式引用外部脚本）允许它异步加载，并且是协议无关的（因此您不必担心 http vs https）。 - Ennui