vue項目埋點

主流埋點方案

目前主流的埋點方案包括

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指令，加上詳情參數就可以完成用戶軌跡記錄。如下:

資源搜索網站大全https://55wd.com 廣州品牌設計公司http://www.maiqicn.com

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