如何优雅的处理页面埋点代码

        页面埋点是一种比较做业务的时候经常处理的事情,他与业务功能关系不大,却是业务数据收集的基础,用户点击啦,页面PV,UV啦,停留时长之类等等。这些代码片段分散在你的项目的各个角落,维护起来是否不便利。

        所谓优雅的埋点我的理解它需要满足以下要求

            1. 对业务功能无影响,不能因为埋点的代码错误之类阻断业务流程的执行。

            2. 维护起来比较方便,最好能在收敛到一个js里维护所有的埋点逻辑。

            3. 业务代码不要和埋点逻辑混杂太严重。移除埋点js对业务无感知


下面大致记录一下我在一个单页应用(spa)中处理埋点的方式

  1. 建一个log.js处理埋点需求,

  2. 在一个类似于base的js里引入这个log.js ( 其实也可以不引入,我引入是为了方便打包在一起),我是在tool.js里引入的

  3. 在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();
})


本文标题:如何优雅的处理页面埋点代码
本文链接:https://56way.com/p/97.html
作者授权:除特别说明外,本文由 无路 原创编译并授权 小无路 刊载发布。
版权声明:本文不使用任何协议授权,您可以任何形式自由转载或使用。

发表评论

必填

选填

选填

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。