「用數聽說話，從埋點開始」-帶你理解前端的三種埋點

埋點究竟是什麼呢？

引用自百科的原話是，埋點分析網站分析的一種經常使用的數據採集方法。所以其本質是分析，可是靠什麼分析呢？

靠埋點獲得的數據。通俗來說，就是當我想要在某個產品上獲得用戶的一些行爲數據用來分析，就能夠用埋點了。舉個栗子，A用戶把某本書加到了本身的書架了，我能夠經過該用戶書架的書的類型，由此分析該用戶的閱讀偏好，更深一步，經過對用戶偏好的判斷，我能夠自動像用戶推薦同類型的書，或者能夠根據用戶加入書架的時間，判斷用戶的碎片時間，在此時間段，能夠定點向用戶推送一些消息等。

咱們能夠看出，充分的埋點數據，有助於準確的分析用戶的行爲，爲產品的調整提供方向。

怎麼埋點呢？

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

1.代碼埋點

2.無埋點

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

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

1.獲取數據

2.展現數據

3.分析數據

充分準確的埋點是第一步，對後續的展現及分析都有重要的意義，所以本文重點介紹該方面。

埋點類別詳解

1. 代碼埋點

優勢：監控用戶行爲，監測數據準確

缺點：工做量大，須要手動在須要埋點的地方進行埋點，所以須要侵入業務代碼，好比點擊事件的回調函數、頁面的生命週期、ajax回調等。

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

//命令式
$('button').click(()=>{
    record(data);
});//聲明式
<button data-record = '{key:"recordTest",data:"recordData"}'>記錄</button>
複製代碼

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

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

2. 無埋點

優勢：不須要關注埋點邏輯

缺點：給數據傳輸增長壓力、沒法定製

無埋點統計數據基本流程

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

無埋點sdk執行階段

<script type="text/javascript">var _bury = _bury||[];
_bury.push(["_testData","網站標識"]);
(function(){
    var jsnode = document.createElement('script');
    jsnode.type='text/javascript';
    jsnode.async=true;
     //這裏填入js sdk連接
    jsnode.src= 'xxxxxxx/bury_test.js';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(jsnode,s);
})</script>
複製代碼

經過在頁面或者基礎腳本中集成這段代碼，能夠在對應的頁面上引入咱們的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月份某個用戶在某個頁面用某個設備點讚的次數...

歡迎關注個人公衆號：Web前端Talk,歡迎各位大佬來撩~~