列表頁曝光埋點實現(xiàn)

pf_miles 發(fā)布于2019-08-02 12:08 / 3204人閱讀

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

列表頁曝光埋點實現(xiàn)

以商品為例

要求

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

快速滑動過去的商品不上報

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

滑出視野的商品，再次滑入視野時需要再次上報

分析

需要以下信息

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

實現(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}  當前活躍的的行
   */
  return function(contentTop) {
    let topDiff = contentTop - headHeight
    // 可視區(qū)域高度
    let visibleHeight =
      window.innerHeight - (topDiff <= 0 ? headHeight : contentTop)
    /**
     * 當前能顯示的行數(shù)
     * 顯露一半就需要上報 則使用四舍五入
     */
    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),
      []
    )
    /**
     * 之前上報過，未從屏幕上消失過的 不上報
     * 之前上報過，從屏幕中消失又出現(xiàn)的 上報
     */
    let active = _active.filter(
      v => !lastActive.includes(v) || deactived.includes(v)
    )
    /**
     * 收集非活躍狀態(tài)的行，只收集滾上去的元素，active下面的行屬于待活躍狀態(tài)，由于和行的總數(shù)相關(guān)（商品的總行數(shù)知道與否不影響上報），會額外增加不必要的工作 所以此處不做考慮
     */
    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可能為空數(shù)組
 ...
}, 1000)
target.addEventListener("scroll", _scroll)

GPU云服務器云服務器實現(xiàn)列表頁 html列表頁命名 jsp列表頁css 列表頁跳轉(zhuǎn) php

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/53368.html

發(fā)表評論

登陸后可評論

0條評論

pf_miles

男|高級講師

我要關(guān)注我要私信

TA的文章

Transition 實現(xiàn)輪播圖

閱讀 2504·2019-08-30 15:52
pt，px，rem和em之間區(qū)別總結(jié)

閱讀 2300·2019-08-30 12:51
一批面試記錄

閱讀 2898·2019-08-29 18:41
移動端下彈框禁止背景滑動

閱讀 2879·2019-08-29 17:04
es6讓操作unicode字符集更加簡單

閱讀 896·2019-08-29 15:11
CSS Grid布局：合并單元格布局

閱讀 1826·2019-08-28 18:02
如何結(jié)合npm做一個前端腳手架

閱讀 3658·2019-08-26 10:22
Object 對象的相關(guān)方法

閱讀 2571·2019-08-26 10:12

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

列表頁曝光埋點實現(xiàn)

相關(guān)文章