列表页曝光埋点实现

列表页曝光埋点实现

以商品为例

要求

1. 商品一半以上出现在视窗中时 上报该行的商品
2. 快速滑动过去的商品不上报
3. 滑动过程中如果一行商品一直未消失在视野中（一半以上），不能重复上报
4. 滑出视野的商品，再次滑入视野时需要再次上报

分析

需要以下信息

1. 商品所在行的高度rowHeight（固定值）
2. 商品的可视区域的高度contentHeight（半固定值，不考虑浏览器的resize）
3. 可视区域距离视窗顶部的高度headHeight(固定值)
4. content的滚动高度（与scroll事件相关，考虑到滑动快时不触发上报，需要throttle）

实现

/**
 * 滚动事件处理
 * @param {number} headHeight content区域距离顶部的高度
 * @param {number} rowHeight 每一行的高度
 * @returns {Function}
 */
export function handleScroll(headHeight, rowHeight) {
  let lastActive = []
  let deactived = []
  /**
   * @param   {number} contentTop 区域的top值
   * @return  {Array}  当前活跃的的行
   */
  return function(contentTop) {
    let topDiff = contentTop - headHeight
    // 可视区域高度
    let visibleHeight =
      window.innerHeight - (topDiff <= 0 ? headHeight : contentTop)
    /**
     * 当前能显示的行数
     * 显露一半就需要上报 则使用四舍五入
     */
    let rowCount = Math.round(visibleHeight / rowHeight)
    /**
     * 获取当前显示的下标
     */
    let index = topDiff > 0 ? 0 : Math.round(-topDiff / rowHeight)
    let _active = Array.from({ length: rowCount }).reduce(
      (pre, cur, i) => pre.concat(index + i),
      []
    )
    /**
     * 之前上报过，未从屏幕上消失过的 不上报
     * 之前上报过，从屏幕中消失又出现的 上报
     */
    let active = _active.filter(
      v => !lastActive.includes(v) || deactived.includes(v)
    )
    /**
     * 收集非活跃状态的行，只收集滚上去的元素，active下面的行属于待活跃状态，由于和行的总数相关（商品的总行数知道与否不影响上报），会额外增加不必要的工作 所以此处不做考虑
     */
    deactived = Array.from({ length: index }).map((val, i) => i)
    /**
     * 上次活跃的行，用来避免重复上报
     */
    lastActive = [].concat(deactived).concat(_active)
    return {
      lastActive,
      active,
      deactived
    }
  }
}

---

图示

使用

let target = document.getElementById('wrapper')
let onScroll = handleScroll(100, 420)
let _scroll = _.throttle(function(){
 let row = onScroll(target.getBoundingClientRect().y)
 // 此时row.active就是需要上报的行的下标，active可能为空数组
 ...
}, 1000)
target.addEventListener('scroll', _scroll)