淺談微信小程式列表埋點曝光指南
阿新 • • 發佈:2020-11-26
背景
最近專案中,開發一個小程式列表頁,PM大大給我提了一個埋點需求,列表中的每一項,出現在螢幕中的時候,需要上報一條記錄。
目標
如圖中操作,要依次上報 item 1 - item7,但是上滑的時候,不再重複上報
怎麼做
接到需求的第一感覺是,我難道要監聽頁面滾動,然後通過offsetTop 去算嗎!!!??? 這樣顯然不是最高效的。於是我去翻了一下微信的開發文件,發現有一個IntersectionObserver 的API,正好滿足我的需求。
首先我們需要建立一個 IntersectionObserver wx.createIntersectionObserver(Object component, Object options)
IntersectionObserver
一共有四個方法
- IntersectionObserver.relativeTo 使用選擇器指定一個節點,作為參照區域之一。
- IntersectionObserver.relativeToViewport(Object margins) 指定頁面顯示區域作為參照區域之一
- IntersectionObserver.observeCallback callback) 指定目標節點並開始監聽相交狀態變化情況
- IntersectionObserver.disconnect()
- 停止監聽。回撥函式將不再觸發
我們這裡的參照物是螢幕,所以我們使用 IntersectionObserver.relativeToViewport
Page({ data: { list: [ { value: 1, hadReport: false }, { value: 2, hadReport: false }, { value: 3, hadReport: false }, { value: 4, hadReport: false }, { value: 5, hadReport: false }, { value: 6, hadReport: false }, { value: 7, hadReport: false }, { value: 8, hadReport: false }, { value: 9, hadReport: false }, ] }, onLoad() { this._observer = this.createIntersectionObserver({ observeAll: true }) this._observer.relativeToViewport({ bottom: 0 }) .observe('.item', (res) => { const { index } = res.dataset; if (!this.data.list[index].hadReport) { console.log(`report ${index}`) this.data.list[index].hadReport = true; this.setData({ list: [].concat(this.data.list)}) } }) }, onUnload() { if (this._observer) this._observer.disconnect() } })
最後實現的效果如下
結論
- 類似這樣的埋點,我們以後可以採用監聽dom的方式去做,而不是一昧的只想著監聽滾動計算位置。
- 除了可以做埋點上報,這種監聽的方式,還是很適合去做一些圖片懶載入等一系列操作。
聯想
上述的所有操作,都是基於微信小程式去做的,那麼瀏覽器有沒有相應的API呢?
瀏覽器是有相應的API的, Intersection Observer API ,具體的用法與上述的用法類似。
var options = { rootMargin: '0px', threshold: 1.0 } var observer = new IntersectionObserver((...args) => { console.log(args); }, options); observer.observe(document.querySelector('.item'));
注意這個會監測dom元素的可見性變化,也就是說當dom出現在視窗的時候會觸發回撥,消失在視窗的時候也會觸發回撥
但是瀏覽器的 IntersectionObserver
屬性相容性一般,如果想要在瀏覽器做曝光或者懶載入可以考慮採用原始的方法,監聽瀏覽器滾動,並計算dom的offsetTop,可以參考筆者很久前寫的 圖片延時 載入原理 及應用
參考文件
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援碼農教程。