如何优雅的处理页面埋点代码
页面埋点是一种比较做业务的时候经常处理的事情,他与业务功能关系不大,却是业务数据收集的基础,用户点击啦,页面PV,UV啦,停留时长之类等等。这些代码片段分散在你的项目的各个角落,维护起来是否不便利。
所谓优雅的埋点我的理解它需要满足以下要求
1. 对业务功能无影响,不能因为埋点的代码错误之类阻断业务流程的执行。
2. 维护起来比较方便,最好能在收敛到一个js里维护所有的埋点逻辑。
3. 业务代码不要和埋点逻辑混杂太严重。移除埋点js对业务无感知
建一个log.js处理埋点需求,
在一个类似于base的js里引入这个log.js ( 其实也可以不引入,我引入是为了方便打包在一起),我是在tool.js里引入的
在base.js里暴露一个方法比如:
function log(logTxt,logInfo){ j_window.trigger("log",[logTxt,logInfo]); } //在其他模块只需要调用log("pageName","btnXXX");就好了
4. 在log.js中监听log事件
function sendLog(logTxt,logInfo){ //balabala一堆逻辑,比如ali就是黄金令箭啊spm之类的。。。 var img = new Image(); var t = new Date().getTime(); img.src=url+'&t='+t; } } $(window).on("log",function(event,log,logInfo){ sendLog(log,isSpm); });
5. 在SPA中统计子页面的PV UV也很简单比如我用的vue+vueRouter,只需要在router的钩子里加一个方法执行一下sandUV就好了
var router = new VueRouter({ ... }) router.beforeEach((to, from, next) => { var pathName = to.name; log(pathName,true); next(); })
发表评论