列表页曝光埋点实现

pf_miles 发布于2019-08-02 12:08 / 2906人阅读

摘要：列表页曝光埋点实现以商品为例要求商品一半以上出现在视窗中时上报该行的商品快速滑动过去的商品不上报滑动过程中如果一行商品一直未消失在视野中一半以上，不能重复上报滑出视野的商品，再次滑入视野时需要再次上报分析需要以下信息商品所在行的高度固定值商

列表页曝光埋点实现

以商品为例

要求

商品一半以上出现在视窗中时上报该行的商品

快速滑动过去的商品不上报

滑动过程中如果一行商品一直未消失在视野中（一半以上），不能重复上报

滑出视野的商品，再次滑入视野时需要再次上报

分析

需要以下信息

商品所在行的高度rowHeight（固定值）

商品的可视区域的高度contentHeight（半固定值，不考虑浏览器的resize）

可视区域距离视窗顶部的高度headHeight(固定值)

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)

idc机房托管混合云实现列表页 html列表页命名 jsp列表页css 列表页跳转 php

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/53368.html

列表页曝光埋点实现

摘要：列表页曝光埋点实现以商品为例要求商品一半以上出现在视窗中时上报该行的商品快速滑动过去的商品不上报滑动过程中如果一行商品一直未消失在视野中一半以上，不能重复上报滑出视野的商品，再次滑入视野时需要再次上报分析需要以下信息商品所在行的高度固定值商列表页曝光埋点实现以商品为例要求商品一半以上出现在视窗中时上报该行的商品快速滑动过去的商品不上报滑动过程中如果一行商品一直未消失在视...

miqt 2019-08-23 13:43 评论0 收藏0
如何通过Vue自定义指令实现前端埋点详析

　　获取用户的交互习惯及喜好，进一步提升转化率，可以在之前的埋点方案实现中，都是在具体的按钮或者图片被点击或者被曝光时主动通过事件去上报埋点。但这种方法适合在埋点比较少时还行的项目，遇见项目中需要大量埋点时，添加的代码就太多了，就会埋点逻辑与业务逻辑的高耦合。　　由此需要换种方式。我先给大家普及下埋点上报方式都有哪些？　　手动埋点　　可视化埋点　　无痕埋点　　手动埋点，顾名思义就是纯手动写代码，调...

3403771864 2022-09-14 22:57 评论0 收藏0
如何实现元素曝光上报

摘要：进行数据上报的时候，经常会遇到列表数据曝光上报的问题，只对在当前可视范围内的数据内容进行曝光上报，而对于未在可视范围内的数据不进行曝光上报，等待用户滚动页面或者区域使元素出现在可视范围内时才进行曝光上报。进行数据上报的时候，经常会遇到列表数据曝光上报的问题，只对在当前可视范围内的数据内容进行曝光上报，而对于未在可视范围内的数据不进行曝光上报，等待用户滚动页面或者区域使元素出现在可视范...

VincentFF 2019-08-26 10:35 评论0 收藏0
Android埋点系统设计

摘要：一埋点架构设计埋点的核心逻辑抽象将生产的用户数据组织发送给服务器。普通埋点定义页面进入，页面离开，页面元素点击，页面元素曝光。无埋点进入退出都使用，如何区分增加了一个字段，用表示页面进入退出。如何修改字节码库基础使用。一、埋点架构设计埋点的核心逻辑抽象：将APP生产的用户数据组织发送给服务器。showImg(https://segmentfault.com/img/bVba4Lw?...

trigkit4 2019-08-15 17:55 评论0 收藏0