列表頁曝光埋點(diǎn)實(shí)現(xiàn)

miqt 發(fā)布于2019-08-23 13:43 / 2720人閱讀

摘要：列表頁曝光埋點(diǎn)實(shí)現(xiàn)以商品為例要求商品一半以上出現(xiàn)在視窗中時(shí)上報(bào)該行的商品快速滑動過去的商品不上報(bào)滑動過程中如果一行商品一直未消失在視野中一半以上，不能重復(fù)上報(bào)滑出視野的商品，再次滑入視野時(shí)需要再次上報(bào)分析需要以下信息商品所在行的高度固定值商

列表頁曝光埋點(diǎn)實(shí)現(xiàn)

以商品為例

要求

商品一半以上出現(xiàn)在視窗中時(shí) 上報(bào)該行的商品

快速滑動過去的商品不上報(bào)

滑動過程中如果一行商品一直未消失在視野中（一半以上），不能重復(fù)上報(bào)

滑出視野的商品，再次滑入視野時(shí)需要再次上報(bào)

分析

需要以下信息

商品所在行的高度rowHeight（固定值）
商品的可視區(qū)域的高度contentHeight（半固定值，不考慮瀏覽器的resize）
可視區(qū)域距離視窗頂部的高度headHeight(固定值)
content的滾動高度（與scroll事件相關(guān)，考慮到滑動快時(shí)不觸發(fā)上報(bào)，需要throttle）

實(shí)現(xiàn)

/**
 * 滾動事件處理
 * @param {number} headHeight content區(qū)域距離頂部的高度
 * @param {number} rowHeight 每一行的高度
 * @returns {Function}
 */
export function handleScroll(headHeight, rowHeight) {
  let lastActive = []
  let deactived = []
  /**
   * @param   {number} contentTop 區(qū)域的top值
   * @return  {Array}  當(dāng)前活躍的的行
   */
  return function(contentTop) {
    let topDiff = contentTop - headHeight
    // 可視區(qū)域高度
    let visibleHeight =
      window.innerHeight - (topDiff <= 0 ? headHeight : contentTop)
    /**
     * 當(dāng)前能顯示的行數(shù)
     * 顯露一半就需要上報(bào) 則使用四舍五入
     */
    let rowCount = Math.round(visibleHeight / rowHeight)
    /**
     * 獲取當(dāng)前顯示的下標(biāo)
     */
    let index = topDiff > 0 ? 0 : Math.round(-topDiff / rowHeight)
    let _active = Array.from({ length: rowCount }).reduce(
      (pre, cur, i) => pre.concat(index + i),
      []
    )
    /**
     * 之前上報(bào)過，未從屏幕上消失過的 不上報(bào)
     * 之前上報(bào)過，從屏幕中消失又出現(xiàn)的 上報(bào)
     */
    let active = _active.filter(
      v => !lastActive.includes(v) || deactived.includes(v)
    )
    /**
     * 收集非活躍狀態(tài)的行，只收集滾上去的元素，active下面的行屬于待活躍狀態(tài)，由于和行的總數(shù)相關(guān)（商品的總行數(shù)知道與否不影響上報(bào)），會額外增加不必要的工作 所以此處不做考慮
     */
    deactived = Array.from({ length: index }).map((val, i) => i)
    /**
     * 上次活躍的行，用來避免重復(fù)上報(bào)
     */
    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)
 // 此時(shí)row.active就是需要上報(bào)的行的下標(biāo)，active可能為空數(shù)組
 ...
}, 1000)
target.addEventListener("scroll", _scroll)