【Web前端Talk】“用數據說話，從埋點開始”-帶你理解前端的三種埋點

埋點到底是什么呢？

引用自百科的原話是，埋點分析網站分析的一種常用的數據采集方法。因此其本質是分析，但是靠什么分析呢？靠埋點得到的數據。通俗來講，就是當我想要在某個產品上得到用戶的一些行為數據用來分析，就可以用埋點了。舉個栗子，A用戶把某本書加到了自己的書架了，我可以通過該用戶書架的書的類型，由此分析該用戶的閱讀偏好，更深一步，通過對用戶偏好的判斷，我可以自動像用戶推薦同類型的書，或者可以根據用戶加入書架的時間，判斷用戶的碎片時間，在此時間段，可以定點向用戶推送一些消息等。

我們可以看出，充分的埋點數據，有助於准確的分析用戶的行為，為產品的調整提供方向。

歡迎關注我們的微信公眾號：Web前端Talk  獲取更多好的前端內容

 

怎么埋點呢？

要想知道埋點的方法，首先要了解埋點的分類，目前埋點主要分為三大類，分別是：

1. 代碼埋點

2. 無埋點

3. 可視化埋點（可認為是無埋點的一種）

 

已經知道了埋點的分類了，那么具體怎么實施呢，因其依靠數據，因此其步驟有三：

1. 獲取數據

2. 展示數據

3. 分析數據

 

充分准確的埋點是第一步，對后續的展示及分析都有重要的意義，因此本文重點介紹該方面。

 

埋點類別詳解

1. 代碼埋點

• 優點：監控用戶行為，監測數據准確

• 缺點：工作量大，需要手動在需要埋點的地方進行埋點，因此需要侵入業務代碼，比如點擊事件的回調函數、頁面的生命周期、ajax回調等。

 

常用代碼埋點類型分兩類，分別為命令式、聲明式，可查看如下舉例。

• 命令式埋點：在一些事件操作的回調函數中進行埋點，埋點的數據和方法可能多種多樣的，比如圖片上帶數據，ajax發送數據等。

• 聲明式埋點：將埋點信息封裝在自定義屬性中，通過sdk識別自定義屬性然后獲取埋點數據。

 

2. 無埋點

• 優勢：不需要關注埋點邏輯

• 缺點：給數據傳輸增加壓力、無法定制

 

無埋點統計數據基本流程

通常，當頁面打開時，頁面中的埋點js片段會被執行，這段js代碼會異步加載一個js文件，該文件就是無埋點的sdk，會被瀏覽器請求到並執行，通過該腳本進行數據收集，當數據收集完成后，可以利用一些方法將數據傳遞給后端進行收集整理。

 

無埋點sdk執行階段

通過在頁面或者基礎腳本中集成這段代碼，可以在對應的頁面上引入我們的bury_test腳本，而bury_test腳本就是我們的埋點sdk。

 

埋點sdk

(function() {
  var buryData = {};
  //常用信息
  if (document) {
    //域名
    buryData.domain = document.domain || '';
    //標題
    buryData.title = document.title || '';
    //訪問來源
    buryData.referrer = document.referrer || '';
    //分辨率
    buryData.sw = window.screen.width || 0;
    buryData.sh = window.screen.height || 0;
    //設備信息
    buryData.lang = navigator.language || '';
    buryData.ua = navigator.userAgent || '';
    //頁面加載時間
    buryData.loadT = window.performance.timing.domContentLoadedEventEnd - window.performance.timing.navigationStart || 0;
  }
  //整理埋點數據
  var arg = [];
  if (buryData) {
    for (var i in buryData) {
      arg.push(encodeURIComponent(i) + '=' + encodeURIComponent(buryData[i]));
    }
  }
  var args = arg.join('&');
})

通過以上方法，可以獲取一些基本的頁面數據，更多詳細的數據，可以根據具體的業務需求進行添加。 如何將采集到的數據進行上報呢，需要根據具體的情況來分析了，如果沒有跨域的話，最簡單的當然是ajax了。但是很多sdk都涉及到跨域了，目前主流的一種方法是用js腳本創建Image對象，將image的src指向后端腳本，並將數據拼接上。

 

3. 可視化埋點

• 優點：通過集成sdk，運營可自主選擇，操作便捷。

• 缺點：

• 無法定制詳細的業務數據，比如 金額、商品數量等，該類數據需要實時變化；

• 需要統一規范，無法用在不同的設備上，比如某些特殊的設備imei並不能識別。

 

可視化埋點與代碼埋點的對比

 

目前很多商用軟件比如Mixpanel、TalkingData、諸葛IO、騰訊MTA等都可以用來可視化埋點，用戶僅需要點擊想要監測的元素，然后對該埋點起個對應的名字，並給個編號，就進行了埋點。

可視化埋點的核心方案是利用xpath，是在xml文檔中查找信息的語言，如下圖所示

 

 

 

 

通過上圖方法，得到的xpath為//*[@id="1"]/div/div[2]/p[1]
如果將其換做dom的選擇器，則為：#1>div>div:nth-of-type(2)>p:nth-of-type(1)，由此，可以定位到固定的DOM節點。

如何獲取xpath呢，這里可以提供一種方法可供參考：

 

var getPath = function(elem) {
  if (elem.id != '') {
    return '//*[@id=\"' + elem.id + '\"]';
  }
  if (elem == document.body) {
    return '/html/' + elem.tagName.toLowerCase();
  }
  var index = 1,
    siblings = elem.parentNode.childNodes;
  for (var i = 0, len = siblings.length; i < len; i++) {
    var sibling = siblings[i];
    if (sibling == elem) {
      return arguments.callee(elem.parentNode) + '/' + elem.tagName.toLowerCase() + '[' + (index) + ']';
    } else if (sibling.nodeType == 1 && sibling.tagName == elem.tagName) {
      index++;
    }
  }
}

 

通過上述方法，當我們點擊某個元素時，將觸發的元素event.target傳入，即可得到完整的xpath。

 

三種埋點的區別

以百度舉例：
當用戶點擊百度一下的時候，無埋點和可視化埋點可以獲取的信息有某個時刻、某個設備進行了一次搜索，甚至可以獲得部分搜索信息等，但是用戶在輸入搜索信息時，是否進行了修改、反復刪除重新輸入幾次等深度的業務信息，無埋點和可視化埋點是統計不到的，則需要代碼埋點。

 

數據分析處理

針對埋點的數據進行分析處理，我認為將兩個維度的任意組合即可，兩個維度我將其定義為客觀維度和主觀維度，客觀維度比如：時間、用戶id、設備id、地理位置、渠道等；主觀維度比如：觸發事件、觸發次數、入口來源、異常集合及次數等。
兩個維度任意組合，可以組成任意統計數據，比如：
1月份某個頁面的訪問量統計、2月份某個設備購買的圖書數量、3月份某個用戶在某個頁面用某個設備點贊的次數...