无需滚动监听，利用 IntersectionObserver 简化小程序模块曝光埋点

前端

2023-09-26 13:30:48

小程序模块曝光埋点的传统方式

在小程序中，传统上我们通过增加页面 scroll 监听事件来实现模块曝光埋点。当页面滚动时，我们会根据滚动位置与模块位置进行对比判断，如果模块可见，则认为模块已曝光，并触发曝光事件。

这种方法虽然简单易行，但存在以下问题：

需要手动计算模块的位置和滚动位置，代码逻辑复杂
需要在页面滚动时频繁触发 scroll 事件，影响性能
无法准确判断模块是否完全可见，可能导致曝光统计不准确

IntersectionObserver API 优化方案

IntersectionObserver API 是一个新的 API，它可以用来观察元素相对于其祖先元素或视口的相对位置。IntersectionObserver API 的用法很简单：

创建一个 IntersectionObserver 对象，并指定回调函数。
将 IntersectionObserver 对象与目标元素关联。
当目标元素相对于其祖先元素或视口的相对位置发生变化时，回调函数就会被调用。

在小程序中，我们可以使用 IntersectionObserver API 来简化模块曝光埋点的实现。

在小程序页面中，创建一个 IntersectionObserver 对象，并指定回调函数。
将 IntersectionObserver 对象与模块元素关联。
当模块元素相对于视口的位置发生变化时，回调函数就会被调用。
在回调函数中，我们可以判断模块元素是否可见，并触发曝光事件。

这种方法比传统的方法更加简单易行，而且不会影响性能。

具体实现

以下是一个在小程序中使用 IntersectionObserver API 实现模块曝光埋点的示例：

// 创建 IntersectionObserver 对象
const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    // 判断模块元素是否可见
    if (entry.isIntersecting) {
      // 模块元素可见，触发曝光事件
      console.log('模块元素可见');
    }
  });
});

// 将 IntersectionObserver 对象与模块元素关联
const moduleElement = document.querySelector('.module');
observer.observe(moduleElement);