“用資料說話，從埋點開始”-帶你理解前端的三種埋點

web前端talk發表於2019-05-24
前端

埋點到底是什麼呢？

引用自百科的原話是，埋點分析網站分析的一種常用的資料採集方法。因此其本質是分析，但是靠什麼分析呢？靠埋點得到的資料。通俗來講，就是當我想要在某個產品上得到使用者的一些行為資料用來分析，就可以用埋點了。舉個例子，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月份某個使用者在某個頁面用某個裝置點讚的次數...

 

相關文章