在一個很完善的系統上，增加埋點功能收集使用者行為，而不大規模改變現有程式碼，如何做？
最近在開發一個後臺管理系統（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) {
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平臺建設以及輕應用開發