一個網站上線,開發者除了保證網站功能正常,體驗優好之外,還有一項重要的工作是資料收集,通過收集使用者的行為資料可以幫助瞭解網站的功能是否滿足使用者的需求,導流方式是否有效,新功能上線後是否效果是否達到設計初衷,根據資料指引有效優化產品體驗以及發現新的產品方向是產品經理的必備技能,而如何採集準確並且足夠的網站資料則應該是開發者的責任.在大資料處理能力越來越強下,以及機器學習等依賴資料哺育的工具進化下,採集足夠多的資料往往是網站向著良性方向進化的必備條件;

工具:

網站的資料採集有很多現成的工具,如google Analytics, 百度統計, 友盟+等,往往通過在頁面上接入js SDK程式碼,如下圖所示

而在實際採集過程中,資料是如何傳遞過去的呢,我們隨便開啟一個埋有百度統計的網站, 開啟chrome的開發者工具,勾選Preserve log

可以發現在頁面點選一個連結或者做一些其他操作,在Networking tab下可以看到hm.gif的網路請求, 這裡由於統計的資料傳送涉及到第三方網址,涉及跨域問題,而圖片請求天然是跨域的,所以業界的通用做法是構造一個空的gif用於向第三方網站, 而真正需要統計的引數往往是通過url進行傳遞,

通過檢視分析具體的請求,和業務相關的請求都跟在url裡的?之後以'&a=111'對不同的引數進行傳遞

這些資料通過統計服務處理後在服務端整合顯示的是如下圖所示:

重要指標:

pv(頁面展現數量), uv(訪問使用者數), 跳出率(在進入頁面後未訪問其他頁面,未做任何操作後在一定時間內離開該頁面的比例), 平均訪問時長,訪問使用者的使用者屬性(使用者特徵,使用裝置, 地域分佈),訪問來源(訪問網站頁面前的上一個頁面,往往是導流效果的來源分析),通過以上資料的展示和分析可以得到一個網站的基本訪問情況分析.

資料採集:

那麼如果有些資料這些第三方服務提供方沒有提供,或者不想自己網站的資料被第三方掌握,就必須自己搭建一套資料採集平臺,這裡來說說如果自己搭建的話在前端頁面上怎麼進行埋點;

首先在本質上我們還是應該建立一個最為基本的傳送統計的傳送函式,用於建立img,傳送統計請求到資料採集平臺;

function sendUrl(url) {
    let img = new Image();  // 建立一個img物件
    let key = 'project_log_' // 為本次資料請求建立一個唯一id
        + Math.floor(Math.random() * 2147483648).toString(36); 

    window[key] = img;   // 用一個數組維護img物件

    img.onload = img.onerror = img.onabort = function () {
        img.onload = img.onerror = img.onabort = null;  // 清除img元素
        window[key] = null;
        img = null;  
    };
    img.src = url;  // img物件賦值url後自動傳送請求,無需插入到頁面元素中去
}

然後定義一套資料格式規則,如:1.gif?q=xxx&fr=xxx&refer=xxx&p=xxxx&xxxxx

q表示頁面搜尋詞; fr表示頁面的上游頁面時什麼, refer是指從來源頁面, p表示事件型別等;

常用指標的統計方法:

訪問時長:

var st = new Date().getTime();  // 在頁面載入執行js時記錄當前時間

$(window).on('beforeunload', function () {
    var et = new Date().getTime();
    var stayTime = et - st;
    
}); // 在頁面要unload觸發'beforeunload'事件時進行時間差計算得到訪問時長

聚焦時間:

與訪問時間不同,由於頁面可以通過tab切換導致雖然頁面沒有unload但實際處於失去焦點狀態, 因此需要訂閱focusIn與focusOut兩個事件,在focusIn時開始計時, 在focusOut時停止計時,在頁面unload時將focus時間進行累加得到聚焦時間;

Pv:

傳統意義上每次頁面重新整理代表著一次新的pv, 也就是每次統計js執行時都+1, 而現在頁面很多都用到了ajax技術來進行無重新整理獲取展現頁面來替代翻頁,如瀑布流頁面通過下來載入新的頁面,這時候頁面不重新重新整理,因此可以在ajax請求介面處進行埋點進行pv累加;

單項PV:

頁面上部分元素有單獨統計pv的需要,有些頁面元素不是頁面展現都展現,或者需要統計類似於某一廣告的展現次數,這種需要需要在url裡單獨定義引數來標識;

事件:

以click事件為例,類似於繫結事件的過程,在click響應函式中獲取元素的物件, 如下所示, tracker是定義的傳送埋點資料的模組,在對應事件發生時,除了定義了事件型別之外,一般還需要獲取發生事件元素的一些特徵引數,如:元素名,元素包含的text, id等;

$('.topic-list a').on('click', function () {
        if (!$(this).data('tid')) {
             return;
        }
        tracker.send({
              'p': tracker.events.list.click.topic,
              'rec_topic_title': $(this).text(),
              'rec_topic_id': $(this).data('tid')
        });
});

      hover這一事件需要監聽元素從mouseEnter事件到mouseOut事件觸發時間大於一定時間,比如500ms可以視作一次hover觸發.