【每日一題】頁面埋點(diǎn)怎么實(shí)現(xiàn)？

現(xiàn)有的埋點(diǎn)類型

1. 手動(dòng)代碼埋點(diǎn): 在需要采集數(shù)據(jù)的地方調(diào)用埋點(diǎn)的方法。在任意地點(diǎn)任意場景進(jìn)行數(shù)據(jù)采集
2. 可視化埋點(diǎn): 元素都帶有唯一標(biāo)識(shí)。通過埋點(diǎn)配置后臺(tái)，將元素與要采集事件關(guān)聯(lián)起來，可以自動(dòng)生成埋點(diǎn)代碼嵌入到頁面中。
3. 無埋點(diǎn): 前端自動(dòng)采集全部事件，上報(bào)埋點(diǎn)數(shù)據(jù)，由后端來過濾和計(jì)算出有用的數(shù)據(jù)，

基本實(shí)現(xiàn)的方案

約定通用的埋點(diǎn)采集接口規(guī)范:
如header(標(biāo)識(shí)X-Device-Id, X-Source-Url,X-Current-Url,X-User-Id等信息), body(標(biāo)識(shí)PageSessionID, Event, PageTitle,CurrentTime, ExtraInfo);

指定調(diào)用采集腳本的方式:
單頁面應(yīng)用 => 對(duì)history路徑的變化保持監(jiān)聽,路徑變化時(shí)觸發(fā)埋點(diǎn)收集;
頁面加載離開綁定對(duì)應(yīng)的onload,unload事件;
頁面元素上綁定相關(guān)的交互事件(click, event等)。

偽代碼

var collect = {
    deviceUrl:'',
    eventUrl:'',
    isuploadUrl:'',
    parmas:{},
    device:{}
};

//獲取埋點(diǎn)配置
collect.setParames = function(){}

//更新訪問路徑及頁面信息
collect.updatePageInfo = function(){}

//獲取事件參數(shù)
collect.getParames = function(){}

//獲取設(shè)備信息
collect.getDevice = function(){}

//事件采集
collect.send = function(){}

//設(shè)備采集
collect.sendDevice = function(){}

//判斷是否采集，埋點(diǎn)采集的開關(guān)
collect.isupload = function(){

/*
1. 判斷是否采集，不采集就注銷事件監(jiān)聽（項(xiàng)目中區(qū)分游客身份和用戶身份的采集情況，這個(gè)方法會(huì)被判斷兩次）
2. 采集則判斷是否已經(jīng)采集過
    a.已經(jīng)采集過不做任何操作
    b.沒有采集過添加事件監(jiān)聽
3. 判斷是 混合應(yīng)用還是純 web 應(yīng)用
    a.如果是web 應(yīng)用，調(diào)用 collect.setIframe 設(shè)置 iframe
    b.如果是混合應(yīng)用 將開始加載和加載完成事件傳輸給 app
*/

}

//點(diǎn)擊事件處理函數(shù)
collect.clickHandler = function(){}

//離開頁面的事件處理函數(shù)
collect.beforeUnloadHandler = function(){}

//頁面回退事件處理函數(shù)
collect.onPopStateHandler = function(){}

//系統(tǒng)事件初始化，注冊(cè)離開事件，瀏覽器后退事件
collect.event = function(){}

//獲取記錄開始加載數(shù)據(jù)信息
collect.getBeforeload = function(){}

//存儲(chǔ)加載完成，獲取設(shè)備類型，記錄加載完成信息
collect.onload = function(){
/*
    1. 判斷cookie是否有存設(shè)備類型信息，有表示混合應(yīng)用
    2. 采集加載完成時(shí)間等信息
    3. 調(diào)用 collect.isupload 判斷是否進(jìn)行采集
*/
}

//web 應(yīng)用，通過嵌入 iframe 進(jìn)行跨域 cookie 通訊，設(shè)置設(shè)備id
collect.setIframe = function(){}

//app 與 h5 混合應(yīng)用，直接將數(shù)信息發(fā)給 app,判斷設(shè)備類型做原生方法適配器
collect.saveEvent = function(){}

//采集自定義事件類型
collect.dispatch = function(){}

//將參數(shù) userId 存入sessionStorage
collect.storeUserId = function(){}

//采集H5信息,如果是混合應(yīng)用，將采集到的信息發(fā)送給 app 端
collect.saveEventInfo = function(){}

//頁面初始化調(diào)用方法
collect.init = function(){
/*
    1. 獲取開始加載的采集信息
    2. 獲取 SDK 配置信息，設(shè)備信息
    3. 改寫 history 兩個(gè)方法，單頁面應(yīng)用頁面跳轉(zhuǎn)前調(diào)用我們自己的方法
    4. 頁面加載完成，調(diào)用 collect.onload 方法
*/

}


collect.init(); // 初始化

//暴露給業(yè)務(wù)方調(diào)用的方法
return {
    dispatch:collect.dispatch,
    storeUserId:collect.storeUserId,
}