如何實(shí)現(xiàn)元素曝光上報(bào)

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

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

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

解決方案

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

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

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) {
    // 上報(bào)的邏輯
}
window.onscroll = function() {
    nodes.forEach(node => {
        if( isElementInViewport(node) ) {
            report(node)
        }
    })
    
}

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

需要關(guān)注頁(yè)面或者區(qū)域的scroll事件

頻繁的scroll事件，性能問題

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

function report(node) {
    // 上報(bào)的邏輯
}
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)點(diǎn)：

無須關(guān)注 scroll

回調(diào)是異步觸發(fā)，不會(huì)頻繁觸發(fā)，性能好

缺點(diǎn)：兼容性不好？

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

總結(jié)

筆者在實(shí)際運(yùn)用中，通過 IntersectionObserver 封裝了一個(gè)簡(jiǎn)單的調(diào)用庫(kù)，應(yīng)用于可視化埋點(diǎn) 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é)點(diǎn)
            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

調(diào)用方法：

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

云服務(wù)器 GPU云服務(wù)器 js實(shí)現(xiàn)元素顯示 js實(shí)現(xiàn)元素隱藏 js實(shí)現(xiàn)動(dòng)態(tài)生成元素 js實(shí)現(xiàn)元素隱藏顯示

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/106422.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

VincentFF

男|高級(jí)講師

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

TA的文章

tensorflow文檔

閱讀 866·2023-04-25 15:13
高并發(fā)下秒殺商品，必須知道的9個(gè)細(xì)節(jié)

閱讀 1480·2021-11-22 12:03
LeetCode 563 二叉樹的坡度[dfs] HERODING的LeetCode之路

閱讀 882·2021-11-19 09:40
#黑五#bacloud：全場(chǎng)KVM VPS一次性5折，獨(dú)立服務(wù)器6折優(yōu)惠，美國(guó)/荷蘭/立陶宛機(jī)房

閱讀 1984·2021-11-17 09:38
快云科技: 11.11鉅惠美國(guó)云機(jī)2H5G年付148僅有40臺(tái)，云服務(wù)器全場(chǎng)7折，香港云服務(wù)器年付

閱讀 1801·2021-11-08 13:18
C++仍然是最好的語言

閱讀 705·2021-09-02 15:15
vue中如何實(shí)現(xiàn)后臺(tái)管理系統(tǒng)的權(quán)限控制

閱讀 1815·2019-08-30 15:54
H5 input[type='date'] 優(yōu)化 pc端和移動(dòng)端的使用

閱讀 2792·2019-08-30 11:12

成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲中文字幕日韩无码

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！

如何實(shí)現(xiàn)元素曝光上報(bào)

相關(guān)文章

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

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

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

廣告的發(fā)展趨勢(shì)和其中的前端角色

**頁(yè)面跳轉(zhuǎn)時(shí)，點(diǎn)擊上報(bào)丟失問題解析**

發(fā)表評(píng)論

0條評(píng)論

VincentFF

男|高級(jí)講師

TA的文章

tensorflow文檔

高并發(fā)下秒殺商品，必須知道的9個(gè)細(xì)節(jié)

LeetCode 563 二叉樹的坡度[dfs] HERODING的LeetCode之路

#黑五#bacloud：全場(chǎng)KVM VPS一次性5折，獨(dú)立服務(wù)器6折優(yōu)惠，美國(guó)/荷蘭/立陶宛機(jī)房

快云科技: 11.11鉅惠美國(guó)云機(jī)2H5G年付148僅有40臺(tái)，云服務(wù)器全場(chǎng)7折，香港云服務(wù)器年付

C++仍然是最好的語言

vue中如何實(shí)現(xiàn)后臺(tái)管理系統(tǒng)的權(quán)限控制

H5 input[type='date'] 優(yōu)化 pc端和移動(dòng)端的使用

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！

如何實(shí)現(xiàn)元素曝光上報(bào)

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！