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