埋點(diǎn)系統(tǒng)是什么-創(chuàng)新互聯(lián)

這篇文章主要介紹了埋點(diǎn)系統(tǒng)是什么，具有一定借鑒價(jià)值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的遵義網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

                                                           埋點(diǎn)系統(tǒng)是什么

前言

最近雜七雜八的事情比較多，難得抽出時(shí)間來彌補(bǔ)一下之前的系列，欠大家的埋點(diǎn)系列現(xiàn)在開始走起來

為什么需要埋點(diǎn)系統(tǒng)

電影中

前端開發(fā)攻城獅開開心心的 coding，非常自豪的進(jìn)行了業(yè)務(wù)、UI 分離開發(fā)，各種設(shè)計(jì)模式、算法優(yōu)化輪番上陣，代碼寫的 Perfect（勞資代碼天下第一），沒有 BUG，程序完美，兼容性 No.1，代碼能打能抗質(zhì)量高。下班輕松打卡，回家看娃。

現(xiàn)實(shí)中

實(shí)際上，開發(fā)環(huán)境與生產(chǎn)環(huán)境并不能等同，并且測試的過程再完善，依然會(huì)有漏測的情況存在。考慮到用戶使用客戶端環(huán)境、網(wǎng)絡(luò)環(huán)境等等一系列的不確定因素存在。

所以在開發(fā)過程中一定要記得三大原則（我胡謅的）

  1. 沒有完美的代碼，只有沒發(fā)現(xiàn)的 BUG
  2. 絕對(duì)不要相信測試環(huán)境，沒有一種測試環(huán)境都涵蓋所有線上情況
  3. 如果線上沒有一點(diǎn)反饋，不要懷疑，問題應(yīng)該藏得很深、很深

什么是埋點(diǎn)系統(tǒng)

埋點(diǎn)就像城市中的攝像頭，從產(chǎn)品的角度考慮，它可以監(jiān)控到用戶在我們產(chǎn)品里的行為軌跡，為產(chǎn)品的迭代、項(xiàng)目的穩(wěn)定提供依據(jù)，WHO、WHEN、WHERE、HOW、WHAT 是埋點(diǎn)采集數(shù)據(jù)的基礎(chǔ)維度。

對(duì)前端開發(fā)而言，可以監(jiān)控頁面資源加載性能，異常等等，提供了頁面體驗(yàn)和健康指數(shù)，為后續(xù)性能優(yōu)化提供依據(jù)，及時(shí)上報(bào)異常和發(fā)生場景。從而能夠及時(shí)修正問題，提高項(xiàng)目質(zhì)量等。

埋點(diǎn)可以大概分為三類：

  1. 無痕埋點(diǎn) - 無差別收集頁面所有信息包括頁面進(jìn)出、事件點(diǎn)擊等等，需要進(jìn)行數(shù)據(jù)沖洗才能獲取到有用信息
  2. 可視化埋點(diǎn) - 根據(jù)生成的頁面結(jié)構(gòu)獲取特定點(diǎn)位，單獨(dú)埋點(diǎn)分析
  3. 業(yè)務(wù)代碼手動(dòng)埋點(diǎn) - 根據(jù)具體復(fù)雜的業(yè)務(wù)，除掉上述兩種不能涵蓋的地方進(jìn)行業(yè)務(wù)代碼埋點(diǎn)

代碼埋點(diǎn)可視化埋點(diǎn)無痕埋點(diǎn)
典型場景無痕埋點(diǎn)無法覆蓋到，比如需要業(yè)務(wù)數(shù)據(jù)簡單規(guī)范的頁面場景簡單規(guī)范的頁面場景，
優(yōu)勢業(yè)務(wù)數(shù)據(jù)明確開發(fā)成本低，運(yùn)營人員可直接進(jìn)行相關(guān)埋點(diǎn)配置無需配置，數(shù)據(jù)可回溯
不足數(shù)據(jù)不可回溯，開發(fā)成本高不能關(guān)聯(lián)業(yè)務(wù)數(shù)據(jù)，數(shù)據(jù)不可回溯數(shù)據(jù)量較大，不能關(guān)聯(lián)業(yè)務(wù)數(shù)據(jù)

大部分情況，我們可以通過無痕埋點(diǎn)收集到所有的信息數(shù)據(jù)，再配合可視化埋點(diǎn)，能夠具體定位到某一個(gè)點(diǎn)位，這樣大部分的埋點(diǎn)信息都據(jù)此分析出來。

在特殊情況下，可以多加上業(yè)務(wù)代碼手動(dòng)埋點(diǎn)，處理一下特別的場景（大部分情況是走強(qiáng)業(yè)務(wù)與正常的點(diǎn)擊，刷新事件無關(guān)需要上報(bào)的信息）

埋點(diǎn) SDK 開發(fā)

埋點(diǎn)數(shù)據(jù)收集分析

  • 事件基本數(shù)據(jù)
    • 事件發(fā)生時(shí)間
    • 發(fā)生時(shí)頁面信息快照
  • 頁面
    • 頁面 PV，UV
    • 用戶頁面停留時(shí)長
    • 頁面跳轉(zhuǎn)事件
    • 頁面進(jìn)入后臺(tái)
    • 用戶離開頁面
  • 用戶信息
    • 用戶 uid
    • 用戶設(shè)備指紋
    • 設(shè)備信息
    • ip
    • 定位
  • 用戶操作行為
    • 用戶點(diǎn)擊
      • 點(diǎn)擊目標(biāo)
  • 頁面 AJAX 請(qǐng)求
    • 請(qǐng)求成功
    • 請(qǐng)求失敗
    • 請(qǐng)求超時(shí)
  • 頁面報(bào)錯(cuò)
    • 資源加載報(bào)錯(cuò)
    • JS 運(yùn)行報(bào)錯(cuò)
  • 資源加載新性能
  • 圖片
  • 腳本
  • 頁面加載性能

上面的數(shù)據(jù)通過 3 個(gè)維度來定義埋點(diǎn)事件

  • ·LEVEL: 描述埋點(diǎn)數(shù)據(jù)的日志級(jí)別
    • INFO：一些用戶操作，請(qǐng)求成功，資源加載等等正常的數(shù)據(jù)記錄
    • ERROR： JS報(bào)錯(cuò)，接口報(bào)錯(cuò)等等錯(cuò)誤類型的數(shù)據(jù)記錄
    • DEBUG： 預(yù)留開發(fā)人員通過手動(dòng)調(diào)用的方式回傳排除bug的數(shù)據(jù)記錄
    • WARN： 預(yù)留開發(fā)人員通過手動(dòng)調(diào)用的方式回傳非正常用戶行為的的數(shù)據(jù)記錄
  • CATEGORY：描述埋點(diǎn)數(shù)據(jù)的分類
    • TRACK: 埋點(diǎn)SDK對(duì)象的生命周期管理整個(gè)埋點(diǎn)數(shù)據(jù)。
      • WILL_MOUNT：sdk對(duì)象即將初始化加載，生成一個(gè)默認(rèn)ID，跟蹤全部相關(guān)事件
      • DID_MOUNTED：sdk對(duì)象初始化完成，主要獲取設(shè)備指紋等等的異步操作完成
    • AJAX: AJAX相關(guān)數(shù)據(jù)
    • ERROR：頁面中的異常相關(guān)數(shù)據(jù)
    • PERFORMANCE： 關(guān)于性能相關(guān)數(shù)據(jù)
    • OPERATION： 用戶操作相關(guān)數(shù)據(jù)
  • EVENT_NAME：具體的事件名稱

根據(jù)上述的維度，我們可以簡單設(shè)計(jì)如下的架構(gòu)

根據(jù)上圖的架構(gòu)，再進(jìn)行下面的具體代碼開發(fā)

代理請(qǐng)求

在瀏覽器中現(xiàn)在主要有 2 種請(qǐng)求方式，一個(gè)是 XMLHttpRequest, 一個(gè)是 Fetch。

代理 XMLHttpRequest
function NewXHR() {  var realXHR: any = new OldXHR(); // 代理模式里面有提到過
  realXHR.id = guid()  const oldSend = realXHR.send;

  realXHR.send = function (body) {
    oldSend.call(this, body)    //記錄埋點(diǎn)
  }
  realXHR.addEventListener('load', function () {    //記錄埋點(diǎn)
  }, false);
  realXHR.addEventListener('abort', function () {    //記錄埋點(diǎn)
  }, false);

  realXHR.addEventListener('error', function () {    //記錄埋點(diǎn)
  }, false);
  realXHR.addEventListener('timeout', function () {    //記錄埋點(diǎn)
  }, false);  return realXHR;
}復(fù)制代碼
代理 Fetch
 const oldFetch = window.fetch;  function newFetch(url, init) {    const fetchObj = {      url: url,      method: method,      body: body,
    }
    ajaxEventTrigger.call(fetchObj, AJAX_START);    return oldFetch.apply(this, arguments).then(function (response) {      if (response.ok) {       //記錄埋點(diǎn)
      } else {       //上報(bào)錯(cuò)誤
      }      return response
    }).catch(function (error) {
      fetchObj.error = error        //記錄埋點(diǎn)      
        throw error
    })
  }復(fù)制代碼

監(jiān)聽頁面的 PV，UV

在進(jìn)入頁面時(shí)，我們通過算法生成一個(gè)唯一 session id，作為這次埋點(diǎn)行為的全局 id，上報(bào)用戶 id，設(shè)備指紋，設(shè)備信息。在用戶未登錄的情況下，通過設(shè)備指紋來計(jì)算 UV，通過 session id計(jì)算 PV。

異常捕獲

異常就是干擾程序的正常流程的不尋常事故

RUNTIME ERROR

在JS中可以通過 window.onerror和window.addEventListener('error', callback) 捕捉運(yùn)行時(shí)異常，一般使用window.onerror,它兼容性更好。

window.onerror = function(message, url, lineno, columnNo, error) {    const lowCashMessage = message.toLowerCase()    if(lowCashMessage.indexOf('script error') > -1) {      return
    }    const detail = {      url: url    
      filename: filename,      columnNo: columnNo,      lineno: lineno,      stack: error.stack,      message: message
    }    //記錄埋點(diǎn)}復(fù)制代碼
Script Error

在這里我們過濾了 Script Error, 它產(chǎn)生的原因主要是頁面中加載的第三方跨域腳本報(bào)錯(cuò)，比如托管在第三方 CDN 中的 js 腳本。這類問題比較難以排查。解決的方法有：

  • 打開 CORS（Cross Origin Resource Sharing，跨域資源共享）,如下步驟
    • <srcipt src="another domain/main.js" cossorigin="anonymous"></script>
    • 修改Access-Control-Allow-Origin: * | 指定域名
  • 使用 try catch
      <script scr="crgt.js"></script> //加載crgt腳本，window.crgt = {getUser: () => string}
  try{      window.crgt.getUser();
  }catch(error) {      throw error // 輸出正確的錯(cuò)誤堆棧
  }復(fù)制代碼
Promise reject

js 在異步異常時(shí)無法通過 onerror 方法捕獲 ，在 Promise 對(duì)象在 reject 時(shí)，同時(shí)并沒有進(jìn)行處理時(shí) 會(huì)拋出一個(gè) unhandledrejection 的錯(cuò)誤，并不會(huì)被上述的方法所捕獲，所以需要添加單獨(dú)的處理事件。

window.addEventListener("unhandledrejection", event => {  throw event.reason
});復(fù)制代碼
資源加載異常

在瀏覽器中，可以通過 window.addEventListener('error', callback) 的方式監(jiān)聽資源加載異常，比如 js 或者 css 腳本文件丟失。

window.addEventListener('error', (event) => {  if (event.target instanceof HTMLElement) {    const target = parseDom(event.target, ['src']);    const detail = {      target: target,      path: parseXPath(target),
    }    //  記錄埋點(diǎn)
  }
}, true)復(fù)制代碼

監(jiān)聽用戶行為

通過 addEventListener click 監(jiān)聽 click 事件

window.addEventListener('click', (event) => {    //記錄埋點(diǎn)}, true)復(fù)制代碼

在這里通過組件的 displaName 來定位元素的位置，displaName 表示組件的文件目錄，比如 src/components/Form.js 文件導(dǎo)出的組件 FormItem 通過 babel plugin 自動(dòng)添加屬性 @components/Form.FormItem，或者使用者主動(dòng)給組件添加 static 屬性 displayName。

頁面路由變化

  • hashRouter 監(jiān)聽頁面hash變化，對(duì)hash進(jìn)行解析
window.addEventListener('hashchange', event => {  const { oldURL, newURL } = event;  const oldURLObj = url.parseUrl(oldURL);  const newURLObj = url.parseUrl(newURL);  const from = oldURLObj.hash && url.parseHash(oldURLObj.hash);  const to = newURLObj.hash && url.parseHash(newURLObj.hash);  if(!from && !to ) return;  // 記錄埋點(diǎn)})復(fù)制代碼

監(jiān)聽頁面離開

通過 addEventListener beforeunload 監(jiān)聽離開頁面事件

window.addEventListener('beforeunload', (event) => {    //記錄埋點(diǎn)})復(fù)制代碼

SDK 架構(gòu)

class Observable {    constructor(observer) {
        observer(this.emit)
    }
    emit = (data) => {        this.listeners.forEach(listener => {
            listener(data)
        })
    }
    listeners = [];
    
    subscribe = (listener) => {        this.listeners.push(listeners);        return () => {            const index = this.listeners.indexOf(listener);            if(index === -1) {                return false
            }            
            this.listeners.splice(index, 1);            return true;
        }
     }
}復(fù)制代碼
const clickObservable = new Observable((emit) => {    window.addEventListener('click', emit)
})復(fù)制代碼

然而在處理 ajax，需要將多種數(shù)據(jù)組合在一起，需要進(jìn)行 merg 操作,則顯得沒有那么優(yōu)雅，也很難適應(yīng)后續(xù)復(fù)雜的數(shù)據(jù)流的操作。

const ajaxErrorObservable = new Observable((emit) => {    window.addEventListener(AJAX_ERROR, emit)
})const ajaxSuccessObservable = new Observable((emit) => {    window.addEventListener(AJAX_SUCCESS, emit)
})const ajaxTimeoutObservable = new Observable((emit) => {    window.addEventListener(AJAX_TIMEOUT, emit)
})復(fù)制代碼

可以選擇 RxJS 來優(yōu)化代碼

export const ajaxError$ = fromEvent(window, 'AJAX_ERROR', true)export const ajaxSuccess$ = fromEvent(window, 'AJAX_SUCCESS', true)export const ajaxTimeout$ = fromEvent(window, 'AJAX_TIMEOUT', true)復(fù)制代碼
ajaxError$.pipe(
    merge(ajaxSuccess$, ajaxTimeout$), 
    map(data=> (data) => ({category: 'ajax', data; data}))
    subscribe(data => console.log(data))復(fù)制代碼

通過 merge, map 兩個(gè)操作符完成對(duì)數(shù)據(jù)的合并和處理。

數(shù)據(jù)流

項(xiàng)目結(jié)構(gòu)

  • core
    • event$ 數(shù)據(jù)流合并
    • snapshot 獲取當(dāng)前設(shè)備快照，例如url，userID，router
    • track 埋點(diǎn)類，組合數(shù)據(jù)流和日志。
  • logger
    • logger 日志類
      • info
      • warn
      • debug
      • error
  • observable
    • ajax
    • beforeUpload
    • opeartion
    • routerChange
    • logger
    • track

結(jié)尾

自建埋點(diǎn)系統(tǒng)是一個(gè)需要前后端一起合作的事情，如果人力不足的情況下，建議使用第三方分析插件，例如 Sentry 就能足夠滿足大部分日常使用。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享埋點(diǎn)系統(tǒng)是什么內(nèi)容對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)-成都網(wǎng)站建設(shè)公司行業(yè)資訊頻道，遇到問題就找創(chuàng)新互聯(lián)，詳細(xì)的解決方法等著你來學(xué)習(xí)!

網(wǎng)站標(biāo)題：埋點(diǎn)系統(tǒng)是什么-創(chuàng)新互聯(lián)
分享地址：http://muchs.cn/article42/cshehc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制開發(fā)、小程序開發(fā)、網(wǎng)頁設(shè)計(jì)公司、營銷型網(wǎng)站建設(shè)、搜索引擎優(yōu)化、電子商務(wù)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

網(wǎng)站托管運(yùn)營