小程序自动埋点教程

4,522 阅读3分钟

埋点

在这个大数据的时代里,数据是一个互联网发展的核心,除了对客户分析重要之外,公司对自己的产品能否客观的掌控也十分重要。

埋点的意思是在项目关键位置注入代码,代码会向服务器发送设备信息、用户操作、时间点等信息。

代码埋点

最简单实现埋点的方法,是让开发者在需要的地方添加一句代码,用来向服务器发起请求,汇报情况

自动埋点

埋点的代码和业务逻辑的代码是没有直接联系的,如果让开发者手动的在项目中添加代码,会增加项目耦合。不仅开发者麻烦,后期维护也增加了难度。所以能通过引入外部代码,自动在最常用的位置注入埋点,是更合理的一种手段。

就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应用来说,对埋点需求友好很多,如何控制和实现可视化埋点是我们需要努力的方向。