小程序中無痕埋點(diǎn)的示例分析

小編給大家分享一下小程序中無痕埋點(diǎn)的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

背景

微信小程序發(fā)布以來，已經(jīng)從小巧和用完即走的定位，變成了包含復(fù)雜功能和完整業(yè)務(wù)的移動應(yīng)用。

隨之而來的是，生產(chǎn)運(yùn)營會出現(xiàn)更多難以定位和無法簡單復(fù)現(xiàn)的bug，尤其本人從事銀行業(yè)務(wù)開發(fā)，穩(wěn)定性要求極高，不然很容易造成客訴甚至資金損失。

另外，為了做了用戶研究，需要了解用戶如何使用我們的小程序，如路由時(shí)序、點(diǎn)擊流等。

以上都需要有完整可用的日志來發(fā)現(xiàn)和定位生產(chǎn)問題，跟蹤用戶行為。

日志種類

翻查api文檔，小程序打印日志方式有三種，簡單描述如下：

1. 控制臺日志（console）：開發(fā)測試階段用于調(diào)試

2. 實(shí)時(shí)日志（wx.getRealtimeLogManager）：實(shí)時(shí)記錄用戶操作，官方提供了很好的過濾篩選，可以精準(zhǔn)定位到具體日志；日限500w條，不過多個(gè)打印會合并成一條上報(bào)；最多保留7天。傳送門

3. 本地日志（ wx.getLogManage）：客戶端本地日志，用戶點(diǎn)擊“反饋與投訴”或者點(diǎn)擊頁面中的反饋組件可以同步到管理臺；最大5m。傳送門

集合上報(bào)和數(shù)據(jù)脫敏

對于具體的問題可能需要通過不同的日志來定位，或者結(jié)合起來相互印證用戶的行為。

所以我們需要同時(shí)上報(bào)幾種日志，但對于某些業(yè)務(wù)敏感數(shù)據(jù)可能不適合上報(bào)到外系統(tǒng)（微信服務(wù)器）或保存在客戶端本地，我們可以在封裝的集合上報(bào)函數(shù)中先對數(shù)據(jù)進(jìn)行脫敏處理。

做法很簡單，遍歷日志對象，通過正則匹配，把敏感數(shù)據(jù)打碼。

脫敏后的實(shí)時(shí)日志如下：

可以參考我們封裝的日志插件 @wxa/log

無痕埋點(diǎn)

事件捕獲

一般來說，前端日志至少包括：路由切換信息，腳本錯(cuò)誤日志，接口請求數(shù)據(jù)，用戶交互信息

在小程序中，前三可以通過官方監(jiān)聽接口和封裝函數(shù)的方法來抓取數(shù)據(jù)并且上報(bào)。

唯獨(dú)用戶交互信息，因?yàn)樾〕绦虻碾p線程架構(gòu)，導(dǎo)致沒辦法像h6那樣直接在document對象中抓取用戶事件。只能在每個(gè)wxml模版最外層綁定事件來監(jiān)聽用戶行為。

但是對于非冒泡事件（如catchtap）和組件事件（如getuserinfo），還是沒辦法捕獲。

再者，也沒辦法捕獲所有事件，組件事件是不會冒泡的。

劫持事件

另辟蹊徑，能不能劫持小程序中所有事件函數(shù)來實(shí)現(xiàn)事件捕獲？可以。

微信小程序中普通事件和組件事件都是bind$event\text{或}catch${event}。可以把模版中所有這形式的key對應(yīng)的值都替換成我們定義的hook。

在hook函數(shù)中完成事件捕獲和上報(bào)，再執(zhí)行原來綁定的事件，實(shí)現(xiàn)類似beforeEevent和afterEvent的事件鉤子函數(shù)。

組件標(biāo)識

事件對象中并沒有觸發(fā)事件的組件的詳細(xì)信息（類似xpath的元數(shù)據(jù)），要是頁面有兩個(gè)組件都綁定了同一個(gè)事件，那我們要怎么區(qū)分用戶是點(diǎn)擊了哪個(gè)組件觸發(fā)的事件。

可以結(jié)合組件的組件名、id、class等信息給組件構(gòu)造一個(gè)id，格式為：

eventName*tagName#id.class(data)復(fù)制代碼

例如

<button id="btn" class="confirm" bindtap="submit">確認(rèn)</button>復(fù)制代碼

通過劫持事件和增加標(biāo)識信息后，實(shí)際輸出的代碼為 ：

<button id="btn" class="confirm" 
    bindtap="beforeTag" 
    data-wxa-hijack="sumbit" 
    mark:eleId="tap*button#btn.confirm(確認(rèn))">確認(rèn)</button>復(fù)制代碼

然后在事件對象中可以通過 e.mark.eleId來拿到組件標(biāo)識

實(shí)現(xiàn)攔截函數(shù)

import BindHijackPlugin from "@wxa/plugin-bind-hijack/runtime";

wxa.use(BindHijackPlugin, {
    beforeTap: function(e){
        $log('tap event', e);
    },
    afterTap: function(e){
        console.log('afterTap', e);
    },
    before: function(e){ //所有事件攔截
        console.log('before', e);
    },
    after: function(e){
        console.log('after', e);
    },
});復(fù)制代碼

自動事件

需要注意的是，小程序中有些事件是自動執(zhí)行的，例如組件swiper當(dāng)設(shè)置autoplay為true之后，在指定間隔下會自動執(zhí)行change事件，需要通過判斷source來排除非用戶行為，否則鉤子函數(shù)會一直被觸發(fā)。

實(shí)現(xiàn)

基于wxa框架，我們以插件形式來實(shí)現(xiàn)了所有事件的攔截。

wxa小程序框架參照webpack基于tapable事件流構(gòu)建起的編譯時(shí)插件系統(tǒng)，可以方便擴(kuò)展其功能。結(jié)合wxa編譯完成鉤子和htmlprase庫，對wxml文件的事件函數(shù)進(jìn)行篡改以及生成元素id。具體可以直接查悅源碼 @wxa/plugin-bind-hijack

wxa小程序框架

wxa小程序框架專注于小程序原生開發(fā)，在保留小程序簡單入門、快速開發(fā)的特點(diǎn)下，提供一系列能力，解決工程化、代碼復(fù)用的痛點(diǎn)，提高開發(fā)效率并改善開發(fā)體驗(yàn)。

以上是“小程序中無痕埋點(diǎn)的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！