揭秘检测元素是否显示在页面上的埋点背后的秘密

2023-09-14 02:02:16

从0到1构建一个检测元素是否显示在页面上的埋点

摘要

当产品经理提出需要一个埋点来检测元素是否显示在页面上的需求时，乍一看似乎是一个简单的任务。但随着深入研究，你会发现有许多因素需要考虑，例如元素的存在、可见性和是否需要考虑滚动。本文将指导你从头开始构建一个全面的埋点，涵盖从识别元素到判断其显示状态的各个步骤。

1. 确定元素标识符

埋点的第一步是找到页面上需要检测的元素。这可以通过多种方式实现，例如：

DOM选择器： 使用document.querySelector()或document.querySelectorAll()来通过类名、ID或其他属性选择元素。
元素引用： 直接获取元素的JavaScript引用，例如const element = document.getElementById("my-element");。
XPath： 使用XPath表达式精确定位页面上的元素。

2. 判断元素是否存在

确定元素标识符后，下一步是判断该元素是否存在于DOM树中。可以使用以下方法：

DOM API： 使用document.getElementById()或document.querySelector()来查找元素，如果返回null，则元素不存在。
自定义属性： 向元素添加一个自定义属性，例如data-exists="true"，并使用JavaScript代码检查该属性的存在。

3. 判断元素是否可见

如果元素存在，接下来需要判断它是否可见。这可以通过以下方法实现：

getBoundingClientRect()： 获取元素在视窗中的矩形，如果矩形的top和left属性都大于0，则元素可见。
Intersection Observer API： 使用Intersection Observer API监视元素是否与视窗相交，返回一个IntersectionObserverEntry对象，包含isIntersecting属性。

4. 检测元素曝光并上报

一旦确定了元素是否存在和可见性，就可以使用埋点上报曝光数据。这可以通过以下方式实现：

自定义事件： 创建并分发一个自定义事件，例如element-exposed，并包含必要的元数据。
AJAX请求： 向服务器发送AJAX请求，包含元素标识符、可见性状态和其他相关信息。
日志记录： 将曝光数据写入客户端或服务器端日志，用于后续分析。

5. 考虑滚动事件

如果页面包含可滚动的区域，需要考虑在用户滚动时检测元素的显示状态。可以使用以下方法：

滚动事件侦听器： 在window对象上添加滚动事件侦听器，并在每次滚动时重新评估元素的显示状态。
MutationObserver： 使用MutationObserver监视DOM的变化，并在元素被添加到视窗或从视窗中移除时触发。

代码示例

以下是一个使用JavaScript检测元素是否显示在页面上的简单埋点示例：

// 确定元素标识符
const element = document.getElementById("my-element");

// 检测元素是否存在
if (!element) {
  console.log("元素不存在");
  return;
}

// 检测元素是否可见
const rect = element.getBoundingClientRect();
if (rect.top >= 0 && rect.left >= 0 && rect.right <= window.innerWidth && rect.bottom <= window.innerHeight) {
  // 元素可见，上报数据
  console.log("元素已曝光");
} else {
  console.log("元素不可见");
}