前端埋點初探

埋點究竟是什麼

引用自百科的原話是，埋點分析網站分析的一種經常使用的數據採集方法。所以其本質是分析，可是靠什麼分析呢？靠埋點獲得的數據。通俗來說，就是當我想要在某個產品上獲得用戶的一些行爲數據用來分析，就能夠用埋點了。舉例來講，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，運營可自主選擇，操做便捷。
• 缺點：
• 1. 沒法定製詳細的業務數據，好比 金額、商品數量等，該類數據須要實時變化；
• 2. 須要統一規範，沒法用在不一樣的設備上，好比某些特殊的設備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月份某個用戶在某個頁面用某個設備點讚的次數...

初入掘金，不足之處還請海涵