js页面加载完成后执行 揭开JS无埋点技术的神秘面纱

..io/2018/06/24/揭开JS非埋点技术的神秘面纱/

一、背景

相信很多人都接触过“埋点”这个概念。 无论是前端开发还是后端开发，我们都可以利用这种技术产生一些操作性的原始数据（界面耗时、程序安装/启动、用户交互行为等），然后对其进行分析，得到一些抽象指标（如留存率、转化率），进而确定产品运营或代码优化的方向。 现在有很多业内知名的数据平台，比如，Pixel, ,诸葛IO,神策数据等等，大票数不胜数。 这些平台有的纯粹是为了数据分析，有的服务于广告监测、转化等特定领域。 它们都提供了多端（iOS、Web、小程序、）埋点SDK和比较完善的BI服务。 近两年，不少平台开始推广一种叫做“无埋点”的技术。 下面以Web端为例来揭开它的神秘面纱。

二、什么是无埋点？

国外一些平台上号称“无埋点”。 顾名思义，它可以写出“更少”的埋点代码。 而“代码埋点”一般需要开发者编写代码，监听某个html元素产生的事件，然后调用上报数据的接口发送数据。 非埋点可以由非技术人员（如运营、产品）在可视化工具中进行配置，然后将html元素中产生的行为上报到后台。 下面是平台可视化工具的屏幕截图。

在此工具中，您需要先输入页面的 url。 页面加载完成后，会出现一个可视化配置的工具栏。 点击 Event进入元素选择模式，用鼠标点击页面上的一个元素（例如a），在弹出的对话框中设置事件的名称（例如TEST）。 保存此配置后，如果在浏览器中浏览页面，点击刚才配置的按钮时，会向后台上报一个TEST事件。 我们也可以在上报TEST事件的时候设置一些属性()。 这些属性也是在页面上用鼠标选中然后保存的。

看到这里，首先从产品层面，我们对“无埋点”的作用有了更具体的认识。 无埋点就是利用可视化工具在页面上配置需要监控的元素，并设置该元素行为时需要上报的数据。 但是还有一个非常重要的点必须要提到。 要让“无埋点”发挥作用，需要在页面中嵌入一段JS SDK的基础代码，但不需要调用SDK具体的数据上报接口。

因此，“无埋点”技术的关键在于：

下面介绍如何实现这两个键。

三、关键技术 1、基本代码

和代码埋点一样，要让“无埋点”发挥作用，网页中也必须有一段“基础代码”。

<script type="text/javascript">(function(e,a){if(!a.__SV){var b=window;try{var c,l,i,j=b.location,g=j.hash;c=function(a,b){return(l=a.match(RegExp(b+"=([^&]*)")))?l[1]:null};g&&c(g,"state")&&(i=JSON.parse(decodeURIComponent(c(g,"state"))),"mpeditor"===i.action&&(b.sessionStorage.setItem("_mpcehash",g),history.replaceState(i.desiredHash||"",e.title,j.pathname+j.search)))}catch(m){}var k,h;window.mixpanel=a;a._i=[];a.init=function(b,c,f){function e(b,a){var c=a.split(".");2==c.length&&(b=b[c[0]],a=c[1]);b[a]=function(){b.push([a].concat(Array.prototype.slice.call(arguments,
0)))}}var d=a;"undefined"!==typeof f?d=a[f]=[]:f="mixpanel";d.people=d.people||[];d.toString=function(b){var a="mixpanel";"mixpanel"!==f&&(a+="."+f);b||(a+=" (stub)");return a};d.people.toString=function(){return d.toString(1)+".people (stub)"};k="disable time_event track track_pageview track_links track_forms register register_once alias unregister identify name_tag set_config reset opt_in_tracking opt_out_tracking has_opted_in_tracking has_opted_out_tracking clear_opt_in_out_tracking people.set people.set_once people.unset people.increment people.append people.union people.track_charge people.clear_charges people.delete_user".split(" ");
for(h=0;h<k.length;h++)e(d,k[h]);a._i.push([b,c,f])};a.__SV=1.2;b=e.createElement("script");b.type="text/javascript";b.async=!0;b.src="undefined"!==typeof MIXPANEL_CUSTOM_LIB_URL?MIXPANEL_CUSTOM_LIB_URL:"file:"===e.location.protocol&&"//cdn4.mxpnl.com/libs/mixpanel-2-latest.min.js".match(/^///)?"https://cdn4.mxpnl.com/libs/mixpanel-2-latest.min.js":"//cdn4.mxpnl.com/libs/mixpanel-2-latest.min.js";c=e.getElementsByTagName("script")[0];c.parentNode.insertBefore(b,c)}})(document,window.mixpanel||[]);
mixpanel.init("46042714e64a7536dde6f02af1aec923");script>

以上是平台的基本代码。 不同平台的基本代码是相似的。 都是IIFE形式的压缩js代码。 执行完成后，在head中插入一个新的tag，异步下载真正的tag。 核心 SDK 代码正常运行。 所以，并不是基础代码可以根据配置上报行为，而是基础代码会下载一个“更大”的SDK核心代码，这才是SDK真正的功能实现。

这样做的好处是基础代码很短，加载时不会影响网页的性能，而且核心SDK代码的更新不需要用户去更新这个基础代码。

2.页面的唯一标识

在配置元素行为时，需要唯一标识一个页面，以保证页面A的配置不会发送到页面B，不会导致页面B产生页面A配置的行为。在Web中，该页面由 url 标识。 url由,,端口,路径和参数组成。 存储配置时，必须将url的参数提取出来重新存储。 url的参数位置是可以改变的，比如urlA()和urlB()，虽然urlA !== urlB，但实际上都是一个页面。

3.元素的唯一ID

唯一标识页面后，接下来就是对页面中的元素进行唯一标识，保证A页面中配置的元素A1能够被SDK找到，从而监听其产生的事件。

在 html 中，元素是由 DOM 树组织的。 如果从元素A1开始，记录它的索引和它的索引，一直到根节点body，就可以得到元素A1在DOM Tree中的唯一路径。

HTML元素也有很多属性，比如css class和id，可以用来定位元素。 通过开发者工具可以看到的可视化工具，在配置元素时使用了这个库生成的唯一标识符。 而上面还有这样一个库，它也可以为.net中的元素生成唯一标识。

另外，有些平台在识别元素时使用xpath，也是一种思路。

4.如何查找元素

上面说过，一个元素可以有唯一标识，所以有了唯一标识，就可以利用它的原理来找到这个元素。 一个非常有用的API是.()，它可以根据CSS选择器找到对应的元素。 另外，根据元素的标识方式，还可以使用.(),.()实现元素的查找。

这里需要强调的是，如果配置完成后修改页面，导致DOM Tree发生变化，此时被监控元素的唯一标识也可能发生变化。 很可能按照之前的配置找不到元素，或者找到的元素不是我们要监控的元素，导致产生的事件数量发生明显变化。 为了数据的稳定性和准确性，应该有相应的监控告警来处理这种情况，并提示用户重新配置页面。 个人认为这是无埋点最大的缺点。

5、标记元素时实现高亮效果和视觉交互

这是一个更详细的点。 其实熟悉js的都知道，有无数种方法可以实现鼠标移到元素上时的hover-like效果。 单击该元素后，会弹出一个对话框js页面加载完成后执行，让用户输入配置信息。 太简单。 但是我想说的是，一旦我们通过向页面动态添加元素的方式来实现可视化工具的交互界面，可能会破坏页面原有的DOM Tree结构。 导致生成元素的唯一标识时出错，所以这里要小心处理，保证生成的元素标识不受影响。

看到可视化工具的所有功能都是用自定义Web实现的。 虽然目前只支持Web，但确实有点别扭。 . 此类自定义元素和交互不会影响用户的网页 DOM。 当然，如果你的可视化工具实现的很轻，比如只是把用户的网页放在一个里面，把大部分的交互交给页面处理，那么你也可以在配置的时候把对用户网页的伤害降到最低。 向上。

6、如何在配置工具中控制页面跳转

当进入可视化配置状态时，我们可以让用户点击某个元素，然后弹出一个对话框让用户对元素进行配置。 此时，如果元素本身的点击行为是页面跳转呢？ 我们应该如何处理呢？

这本质上是一个交互设计的问题。 在可视化配置工具中，应该有两个基本的交互操作。 一种是允许用户选择一个元素并对其进行配置； 另一种是允许用户触发页面的原始行为。

为什么会有二次互动？ 因为我们的工具必须支持用户可视化配置二级页面，对吧？ 也就是说，在用户的页面上可能会弹出一个对话框，对话框中有一个按钮。 用户需要监控这个按钮并配置它，对吗？ 简单的说就是用户页面原有的点击行为，可能导致页面结构发生变化，比如页面跳转、弹出对话框等。

那么问题就很容易解决了。 除了点击之外，最好设计一个交互来支持用户网页中的原始点击行为。 您可以使用“右键单击”或“按住 Shift + 单击”。 反正就是不要用默认的网页方式交互，容易冲突。

最后再提一下。 之前想了很久，怎么让用户点击的时候页面不跳转。 后来才知道DOM事件流分为捕获、目标、冒泡三个阶段。 所以为了防止用户点击跳转页面，在阶段增加一个拦截这个事件的继续分发。

一个简单的示例代码如下：

document.addEventListener('click', e => {
  // 如果是按住shift的点击，那么保持原有的行为
  if (e.shiftKey) {
    return;
  }
  // 如果是单纯的点击，那么拦截分发
  e.preventDefault();
  e.stopImmediatePropagation();
  // 获取元素的唯一标识，然后让用户进行配置等等
  this._selectElement(e.target);
}, true); // useCapture必须为true

四。 概括

由此可见，“无埋点”并不是零入侵，用户网页中仍然需要加载SDK代码（除非你是浏览器厂商，加载网页时可以在网页中添加基础代码）。 只是每个行为事件的上报代码不需要开发者手动编写，而是由运维人员用可视化工具配置，所以称其为“可视化埋点”或许更合适。 我们知道，数据收集是数据分析的基础和前提。 数据收集不好，其他的都是空中楼阁。

这里我们可以总结一下“无埋点”技术的优缺点。 无埋点的优点是技术成本低，非常人性化，而且不需要重新部署，配置完成后即可生效。 但是，它的缺点也非常明显。 它不具备代码嵌入的灵活性和深度。 它只能采集用户可见的数据，不能获取内存中的数据。 同时不能适应页面结构的变化。 因此，在实际生产中，要有选择性地在合适的地方采用无埋点技术。

多说说产品设计和技术方案的选择，产品能不能支持内存数据的采集？ 当然有可能。 比如微信小程序的“自定义分析”可以支持上报页面数据下的属性。 虽然此时也是可视化配置，但是操作者肯定不会知道代码中的变量名，开发者必须参与。 配置就行了。 关于页面结构改变后数据丢失，也有解决办法可以破解。 例如，平台实际上会收集并上报页面中所有页面的点击事件，然后根据用户的配置在后台计算转化次数。 这样做的好处是，如果用户在页面变化后收到告警修改配置，那么数据上报方案就满了，所以平台有能力追溯过去的数据。 上面我们提到的解决方案是根据配置进行分发，找到并监控指定的元素，然后上报数据。 是按需报告，数据错误无法追溯。 但是js页面加载完成后执行，谁都知道，把数据全报出来，太不友好了。 数据量过大，不仅消耗了前端大量的资源，而且增加了后台数据回溯的存储压力，而且大部分存储的数据还是无效的。 这个成本有点高。

5. 参考资料

JS埋点技术浅析

【关于投稿】

如果您有原创的好文章投稿，请直接给公众号留言。

①消息格式：

【投稿】+“文章标题”+文章链接

② 例子：

【投稿】《别自称程序员，我十几年的IT职场总结》：

③最后，请附上你的个人简介~

觉得这篇文章对您有帮助？请分享给更多的人

关注《前端百科全书》，提升前端技能