什麼是資料埋點

所謂資料埋點就是應用在規定流程中 對特定行為或事件進行資料採集 。使用採集的資料做使用者分析和頁面分析，可以獲得應用的總體使用情況，為後續優化產品和運營提供資料支撐。常見資料埋點內容包括：訪問量、停留時長、曝光量、點選量、跳出率等等。

微信小程式也為我們提供了自定義分析統計，其中包括 API 上報（程式碼埋點），填寫配置（無埋點，只需在公眾後臺配置）。而第三方統計平臺比較有名的就是阿拉丁統計，只需引入整合的 SDK，開發成本低，能夠滿足大部分的需求。

資料埋點需要分析頁面流程，確定埋點需求，選擇埋點方式。如果是程式碼埋點，主要關注觸發時機、條件判斷、捕獲資料，其次要注意是否有遺漏的場景沒有做到埋點。程式碼埋點雖然成本較大（侵入程式碼），但是精準度較高，能夠很好的滿足埋點需求。

什麼是曝光量

曝光量顧名思義是 指定元素出現在可觀察檢視內的次數 ，也可以理解為展示量。

通常我們會使用 點選量 / 曝光量 得出 點選率 ，作為衡量一個內容是否受使用者喜愛的指標之一。比如，曝光 100 次只有 10 人點選，和曝光 100 次 有 100 個人點選，很明顯後者更受使用者喜愛。利用這些資料參考，可以推薦更多使用者喜愛的內容，以此來留住使用者。

交叉觀察者

IntersectionObserver 介面，提供了一種非同步觀察 目標元素與其祖先元素或頂級文件視窗(viewport)交叉狀態 的方法，祖先元素與視窗(viewport)被稱為根(root)。簡單來說就是，觀察的目標是否和祖先元素和視窗發生交叉，即進入或離開。

小程式從基礎庫 1.9.3 開始支援 wx.createIntersectionObserver 介面(元件內使用 this.createIntersectionObserver )，使用此介面可建立 IntersectionObserver物件 。對此介面不瞭解的可以檢視官方文件。

基礎使用

// 建立例項
let ob = this.createIntersectionObserver()
// 相對於文件視窗監聽
ob.relativeToViewport()
    .observe('.box', res => {
        // res.intersectionRatio 為相交比例
        if (res.intersectionRatio > 0) {
            console.log('進入頁面')
        } else {
            console.log('離開頁面')
        }
    })
 

閾值

在建立例項時可以傳入一些配置，其中 thresholds （閾值）是比較重要的一項配置，它可以控制觸發回撥的時機。 thresholds 是一個數字型別的陣列，預設為 [0] 。即相交比例為 0 時觸發一次回撥，下面我們來設定閾值，看看會有什麼改變：

// 建立例項
let ob = this.createIntersectionObserver({
    thresholds: [0, 0.5, 1]
})

從圖上可以看到，元素在相交比例為 0 、 0.5 、 1 都各自觸發了一次回撥。在統計曝光量設定閾值非常有用，通常我會設定為 1 ，表示元素要完全展示在頁面上才會進行記錄，這樣資料會更加真實準確。

收縮和擴充套件參照區域

除了閾值之外還有另一項重要的設定，在使用 relativeTo 或 relativeToViewport 規定參照區域時，我們可以傳入配置 margins 來收縮和擴充套件參照區域。 margins 包括 left 、 right 、 top 、 bottom 四個引數配置。

// 建立例項
let ob = this.createIntersectionObserver()
// 相對於文件視窗監聽
ob.relativeToViewport({
        bottom: -330
    })
    .observe('.box', res => {
        // res.intersectionRatio 為相交比例
        if (res.intersectionRatio > 0) {
            console.log('進入頁面')
        } else {
            console.log('離開頁面')
        }
    })

上面將參照區域底部收縮 330px，可以理解為整體的區域從底部開始被裁剪 330px，因此元素只有進入頁面上半區才會觸發回撥。

進入正題

經過以上一些介紹，相信大家對交叉觀察者的好處和使用都瞭解的差不多。接下來進入正題 ~

背景

此次我做的專案是資訊類目的小程式，主要用於釋出和轉載一些學術文章。對於這種資訊的專案，需要通過資料埋點來收集使用者的閱讀習慣，以此來為使用者推薦文章。

埋點方面用微信後臺提供的自定義分析以文章為單位進行收集，而我們自己後臺會以使用者為單位進行收集。前者得出整體使用者閱讀偏好和文章熱度，後者主要精確到使用者，分析使用者單位的閱讀偏好。

改造元件

在分析頁面佈局和pm的商討後，多處需要統計曝光量的文章區域展示都大致相同，剛好也在封裝的列表元件裡。於是將收集曝光量的邏輯都交由元件內部處理。

元件改造：

1. 定義 isObserver 屬性，該屬性由外部傳入的布林值控制是否收集曝光量
2. 監聽傳入的 list ，為每個元素繫結交叉觀察者

以下部分程式碼省略，只展示主要邏輯：

<block wx:for="{{list}}" wx:key="id">
    <view class="artic-item artic-item-{{index}}" data-id="{{item.id}}" data-index="{{index}}">
    </view>
</block>

const app = getApp()
Component({
    data: {
        currentLen: 0
    }
    properties: {
        list: {
            type: Array,
            value: []
        },
        isObserver: {
            type: Boolean,
            value: false
        }
    },
    observers: {
        list(list) {
            if (this.data.isObserver === false) {
                return
            }
            if (list.length) {
                // currentLen 記錄當前列表的長度
                // 用於計算監聽元素的索引，對已經監聽過的元素不再重複監聽
                let currentLen = this.data.currentLen
                for (let i = 0; i < list.length - currentLen; i++) {
                    let ob = this.createIntersectionObserver({
                        thresholds: [1]
                    })
                    ob.relativeToViewport()
                        .observe('.artic-item-' + (currentLen + i), res => {
                            // 獲取元素的dataset
                            let {
                                id,
                                index
                            } = res.dataset
                            if (res.intersectionRatio === 1) {
                                // 此處收集曝光量，內部處理邏輯會在下面提及
                                this.sendExsureId(id)
                                // 元素出現後取消觀察者監聽，避免重複觸發
                                ob.disconnect()
                            }
                        })
                }
            }
            this.data.currentLen = list.length
        }
    }
})

發現