最近在开发一个后台管理系统（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平台建设以及轻应用开发
在一个很完善的系统上，增加埋点功能收集用户行为，而不大规模改变现有代码，如何做？
原文：https://www.cnblogs.com/astroqi/p/13370885.html