瞭解小程式無痕埋點

2020-09-30 18:00:38

今天欄目為大家介紹小程式無痕埋點。

背景

微信小程式釋出以來，已經從小巧和用完即走的定位，變成了包含複雜功能和完整業務的移動應用。

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

另外，為了做了使用者研究，需要了解使用者如何使用我們的小程式，如路由時序、點選流等。

以上都需要有完整可用的紀錄檔來發現和定位生產問題，跟蹤使用者行為。

紀錄檔種類

翻查api檔案，小程式列印紀錄檔方式有三種，簡單描述如下：

控制檯紀錄檔（console）：開發測試階段用於偵錯
實時紀錄檔（wx.getRealtimeLogManager）：實時記錄使用者操作，官方提供了很好的過濾篩選，可以精準定位到具體紀錄檔；日限500w條，不過多個列印會合併成一條上報；最多保留7天。傳送門
本地紀錄檔（ wx.getLogManage）：使用者端本地紀錄檔，使用者點選「反饋與投訴」或者點選頁面中的反饋元件可以同步到管理臺；最大5m。傳送門

集合上報和資料脫敏

對於具體的問題可能需要通過不同的紀錄檔來定位，或者結合起來相互印證使用者的行為。

所以我們需要同時上報幾種紀錄檔，但對於某些業務敏感資料可能不適合上報到外系統（微信伺服器）或儲存在使用者端本地，我們可以在封裝的集合上報函數中先對資料進行脫敏處理。

做法很簡單，遍歷紀錄檔物件，通過正則匹配，把敏感資料打碼。

脫敏後的實時紀錄檔如下：

可以參考我們封裝的紀錄檔外掛 @wxa/log

無痕埋點

事件捕獲

一般來說，前端紀錄檔至少包括：路由切換資訊，指令碼錯誤紀錄檔，介面請求資料，使用者互動資訊

在小程式中，前三可以通過官方監聽介面和封裝函數的方法來抓取資料並且上報。

唯獨使用者互動資訊，因為小程式的雙執行緒架構，導致沒辦法像h5那樣直接在document物件中抓取使用者事件。只能在每個wxml模版最外層繫結事件來監聽使用者行為。

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

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

劫持事件

另闢蹊徑，能不能劫持小程式中所有事件函數來實現事件捕獲？可以。

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

在hook函數中完成事件捕獲和上報，再執行原來繫結的事件，實現類似beforeEevent和afterEvent的事件勾點函數。

元件標識

事件物件中並沒有觸發事件的元件的詳細資訊（類似xpath的後設資料），要是頁面有兩個元件都繫結了同一個事件，那我們要怎麼區分使用者是點選了哪個元件觸發的事件。

可以結合元件的元件名、id、class等資訊給元件構造一個id，格式為：

eventName*tagName#id.class(data)複製程式碼

例如

<button id="btn" class="confirm" bindtap="submit">確認</button>複製程式碼

通過劫持事件和增加標識資訊後，實際輸出的程式碼為：

<button id="btn" class="confirm" 
    bindtap="beforeTag" 
    data-wxa-hijack="sumbit" 
    mark:eleId="tap*button#btn.confirm(確認)">確認</button>複製程式碼

然後在事件物件中可以通過 e.mark.eleId來拿到元件標識

實現攔截函數

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);
    },
});複製程式碼

自動事件

需要注意的是，小程式中有些事件是自動執行的，例如元件swiper當設定autoplay為true之後，在指定間隔下會自動執行change事件，需要通過判斷source來排除非使用者行為，否則勾點函數會一直被觸發。

實現

基於wxa框架，我們以外掛形式來實現了所有事件的攔截。

wxa小程式框架參照webpack基於tapable事件流構建起的編譯時外掛系統，可以方便擴充套件其功能。結合wxa編譯完成勾點和htmlprase庫，對wxml檔案的事件函數進行篡改以及生成元素id。具體可以直接查悅原始碼 @wxa/plugin-bind-hijack

wxa小程式框架

wxa小程式框架專注於小程式原生開發，在保留小程式簡單入門、快速開發的特點下，提供一系列能力，解決工程化、程式碼複用的痛點，提高開發效率並改善開發體驗。

相關免費學習推薦：

以上就是了解小程式無痕埋點的詳細內容，更多請關注TW511.COM其它相關文章！