在一個很完善的系統上，增長埋點功能收集用戶行爲，而不大規模改變現有代碼，如何作？

最近在開發一個後臺管理系統（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平臺建設以及輕應用開發