关键是要用intersectionobserver的entry.time精确捕获广告首次进入视口时间,并结合intersectionratio与缓存机制区分首次/持续曝光,辅以100ms防抖和业务上下文补全,实现真实曝光时序统计。

要统计广告曝光的真实性能,关键不是只判断“是否进入视口”,而是精确捕获“何时开始进入、停留多久、是否完全可见”等时间维度信息。IntersectionObserver 本身不直接提供高精度时间戳,但结合 intersectionRatio、time 字段和恰当的观察策略,可以构建可靠的曝光时序模型。
启用 high precision time 并监听 entry.time
IntersectionObserver 的每个 IntersectionObserverEntry 对象包含一个 time 字段,单位为毫秒,表示该交叉状态发生的时间点(基于 DOMHighResTimeStamp,即 performance.now() 的同源时钟)。这是获取真实曝光起始时间的核心依据。
确保你的 Observer 配置启用了高精度时间(现代浏览器默认支持,无需额外开启):
const observer = new IntersectionObserver(
(entries) => {
entries.forEach(entry => {
if (entry.isIntersecting && entry.intersectionRatio > 0) {
const exposureStart = entry.time; // ✅ 精确到微秒级的时间戳
console.log('广告首次进入视口时间:', exposureStart);
}
});
},
{
threshold: [0, 0.1, 0.5, 1.0], // 多阈值便于分段统计
rootMargin: '0px' // 避免 margin 引入时间偏差
}
);
区分「首次曝光」与「持续曝光」,避免重复上报
同一个广告可能反复进出视口。真实曝光统计需明确:仅在元素**首次满足曝光条件**(如 intersectionRatio ≥ 0.5)时记录起始时间,并在其保持可见期间持续更新停留时长,离开时计算总曝光时长。
- 用 Map 或 WeakMap 缓存每个广告元素的
exposureStartTime和lastReportedRatio - 仅当
entry.intersectionRatio首次达到目标阈值(如 0.5)时,记录entry.time为起始时间 - 若已记录起始时间且仍相交,可忽略或仅更新最新 ratio;若相交中断(
!entry.isIntersecting),则用当前performance.now()减去起始时间,得出真实曝光时长
处理快速滚动与短暂闪现(防误曝)
用户快速滚动可能导致元素在视口内仅停留几毫秒(如
- 当
entry.isIntersecting && entry.intersectionRatio >= 0.5时,暂存entry.time,不立即上报 - 使用
setTimeout延迟 100ms 检查:若该元素在此期间仍满足条件,则确认为有效曝光,上报起始时间与持续时长 - 若延迟期内元素已移出,则清除定时器,不触发曝光事件
⚠️ 注意:延迟不可过长(建议 ≤ 200ms),否则影响首曝归因准确性,尤其对首屏广告。
补全上下文:绑定曝光数据与业务标识
单纯的时间戳无业务意义。务必在上报前将时间信息与广告唯一 ID、尺寸、位置(getBoundingClientRect())、设备类型、网络状态等上下文一并采集:
const rect = entry.target.getBoundingClientRect();
const reportData = {
adId: entry.target.dataset.adId,
exposureStart: entry.time,
timestamp: performance.now(), // 当前上报时刻,用于排查延迟
viewportHeight: window.innerHeight,
top: rect.top,
height: rect.height,
intersectionRatio: entry.intersectionRatio,
isFullyVisible: entry.intersectionRatio === 1,
networkEffectiveType: navigator?.connection?.effectiveType || 'unknown'
};
这些字段能支撑后续归因分析,例如:判断曝光是否发生在用户注意力集中区域(top
不复杂但容易忽略:真正影响广告曝光统计准确性的,往往不是监听逻辑本身,而是对「什么是有效曝光」的定义是否贴合业务场景——是只要露一角就算?还是必须 50% 以上且停留超 100ms?IntersectionObserver 提供了精确的时间锚点,剩下的,是根据产品目标做合理取舍。










