資訊專欄INFORMATION COLUMN
摘要：主流埋點(diǎn)方案目前主流的埋點(diǎn)方案包括代碼埋點(diǎn)可視化埋點(diǎn)無埋點(diǎn)一代碼埋點(diǎn)在需要埋點(diǎn)的節(jié)點(diǎn)調(diào)用接口，攜帶數(shù)據(jù)上傳。二可視化埋點(diǎn)通過可視化交互的手段，代替代碼埋點(diǎn)。也就是用一個系統(tǒng)來實(shí)現(xiàn)手動插入代碼埋點(diǎn)的過程。
主流埋點(diǎn)方案
目前主流的埋點(diǎn)方案包括
代碼埋點(diǎn)
可視化埋點(diǎn)
無埋點(diǎn)
? 在需要埋點(diǎn)的節(jié)點(diǎn)調(diào)用接口，攜帶數(shù)據(jù)上傳。如百度統(tǒng)計等；
? 缺點(diǎn)
? 工作量較大，每一個組件的埋點(diǎn)都需要添加相應(yīng)的代碼，入侵業(yè)務(wù)代碼，增加項(xiàng)目復(fù)雜度。
? 通過可視化交互的手段，代替代碼埋點(diǎn)。將業(yè)務(wù)代碼和埋點(diǎn)代碼分離，提供一個可視化交互的頁面，輸入為業(yè)務(wù)代碼，通過這個可視化系統(tǒng)，可以在業(yè)務(wù)代碼中自定義的增加埋點(diǎn)事件等等，最后輸出的代碼耦合了業(yè)務(wù)代碼和埋點(diǎn)代碼。
? 可視化埋點(diǎn)聽起來比較高大上，實(shí)際上跟代碼埋點(diǎn)還是區(qū)別不大。也就是用一個系統(tǒng)來實(shí)現(xiàn)手動插入代碼埋點(diǎn)的過程。
? 缺點(diǎn):
? 業(yè)務(wù)屬性數(shù)據(jù)，例如，訂單號、金額、商品數(shù)據(jù)量等，通常要調(diào)用后臺的接口，可視化埋點(diǎn)在這方面的支持有限；
? 需要借助第三方工具實(shí)現(xiàn)。
無埋點(diǎn)并不是說不需要埋點(diǎn)，而是全部埋點(diǎn)，前端的任意一個事件都被綁定一個標(biāo)識，所有的事件都別記錄下來。通過定期上傳記錄文件，配合文件解析，解析出來我們想要的數(shù)據(jù)，并生成可視化報告供專業(yè)人員分析因此實(shí)現(xiàn)“無埋點(diǎn)”統(tǒng)計。
? 缺點(diǎn)
? 無法靈活的定制各個事件所需要上傳的數(shù)據(jù)
? 無埋點(diǎn)采集全量數(shù)據(jù)，給數(shù)據(jù)傳輸和服務(wù)器增加壓力
代碼埋點(diǎn)分類? 代碼埋點(diǎn)分為 命令式埋點(diǎn)和聲明式埋點(diǎn)
? 顧名思義，開發(fā)者需要手動在需要埋點(diǎn)的節(jié)點(diǎn)處進(jìn)行埋點(diǎn)。如點(diǎn)擊按鈕或鏈接后的回調(diào)函數(shù)、頁面ready時進(jìn)行請求的發(fā)送。大家肯定都很熟悉這樣的代碼：
// 頁面加載時發(fā)送埋點(diǎn)請求
$(document).ready(function(){
// ... 這里存在一些業(yè)務(wù)邏輯
sendRequest(params);
});
// 按鈕點(diǎn)擊時發(fā)送埋點(diǎn)請求
$("button").click(function(){
// ... 這里存在一些業(yè)務(wù)邏輯
sendRequest(params);
});
? 聲明式埋點(diǎn)對命令式埋點(diǎn)做了改進(jìn)，將埋點(diǎn)的代碼與具體的業(yè)務(wù)邏輯解耦。從而提高埋點(diǎn)的效率和代碼的可維護(hù)性。代碼如下:
// key表示埋點(diǎn)的唯一標(biāo)識；act表示埋點(diǎn)方式
? 因?yàn)轫?xiàng)目采用Vue框架，所以使用Vue中的自定義指令完成聲明式埋點(diǎn)。
Vue.directive("log", {
bind( el, binding ){
el.addEventListener("click", ()=>{
Axios.post
})
}
});
? 只需要在需要記錄的組件中配置使用v-log指令，加上詳情參數(shù)就可以完成用戶軌跡記錄。如下:
// caption表示埋點(diǎn)的模塊；paras表示用戶的行為
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/102425.html
摘要：主流埋點(diǎn)方案目前主流的埋點(diǎn)方案包括代碼埋點(diǎn)可視化埋點(diǎn)無埋點(diǎn)一代碼埋點(diǎn)在需要埋點(diǎn)的節(jié)點(diǎn)調(diào)用接口，攜帶數(shù)據(jù)上傳。二可視化埋點(diǎn)通過可視化交互的手段，代替代碼埋點(diǎn)。也就是用一個系統(tǒng)來實(shí)現(xiàn)手動插入代碼埋點(diǎn)的過程。 主流埋點(diǎn)方案 目前主流的埋點(diǎn)方案包括 代碼埋點(diǎn) 可視化埋點(diǎn) 無埋點(diǎn) 一、代碼埋點(diǎn) ? 在需要埋點(diǎn)的節(jié)點(diǎn)調(diào)用接口，攜帶數(shù)據(jù)上傳。如百度統(tǒng)計等； ? 缺點(diǎn) ? 工作量...
獲取用戶的交互習(xí)慣及喜好，進(jìn)一步提升轉(zhuǎn)化率，可以在之前的埋點(diǎn)方案實(shí)現(xiàn)中，都是在具體的按鈕或者圖片被點(diǎn)擊或者被曝光時主動通過事件去上報埋點(diǎn)。但這種方法適合在埋點(diǎn)比較少時還行的項(xiàng)目，遇見項(xiàng)目中需要大量埋點(diǎn)時，添加的代碼就太多了，就會埋點(diǎn)邏輯與業(yè)務(wù)邏輯的高耦合。 由此需要換種方式。我先給大家普及下埋點(diǎn)上報方式都有哪些？ 手動埋點(diǎn) 可視化埋點(diǎn) 無痕埋點(diǎn) 手動埋點(diǎn)，顧名思義就是純手動寫代碼，調(diào)...
摘要：項(xiàng)目架構(gòu)項(xiàng)目目錄項(xiàng)目目錄是采用自動生成，其它按需自己新建就好了。 項(xiàng)目架構(gòu) 項(xiàng)目目錄 ├── build ├── config ├── dist │?? └── static │?? ├── css │?? ├── fonts │?? ├── images │?? ├── js │?? └── lib ├── src │?? ├── api │?...
摘要：項(xiàng)目架構(gòu)項(xiàng)目目錄項(xiàng)目目錄是采用自動生成，其它按需自己新建就好了。 項(xiàng)目架構(gòu) 項(xiàng)目目錄 ├── build ├── config ├── dist │?? └── static │?? ├── css │?? ├── fonts │?? ├── images │?? ├── js │?? └── lib ├── src │?? ├── api │?...
閱讀 1385·2019-08-30 12:54
閱讀 1870·2019-08-30 11:16
閱讀 1612·2019-08-30 10:50
閱讀 2447·2019-08-29 16:17
閱讀 1266·2019-08-26 12:17
閱讀 1377·2019-08-26 10:15
閱讀 2387·2019-08-23 18:38
閱讀 784·2019-08-23 17:50
