列表頁曝光埋點實現

miqt 發布于2019-08-23 13:43 / 2717人閱讀

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

列表頁曝光埋點實現

以商品為例

要求

商品一半以上出現在視窗中時上報該行的商品

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

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

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

分析

需要以下信息

商品所在行的高度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)

GPU云服務器云服務器實現列表頁 html列表頁命名 jsp列表頁css 列表頁跳轉 php

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/99456.html

列表頁曝光埋點實現

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

pf_miles 2019-08-02 12:08 評論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