在一个很完善的系统上，增加埋点功能收集用户行为，而不大规模改变现有代码，如何做？

最近在开发一个后台管理系统（https://oa.hixiaoe.com），临近上线的前一周，产品组要求即时收集用户的所有行为，后台分析用户数据，为以后的业务发展，以及页面设计，用户体验等方面提供决策参考。例如：（1）用户浏览一篇文章，停留了多长时间，滚动条滚动到文章页面长度的百分之几的位置。（2）页面上的同类功能的不同按钮，点击的次数，点击时间。主要的逻辑就是某人在什么地方做了什么事情，做了多长时间，怎么做的，从哪里进入，然后又到了另一个哪里。用户敢在我这挥一挥衣袖，绝对带走他所有的云彩，甚至底裤；

 

问题是临近上线的前一周，产品组提这种需求，而且必须要按原项目计划如期上线，产品组还表达了中心思想：如果缺了这功能，就像一个不完美的男人进了女人堆，而无法了解到女人的心，更无法得到女人的爱。此时作为一个程序猿的你，是不是已经拔出了42米的长刀。

但是我们有一个叫某小小的猿类，不信邪，就是要挑战一下，在一周时间内证明自己是个完美的男人。

 

首先，系统的功能都已经开发完了，在页面的元素和js代码里一个一个埋点，显然工作量太大，而且侵入性太强，对现有系统造成破坏性很大；

能不能在现有的事件源上，加一个标记，页面渲染完之后，自动给事件源注册埋点函数，自动收集相关数据，然后异步提交到后台；经过一番论证和Demo实验，得出的结论是可行的，于是开发出一套前端代码，并且是可以同时给多个系统进行接入的；

 

现在就分享前端代码，坐稳了，马上开车：

1）假如有OA系统，CRM系统都要埋点，那么需要有个区分系统的标识。即在每个系统的需要埋点页面上（当然可以统一写到你的公共头页面上）增加一个系统标识，代码如下：

这里的标识tenant-admin，就代表一个接入的系统。后台数据分析系统就能区别不同的业务系统的埋点数据了。

2）在页面的事件源元素上，扩展一个叫event_id的属性，值是一个埋点编号，该编号就代表一个用户行为，后台数据分析时，就是按埋点编号进行区分；

3）然后通过js代码，在设置了event_id属性的元素上，自动注册‘点击’事件，如果是滚动条滚动事件，鼠标移动事件，也是类似方式；‘点击’事件的js代码的核心逻辑如下：

在页面渲染完后，自动注册事件：

$(function(){
    $(document).on("click", "[event_id]", function (e) {
        console.log("click进入了burying-point")
        var targetUrl = this.nodeName =="A"&&$(this).attr('href')&&$(this).attr('href').indexOf("javascript")==-1?$(this).attr('href'):'';
        buryingPoint($(this).attr('event_id'),targetUrl)
    });
})

提交埋点数据的实际函数，代码如斯：

function buryingPoint(eventId){
    if(!eventId){
        return ;
    }
    var targetUrl =  arguments[1]?arguments[1]:'';
    var params={
        eventId: eventId,
        lappClientId:$("[name=lapp_client_id]").attr("content")?$("[name=lapp_client_id]").attr("content"):'',
        location:window.location.href,
        triggeringTime:new Date().getTime(),
        targetUrl:targetUrl,
        clientType:getClient(),
        externalMount :getMount(),
        os:getOS(),
        deviceNum:whaleToken?md5(whaleToken):"",
        browser:getBrowser(),
        screenRatio:window.screen.width+"*"+window.screen.height
    }
    $.ajax({
        url:getUrl()+"/track/bpl/event/add?token="+whaleToken,
        dataType: "json",
        contentType: 'application/json',
        data: JSON.stringify(params),
        type: "POST"
    })
}

到此，前端的核心代码展示完毕，至于后台如何接收数据？如何在几百万用户时时刻刻并发提交埋点数据的情况下，做到系统稳定？即时数据落盘？实时分析用户行为，生成用户画像？请继续关注我的博客，了解更多技术内幕。如果您愿意一键三连，我会更新地更快哦，^_^；

作者介绍：小文文，狐小E智慧办公 （https://www.hixiaoe.com）开发工程师，专注移动办公软件的SaaS平台建设以及轻应用开发