如何實現(xiàn)元素曝光上報

VincentFF 發(fā)布于2019-08-26 10:35 / 2894人閱讀

摘要：進行數(shù)據(jù)上報的時候，經(jīng)常會遇到列表數(shù)據(jù)曝光上報的問題，只對在當前可視范圍內的數(shù)據(jù)內容進行曝光上報，而對于未在可視范圍內的數(shù)據(jù)不進行曝光上報，等待用戶滾動頁面或者區(qū)域使元素出現(xiàn)在可視范圍內時才進行曝光上報。

進行數(shù)據(jù)上報的時候，經(jīng)常會遇到列表數(shù)據(jù)曝光上報的問題，只對在當前可視范圍內的數(shù)據(jù)內容進行曝光上報，而對于未在可視范圍內的數(shù)據(jù)不進行曝光上報，等待用戶滾動頁面或者區(qū)域使元素出現(xiàn)在可視范圍內時才進行曝光上報。

解決方案

目前針對此類問題，主要有兩種解決方案。

方案一：監(jiān)聽頁面或者區(qū)域scroll事件，通過getBoundingClientRect接口取元素的位置與可視窗口進行判斷。

function isElementInViewport(el) {
    var rect = el.getBoundingClientRect();

    var width_st = rect.width / 2,
        height_st = rect.height / 2;

    var innerHeight = window.innerHeight,
        innerWidth  = window.innerWidth;


    if (   rect.top <=0 && rect.height > innerHeight 
        || rect.left <= 0 && rect.width > innerWidth
    ) {
        return rect.left * rect.right <= 0
            || rect.top * rect.bottom <= 0
    }

    return (
           rect.height > 0 
        && rect.width  > 0 
        &&  (  ( rect.top  >= 0 && rect.top <= innerHeight - height_st )
            || ( rect.bottom  >= height_st && rect.bottom <= innerHeight ) )
        &&  (  ( rect.left >= 0 && rect.left <= innerWidth - width_st  )
            || ( rect.right >= width_st && rect.right <= innerWidth  ) )
    );
}

var nodes = document.querySelectorAll(".item")
function report(node) {
    // 上報的邏輯
}
window.onscroll = function() {
    nodes.forEach(node => {
        if( isElementInViewport(node) ) {
            report(node)
        }
    })
    
}

優(yōu)點：兼容性好
缺點：

需要關注頁面或者區(qū)域的scroll事件

頻繁的scroll事件，性能問題

方案二：通過 IntersectionObserver 監(jiān)聽元素是否處于可視范圍

function report(node) {
    // 上報的邏輯
}
var intersectionObserver = new IntersectionObserver(entries => {
    entries.forEach(entry => {
        if( entry.intersectionRatio > 0 ) {
            report(entry.target)
        }
    })
})
var nodes = document.querySelectorAll(".item")
nodes.forEach(node => {
    intersectionObserver.observe(node)
})

優(yōu)點：

無須關注 scroll

回調是異步觸發(fā)，不會頻繁觸發(fā)，性能好

缺點：兼容性不好？

實際上，針對兼容性問題，w3c 官方提供了對應 polyfill, 因此intersectionObserver用于生產(chǎn)是可行的。

總結

筆者在實際運用中，通過 IntersectionObserver 封裝了一個簡單的調用庫，應用于可視化埋點 sdk 中，用于解決元素曝光問題，如下

require("intersection-observer"); // polyfill

class Exposure {
    constructor(callback) {
        if (!callback || typeof callback !== "function") {
            throw new Error("need callback or selector param")
            return
        }
        this.intersectionObserver = new IntersectionObserver((entries) => {
            entries.forEach(item => {
                if (item.intersectionRatio > 0) {
                    if (item.target) {
                        callback(item.target, item)
                        this.intersectionObserver.unobserve(item.target)
                    }
                }
            })
        });
    }

    observe(selector, ignoreExposured) {
        if (!this.intersectionObserver || !selector) {
            return
        }
        let nodes = []
        if( this.isDOM(selector) ) { // dom節(jié)點
            nodes = [selector]
        }else { // 選擇器
            nodes = document.querySelectorAll(selector)
        }
        if (!nodes.length) {
            return
        }
        nodes.forEach(node => {
            if (!ignoreExposured && node.__wg__tracker__exposured__) {
                return
            }
            node.__wg__tracker__exposured__ = true
            // 開始觀察
            this.intersectionObserver.observe(
                node
            );
        })
    }

    disconnect() {
        if (!this.intersectionObserver) {
            return
        }
        this.intersectionObserver.disconnect()
    }

    isDOM(obj) {
        if( !obj ) {
            return false
        }
        if( typeof HTMLElement === "object" ) {
            return obj instanceof HTMLElement
        }
        if( typeof obj === "object"  && obj.nodeType === 1 && typeof obj.nodeName === "string" ) {
            return true
        }
        return false
    }
}

export default  Exposure

調用方法：

function report() {}
var exposurer = new Exposure((node) => {
    report(node)
})
exposurer.observe(".item)

GPU云服務器云服務器 js實現(xiàn)元素顯示 js實現(xiàn)元素隱藏 js實現(xiàn)動態(tài)生成元素 js實現(xiàn)元素隱藏顯示

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

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

如何通過Vue自定義指令實現(xiàn)前端埋點詳析

　　獲取用戶的交互習慣及喜好，進一步提升轉化率，可以在之前的埋點方案實現(xiàn)中，都是在具體的按鈕或者圖片被點擊或者被曝光時主動通過事件去上報埋點。但這種方法適合在埋點比較少時還行的項目，遇見項目中需要大量埋點時，添加的代碼就太多了，就會埋點邏輯與業(yè)務邏輯的高耦合。　　由此需要換種方式。我先給大家普及下埋點上報方式都有哪些？　　手動埋點　　可視化埋點　　無痕埋點　　手動埋點，顧名思義就是純手動寫代碼，調...

3403771864 2022-09-14 22:57 評論0 收藏0
列表頁曝光埋點實現(xiàn)

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

miqt 2019-08-23 13:43 評論0 收藏0
列表頁曝光埋點實現(xiàn)

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

pf_miles 2019-08-02 12:08 評論0 收藏0
廣告的發(fā)展趨勢和其中的前端角色

摘要：本文借助發(fā)布的數(shù)字營銷趨勢報告，從廣告的發(fā)展趨勢和尚存問題講起，引出前端開發(fā)在未來應該逐漸的所處的角色和應該承擔的責任。總結本文描述了廣告在年的發(fā)展趨勢和當前存在的問題，并在廣告的渲染，監(jiān)測和上報上闡述了前端可以努力的方向。上個周寫個篇文章《一篇文章了解廣告全鏈路》，在其中我們討論了數(shù)字營銷中廣告是如何售賣的，以及廣告的實時競價和庫存算法。但是，其實上面那篇文章還沒有完結，它還缺了一...

leon 2019-08-23 14:32 評論0 收藏0
頁面跳轉時，點擊上報丟失問題解析

摘要：背景最近在工作中，遇到了頁面跳轉時點擊上報丟失的問題，突出表現(xiàn)在微信的上，上報后直接跳轉的失敗率達到了驚人的。對這三種失效的方案有興趣的可以看頁面跳轉時，統(tǒng)計數(shù)據(jù)丟失問題探討把要跳轉的放到中，然后在下一個頁面上上報點擊。背景最近在工作中，遇到了頁面跳轉時點擊上報丟失的問題，突出表現(xiàn)在微信ios的webview上，上報后直接跳轉的失敗率達到了驚人的93%。喝口水壓壓驚，開始逐步分析問...

Bmob 2019-08-26 11:36 評論0 收藏0