前端數據採集 埋點 追蹤用戶系列行爲

什麼是埋點？   綜合    vue埋點

埋點分析，是網站分析的一種經常使用的數據採集方法。數據埋點分爲初級、中級、高級三種方式。數據埋點是一種良好的私有化部署數據採集方式。javascript

埋點技術如何採集數據，有何優缺點？
數據埋點分爲初級、中級、高級三種方式，分別爲：php

• 初級：在產品、服務轉化關鍵點植入統計代碼，據其獨立ID確保數據採集不重複（如購買按鈕點擊率）；
• 中級：植入多段代碼，追蹤用戶在平臺每一個界面上的系列行爲，事件之間相互獨立（如打開商品詳情頁——選擇商品型號——加入購物車——下訂單——購買完成）；
• 高級：聯合公司工程、ETL採集分析用戶全量行爲，創建用戶畫像，還原用戶行爲模型，做爲產品分析、優化的基礎。

無疑，數據埋點是一種良好的私有化部署數據採集方式。數據採集準確，知足了企業去粗取精，實現產品、服務快速優化迭代的需求。css

但，因手動埋點工程量極大，且一不當心容易出錯，成爲不少工程師的痛。且其開發週期長，耗時費力。無痕埋點成爲市場新寵。vue

什麼是無痕埋點

首先介紹一下傳統埋點存在的問題java

• 數據質量（埋錯、漏埋）
• 開發成本 （須要統計每一個事件的點擊，頁面的展示pv uv）

無痕埋點就是爲了解決這兩個問題，一行代碼完成統計，無遺漏。

下面先介紹一下本公司vue實現埋點插件

function leStatic(actiontype, pagetype='',backup = {}){ ... ... }； Vue.prototype.$log = leStatic; 

將埋點方法註冊到vue實例下；咱們就可使用 this.$log()來調用這個方法了，每調用一次這個方法就會埋上一個埋點；python

鋪墊完成，接下來該開始咱們的表演了

一、咱們的無痕埋點能作什麼？函數

* 統計全部頁面內事件的點擊量
* 統計頁面的展示量pv uv

二、怎麼應用？優化

應用很簡單，只須要引入封裝的方法（Buried），並應用在methods便可網站

import { Buried } from '@/libs/decorators'; @Buried methods: { ... } 

三、須要注意什麼？ui

• 此方法不侷限在methods上是使用，只要是在單文件導出對象一級子對象下都可;

@Buried components: {} 

可是考慮到語義更加清晰建議在methods上使用此方法。

• 考慮到並非全部的方法都須要設置埋點，因此若是某方法不想設置埋點 能夠 return 'noBuried' 便可忽略此方法不設埋點。

• 頁面展示量統計在鉤子函數中 (activated - created - mounted) 這三個鉤子內，因此頁面內至少有這個三個鉤子之一纔可統計頁面展示量。

四、話很少說，先上代碼？

/** * @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'); }; } 

簡單的實現了無痕埋點的實現方案，目前在項目中運轉正常。大大減小了開發者的工做量，預防了賣錯、漏埋致使上線後無數據統計狀況發生。若是有更好的建議，請聯繫我哦~