Web曝光埋点实现原理

主要用到的API

MutationObserver

MutationObserver 主要提供了DOM节点增减以及属性变化检测的能力。从下图可看出大部分浏览器对该API支持良好。

兼容性.png

demo源代码：https://stackblitz.com/edit/js-ew1sn1?file=index.js
demo效果：https://js-ew1sn1.stackblitz.io/

在demo中，当点击 add dom 和 remove dom 按钮时，改变了DOM的结构，当点击 change target attribute 按钮时，改变了DOM的属性值，都会触发 callback。callback 中可以获取到 mutation 对象，比较主要的字段：

• type：改变的类型，childList、attributes
• addedNodes：增加的DOM
• removedNodes：移除的DOM
• target：DOM

IntersectionObserver

IntersectionObserver 主要用来检测被监听的目标元素可见部分与root元素的交叉状况，比如获取相交区域的比例值，后面做曝光埋点的判断需要用到。还可以获取其它信息，https://developer.mozilla.org/zh-CN/docs/Web/API/IntersectionObserverEntry

从下图可看出有些浏览器不支持该API，所以需要引入polyfill，https://github.com/w3c/IntersectionObserver/tree/main/polyfill

兼容性.png

demo源代码：https://stackblitz.com/edit/js-ozzzjw?file=index.js
demo效果：https://js-ozzzjw.stackblitz.io/

见demo源代码中的options

let options = {
  root: null,
  rootMargin: '0px',
  threshold: [0, 0.5, 1] // 当监听对象的任何阈值被越过时，都会生成一个通知(Notification)。
};

demo中的root是浏览器窗口，被监听的目标元素是横向的蓝色块和纵向的蓝色块。当被监听的目标元素可见部分与root元素交叉比例越过0 0.5 1时，会log对应的信息。

requestIdleCallback

使用 requestIdleCallback 方法，浏览器会在空闲时执行传入的函数。后面埋点我们使用这个方法，避免埋点影响主业务。

曝光埋点实现

demo源代码：https://stackblitz.com/edit/react-hfq33n?file=src%2FApp.js
demo效果：https://react-hfq33n.stackblitz.io/

说明：

1. 当模块露出大于等于50%时，会曝光埋点，demo中用log代替
2. 当模块到可视范围之外，在进入可视范围露出大于等于50%时，会再次曝光埋点
3. demo中，模块蓝边表示未曝光埋点，绿边表示已曝光埋点