什么是埋點？ 綜合 vue埋點
埋點分析，是網站分析的一種常用的數據采集方法。數據埋點分為初級、中級、高級三種方式。數據埋點是一種良好的私有化部署數據采集方式。
埋點技術如何采集數據，有何優缺點？
數據埋點分為初級、中級、高級三種方式，分別為：
- 初級：在產品、服務轉化關鍵點植入統計代碼，據其獨立ID確保數據采集不重復（如購買按鈕點擊率）；
- 中級：植入多段代碼，追蹤用戶在平台每個界面上的系列行為，事件之間相互獨立（如打開商品詳情頁——選擇商品型號——加入購物車——下訂單——購買完成）；
- 高級：聯合公司工程、ETL采集分析用戶全量行為，建立用戶畫像，還原用戶行為模型，作為產品分析、優化的基礎。
無疑，數據埋點是一種良好的私有化部署數據采集方式。數據采集准確，滿足了企業去粗取精，實現產品、服務快速優化迭代的需求。
但，因手動埋點工程量極大，且一不小心容易出錯，成為很多工程師的痛。且其開發周期長，耗時費力。無痕埋點成為市場新寵。
什么是無痕埋點
首先介紹一下傳統埋點存在的問題
- 數據質量（埋錯、漏埋）
- 開發成本 （需要統計每個事件的點擊，頁面的展現pv uv）
無痕埋點就是為了解決這兩個問題，一行代碼完成統計，無遺漏。
下面先介紹一下本公司vue實現埋點插件
function leStatic(actiontype, pagetype='',backup = {}){ ... ... }； Vue.prototype.$log = leStatic; 將埋點方法注冊到vue實例下；我們就可以使用 this.$log()來調用這個方法了，每調用一次這個方法就會埋上一個埋點；
鋪墊完成，接下來該開始我們的表演了
1、我們的無痕埋點能做什么？
* 統計所有頁面內事件的點擊量 * 統計頁面的展現量pv uv 2、怎么應用？
應用很簡單，只需要引入封裝的方法（Buried），並應用在methods即可
import { Buried } from '@/libs/decorators'; @Buried methods: { ... } 3、需要注意什么？
- 此方法不局限在methods上是使用，只要是在單文件導出對象一級子對象下均可;
@Buried components: {} 但是考慮到語義更加清晰建議在methods上使用此方法。
-
考慮到並不是所有的方法都需要設置埋點，所以如果某方法不想設置埋點 可以 return 'noBuried' 即可忽略此方法不設埋點。
-
頁面展現量統計在鈎子函數中 (activated - created - mounted) 這三個鈎子內，所以頁面內至少有這個三個鈎子之一才可統計頁面展現量。
4、話不多說，先上代碼？
/** * @description 全埋點 * 1.在所有methods方法中埋點為函數名 * 2.在鈎子函數中 (activated - created - mounted) 依次尋找這三個鈎子 * 如果存在就會增加埋點 VIEW * * 用法： * @Buried * 在單文件導出對象一級子對象下; * 如果某方法不想設置埋點 可以 return 'noBuried' 即可 */ export function Buried(target, funcName, descriptor) { let oriMethods = Object.assign({},target.methods), oriTarget = Object.assign({},target); // methods方法中 if(target.methods) { for(let name in target.methods) { target.methods[name] = function () { let result = oriMethods[name].call(this,...arguments); // 如果方法中返回 noBuried 則不添加埋點 if(typeof result === 'string' && result.includes('noBuried')) { console.log(name + '方法設置不添加埋點'); } else if(result instanceof Promise) { result.then(res => { if(typeof res === 'string' && res.includes('noBuried')) { console.log(name + '方法設置不添加埋點'); return; }; console.log('添加埋點在methods方法中：' , name.toUpperCase ()); this.$log(name); }); }else{ console.log('添加埋點在methods方法中：' , name.toUpperCase ()); this.$log(name); }; return result; } } } // 鈎子函數中 const hookFun = (funName) => { target[funName] = function() { let result = oriTarget[funName].call(this,...arguments); console.log('添加埋點，在鈎子函數' + funName + '中：', 'VIEW'); this.$log('VIEW'); return result; } } // 鈎子函數中 view if (target.activated) { return hookFun('activated'); } else if (target.created) { return hookFun('created'); } else if (target.mounted) { return hookFun('mounted'); }; }
作者：Victor細節
鏈接：https://www.jianshu.com/p/467544cb088e