vue項目埋點

主流埋點方案

目前主流的埋點方案包括

1. 代碼埋點
2. 可視化埋點
3. 無埋點

1、代碼埋點

​ 在須要埋點的節點調用接口，攜帶數據上傳。如百度統計等；

​ 缺點

​ 工做量較大，每個組件的埋點都須要添加相應的代碼，入侵業務代碼，增長項目複雜度。

2、可視化埋點

​ 經過可視化交互的手段，代替代碼埋點。將業務代碼和埋點代碼分離，提供一個可視化交互的頁面，輸入爲業務代碼，經過這個可視化系統，能夠在業務代碼中自定義的增長埋點事件等等，最後輸出的代碼耦合了業務代碼和埋點代碼。

​ 可視化埋點聽起來比較高大上，實際上跟代碼埋點仍是區別不大。也就是用一個系統來實現手動插入代碼埋點的過程。

​ 缺點:

​ 業務屬性數據，例如，訂單號、金額、商品數據量等，一般要調用後臺的接口，可視化埋點在這方面的支持有限；

​ 須要藉助第三方工具實現。

3、無埋點

無埋點並非說不須要埋點，而是所有埋點，前端的任意一個事件都被綁定一個標識，全部的事件都別記錄下來。
經過按期上傳記錄文件，配合文件解析，解析出來咱們想要的數據，
並生成可視化報告供專業人員分析所以實現「無埋點」統計。

​ 缺點

​ 沒法靈活的定製各個事件所須要上傳的數據

​ 無埋點採集全量數據，給數據傳輸和服務器增長壓力

代碼埋點分類

​ 代碼埋點分爲 命令式埋點和聲明式埋點

命令式埋點

​ 顧名思義，開發者須要手動在須要埋點的節點處進行埋點。如點擊按鈕或連接後的回調函數、頁面ready時進行請求的發送。你們確定都很熟悉這樣的代碼

$(document).ready(function(){    
 
    // ... 這裏存在一些業務邏輯    
 
    sendRequest(params);  //埋點
 
});
 
 // 按鈕點擊時發送埋點請求
 
 $('button').click(function(){    
 
    // ... 這裏存在一些業務邏輯    
 
    sendRequest(params);  //埋點
 
});

聲明式埋點

​ 聲明式埋點對命令式埋點作了改進，將埋點的代碼與具體的業務邏輯解耦。從而提升埋點的效率和代碼的可維護性。代碼以下:

// key表示埋點的惟一標識；act表示埋點方式
<button v-log="{caption:'登陸頁', paras: '用戶點擊驗證碼發送'}">發送驗證碼</button>



//自定義指令
Vue.directive('log', {
 
    bind( el, binding ){
 
 
        el.addEventListener('click', ()=>{
 
            Axios.post  //發送請求
 
        })
 
    }
 
})

只須要在須要記錄的組件中配置使用v-log指令，加上詳情參數就能夠完成用戶軌跡記錄。以下:

// caption表示埋點的模塊；paras表示用戶的行爲
<button v-log="{caption:'登陸頁', paras: '用戶點擊驗證碼發送'}">發送驗證碼</button>