小程式自動埋點教程

boomyao發表於2018-11-30

埋點

在這個大資料的時代裡，資料是一個網際網路發展的核心，除了對客戶分析重要之外，公司對自己的產品能否客觀的掌控也十分重要。

埋點的意思是在專案關鍵位置注入程式碼，程式碼會向伺服器傳送裝置資訊、使用者操作、時間點等資訊。

程式碼埋點

最簡單實現埋點的方法，是讓開發者在需要的地方新增一句程式碼，用來向伺服器發起請求，彙報情況

自動埋點

埋點的程式碼和業務邏輯的程式碼是沒有直接聯絡的，如果讓開發者手動的在專案中新增程式碼，會增加專案耦合。不僅開發者麻煩，後期維護也增加了難度。所以能通過引入外部程式碼，自動在最常用的位置注入埋點，是更合理的一種手段。

就web端而言，一般選擇的注入點有：頁面載入完成、使用者點選連結、登入登出等場景。

小程式生命週期

小程式App函式有：onLaunch、onShow、onHide、onError、onPageNotFound五個週期方法，小程式啟動時會走onLaunch方法。

小程式有後臺機制，當使用者關閉當前小程式，回到微信頁面時，小程式不會直接結束程式，而是到記憶體佔用到了一定量後，微信會自動對小程式進行銷燬。

onShow與onHide兩個方法對應的就是小程式前後臺轉換，當使用者從微信到小程式時，onShow會被呼叫；反之，使用者從小程式到微信介面時，會呼叫onHide。

小程式每個頁面都是一個Page，每個Page有：onLoad/onReady/onShow/onHide/onUnload/onShareAppMessage/onPullDownRefresh等等週期方法。

小程式埋點

在小程式各個生命週期埋點，可以有效的收集到使用者運算元據，正常小程式開發者，這些週期方法都是由開發者宣告的。開發者可以在週期方法中寫入彙報伺服器程式碼，但就像之前說的，通過外部程式碼實現這一功能會是更好的選擇。
所以我們需要一些功能程式碼，實現自動注入埋點。

App與Page函式

小程式像是一個定製的webview，開啟App時，小程式首先會呼叫宣告的App函式，所以我們可以通過劫持App函式，注入埋點。

var oldApp = App
App = function(args) {
    ... // 改寫週期方法
    oldApp(args)
}
複製程式碼

如以上程式碼所示，劫持App函式後，進行改寫周期函式，最後執行真正的App函式。 args及為小程式app.js中配置的模型，包含了App的周期函式和globalData物件，例如，要在onLaunch方法中注入埋點：

function customLaunch(opt) {
    track() // 向伺服器彙報
}
var oldLaunch = args.onLaunch
args.onLaunch = function(opt) {
    if (oldLaunch) { // 如果小程式開發者有宣告
        oldLaunch.call(this, opt)
    }
    customLaunch.call(this, opt) // 自定義週期方法
}
複製程式碼

其他的週期方法，也可以用這種方式進行改寫。

擴充套件自動埋點

每個應用的需求都會不一樣，所以也需要給自動埋點賦予自定義埋點的能力。 在每個page的index.js中，我們可以用getApp()方法獲取到小程式全域性物件，App函式中的this指向的就是這個全域性物件，所以我們可以在上面程式碼塊中定義自定義埋點方法：

--- app.js
args.onLaunch = function(opt) {
    this[track] = function() {
        ... // 自定義埋點程式碼
    }
    ...
}

--- Page的index.js
var app = getApp()
app.track(name) // 傳送自定義報文
複製程式碼

小程式天然的生命週期相對於web應用來說，對埋點需求友好很多，如何控制和實現視覺化埋點是我們需要努力的方向。

相關文章