数据采集内容

互联网发展至今，数据的重要性已经不言而喻，尤其是在电商公司，数据的统计分析尤为重要，通过数据分析可以提升用户的购买体验，方便运营和产品调整销售策略等等。埋点就是网站分析的一种常用的数据采集方法。埋点按照获取数据的方式一般可以分为以下 3 种：

页面埋点：统计用户进入或离开页面的各种维度信息，如页面浏览次数（PV）、浏览页面人数（UV）、页面停留时间、浏览器信息等。
点击埋点：统计用户在应用内的每一次点击事件，如新闻的浏览次数、文件下载的次数、推荐商品的命中次数等。
曝光埋点：统计具体区域是否被用户浏览到，如活动的引流入口的显示、投放广告的显示等。

点击埋点

在需要埋点的DOM节点挂载特殊属性，通过埋点SDK监听挂载了相应属性对应的事件，在事件触发时进行埋点数据上报。对于点击事件，我们可以采用addEventListener来监听click事件。

曝光埋点

为了衡量用户对产品的兴趣程度，需要计算区域的点击率（点击次数/曝光次数）。为了保证点击率的准确性，我们必须保证用户真正的浏览到了这些产品。

早先的实现方式通过监听 scroll 事件，调用 Element.getBoundingClientRect()方法以获取相关元素的边界信息，然后判断元素是否出现在页面的可视化区域内。由于 scroll 事件频发触发，计算量很大，所以很容易造成性能问题，虽然我们可以采用防抖节流等方式去解决。

目前有一个新的 IntersectionObserver API，提供了一种异步检测目标元素与祖先元素或 viewport（可视窗口）相交情况变化的方法。可以自动"观察"元素是否可见。

let options = {
    root: document.querySelector('#scrollArea'),
    rootMargin: '0px',
    threshold: 1.0
}
let callback =(entries, observer) => {
  entries.forEach(entry => {});
};
let observer = new IntersectionObserver(callback, options);

IntersectionObserver 是浏览器原生提供的构造函数，接受两个参数：callback 是可见性变化时的回调函数，option 是配置对象（该参数可选），返回一个 observer 实例。

我们可以看到，创建一个 IntersectionObserver 对象，接受两个参数：callback 可见性变化时的回调函数，该回调函数将会在目标（target）元素和根（root）元素的交集大小超过阈值（threshold）规定的大小时候被执行。

options 是配置对象，它有以下字段：

root：指定根(root)元素，用于检查目标的可见性。必须是目标元素的父级元素。如果未指定或者为 null，则默认为浏览器视窗。
rootMargin：根(root)元素的外边距。类似于 CSS 中的 margin 属性。默认值为 0。
threshold：target 元素和 root 元素相交程度达到该值的时候 callback 函数将会被执行，可以是单一的Number 也可以是 Number 数组，当为数组时每达到该值都会执行 callback 函数。

我们通过实例的方法可以指定观察哪个 DOM 节点。实例的方法有：

IntersectionObserver.observe()：使 IntersectionObserver 开始监听一个目标元素。
IntersectionObserver.disconnect()：使 IntersectionObserver 对象停止监听工作。
IntersectionObserver.takeRecords()：返回所有观察目标的IntersectionObserverEntry对象数组。
IntersectionObserver.unobserve()：使 IntersectionObserver 停止监听特定目标元素。

IntersectionObserverEntry 对象提供目标元素的信息，一共有七个属性：

IntersectionObserverEntry.target ：需要观察的目标元素，是一个 DOM 节点对象。
IntersectionObserverEntry.boundingClientRect：返回包含目标元素的边界信息。边界的计算方式与 Element.getBoundingClientRect() 相同。
IntersectionObserverEntry.intersectionRect ：用来描述根和目标元素的相交区域的信息.
IntersectionObserverEntry.intersectionRatio：返回 intersectionRect 与 boundingClientRect 的比例值，0 为完全不可见，1 为完全可见。
IntersectionObserverEntry.isIntersecting：返回一个布尔值, 如果根与目标元素相交（即从不可视状态变为可视状态），则返回 true。如果返回 false, 变换是从可视状态到不可视状态。
IntersectionObserverEntry.rootBounds ：根元素的区域的信息。
IntersectionObserverEntry.time：可见性状态发生改变时间的时间戳，单位为毫秒。

目标元素的可见性变化时，就会调用观察器的回调函数 callback。callback 函数的参数 entries 是一个数组，每个成员都是一个 IntersectionObserverEntry 对象，observer 是被调用的 IntersectionObserver 实例。callback 函数一般会被调用两次，一次是目标元素进入可视化区域，另一次是离开可视化区域。配置 options.threshold 会影响 callback 函数的调用次数。

Intersection Observer API 是存在兼容性问题的，好在已经有了兼容的 polyfill。当前浏览器不支持 Intersection Observer API 时，使用 Element.getBoundingClientRect()去实现 Intersection Observer API。

数据采集内容 ​

点击埋点 ​

曝光埋点 ​

博客

数据采集内容

点击埋点

曝光埋点