由于公司运营需求,需要给代码埋点,而埋点并不是一个和业务强相关的代码,各个页面的埋点工作量也非常的大,一直琢磨能不能自动埋点呢,于是就有了下面的探索
公司通过uni-app开发的主要是微信小程序,所以本文主要是以开发微信小程序的自动化埋点为主
诸如市面上各种统计代码,需要上报埋点事件时,以百度移动统计为例
getApp().mtj.trackEvent(event, args);就可以上报事件和参数
代码虽然很简单,但每个页面统计的点少的三四个,多的上十个,各个地方的统计代码加起来,数量比较大,而且不方便统一管理。
于是,我想到了方案一
- 在main.js中加入方法
2.在每一个page和component最外层的<view>标签中加入click方法,此时点击页面中的所有任意元素,都会有事件传输到elementTracker方法中,通过判断clickInfo.target是不是目标统计元素,从而决定是否上报,数据也可以从dataset中取到
但这个方法有个不好的地方就是
在这种嵌套结构的view当中时,只有target只会有你点击的对象,也就是你点的是image就只能取image的dataset,点击的是外层的view取外层view的dataset,情况往往是点击view和点击image触发的是同一事件,可能在这里你需要重复写两遍
有没有更好的解决方案呢,答案是有的,利用的是微信的wx.createSelectorQuery,通过点击时计算点击的x,y计算是否落在需要统计的元素上,于是就产生了下面这段代码
通过计算点击区域是否落在需要统计的元素上,这样解决了点击父组件需要统计,点击子组件统计不到的问题
这时,我们的统计代码合元素可以写到一个统一的配置文件里
但是这个方法也不是完美的,有两个bug,一是触发wx.createSelectorQuery返回的异步的结果需要时间,可能页面跳走,元素隐藏或不渲染导致找不到需要统计的元素了,二就是如果元素有重叠,如何知道哪个是在上面的元素
第二个问题我用了一个stop参数标识只要这个元素上报了,那这次点击接下来就停止上报。
参考项目 https://github.com/zhengguorong/xbosstrack-wechat