小程序自动埋点教程

埋点

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

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

代码埋点

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

自动埋点

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

就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函数，注入埋点。

1. var oldApp = App
2. App = function(args) {
3. ... // 改写周期方法
4. oldApp(args)
5. }
6. 复制代码

如以上代码所示，劫持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指向的就是这个全局对象，所以我们可以在上面代码块中定义自定义埋点方法：

1. --- app.js
2. args.onLaunch = function(opt) {
3. this[track] = function() {
4. ... // 自定义埋点代码
5. }
6. ...
7. }
9. --- Page的index.js
10. var app = getApp()
11. app.track(name) // 发送自定义报文
12. 复制代码

小程序天然的生命周期相对于web应用来说，对埋点需求友好很多，如何控制和实现可视化埋点是我们需要努力的方向。