曝光埋点 - 技术栈

定位

关注实际内容块,被看到的统计,更加准确的反应了,用户真正关注点

多种埋点对比

埋点类型	触发时机	核心目的	典型字段
页面浏览埋点（PV/UV）	页面打开、路由切换	统计页面访问次数、人流量	页面路径、停留时长、来源
曝光埋点	元素进入可视区域	统计内容真实被看见的次数	元素 ID、位置、曝光时长
点击埋点（行为埋点）	用户手动点击 / 触摸	统计用户主动操作意愿	点击元素、操作类型、参数

案例

核心: 通过intersectionobserver 观察真正的元素曝光点

js 复制代码

一: 传统方式,监听滚动事件,通过getBoundingclinetRect top的距离小于可视元素高度

二实际运用
<!DOCTYPE html>
<html>
<head>
  <title>曝光埋点-官方API版</title>
  <style>
    .box { height: 1000px; }
    .target { width: 300px; height: 200px; background: skyblue; margin: 20px 0; }
  </style>
</head>
<body>
  <div class="box">滚动页面↓</div>
  <!-- 多个埋点元素 -->
  <div class="target" data-id="goods_001">商品1</div>
  <div class="target" data-id="goods_002">商品2</div>
  <div class="target" data-id="goods_003">商品3</div>
  <div class="box"></div>

  <script>
    // 1. 创建曝光监听器（核心API）
    const observer = new IntersectionObserver((entries) => {
      // entries：所有被监听的元素数组
      entries.forEach(entry => {
        // 2. 判断元素是否正在曝光（isIntersecting=true=可见）
        if (entry.isIntersecting) {
          const target = entry.target
          // 3. 上报数据
          reportExposure(target)
          // 4. 上报后取消监听（防止重复上报）
          observer.unobserve(target)
        }
      })
    })

    // 2. 上报函数
    function reportExposure(target) {
      const data = {
        elementId: target.dataset.id,
        page: '商品列表页',
        time: new Date().toLocaleString()
      }
      console.log('✅ API版曝光上报：', data)
    }

    // 3. 给所有需要埋点的元素绑定监听
    document.querySelectorAll('.target').forEach(item => {
      observer.observe(item)
    })
  </script>
</body>
</html>