前端數據之美 -- 基礎篇

隨着 web 技術的蓬勃發展，前端的展現、交互愈來愈複雜，在用戶的訪問、操做過程當中產生了大量的數據。由此，前端的數據分析也變得尤其重要。固然，對於站長來講，你可使用百度統計等各類已有的服務平臺，可是，若是現有的統計平臺不能知足你的須要，你想開發本身定製化的數據統計平臺，或者你是一個純粹的 geek，想了解背後隱藏的技術，又或者你對前端的數據統計感興趣，本文就能知足你那顆好奇的心。下面就逐步描述前端有哪些數據、如何採集前端的數據、以及如何展現數據統計的結果。

有哪些？

前端的數據其實有不少，從大衆廣泛關注的 PV、UV、廣告點擊量，到客戶端的網絡環境、登錄狀態，再到瀏覽器、操做系統信息，最後到頁面性能、JS 異常，這些數據均可以在前端收集到。數據不少、很雜，不進行很好的分類確定會致使統計混亂，也不利於統計代碼的組織，下面就對幾種廣泛的數據需求進行了分類：

一、訪問

訪問數據是基於用戶每次在瀏覽器上打開目標頁面來統計的，它是以 PV 爲粒度的統計，一個 PV 只統計一次訪問數據。訪問數據能夠算做是最基礎、覆蓋面最廣的一種統計，能夠統計到不少的指標項，下面列出了一些較爲常見的指標項：

• PV/UV：最基礎的 PV（頁面訪問數量）、UV（獨立訪問用戶數量）
• 頁面來源：頁面的 refer，能夠定位頁面的入口
• 操做系統：瞭解用戶的 OS 情況，幫助分析用戶羣體的特徵，特別是移動端，iOS 和 Android 的分佈就更有意義了
• 瀏覽器：能夠統計到各類瀏覽器的佔比，對因而否繼續兼容 IE六、新技術（HTML五、CSS3 等）的運用等調研提供參考價值
• 分辨率：對頁面設計提供參考，特別是響應式設計
• 登陸率：百度也開始看重登錄，登錄用戶具備更高的分析價值，引導用戶登錄是很是重要的
• 地域分佈：訪問用戶在地理位置上的分佈，能夠針對不一樣地域作運營、活動等
• 網絡類型：wifi/3G/2G，爲產品是否須要適配不一樣網絡環境作決策
• 訪問時段：掌握用戶訪問時間的分佈，引導消峯填谷、節省帶寬
• 停留時長：判斷頁面內容是否具備吸引力，對於須要長時間閱讀的頁面比較有意義
• 到達深度：和停留時長相似，例如百度百科，用戶瀏覽時的頁面到達深度直接反映詞條的質量

二、性能

頁面 DOM 結構愈來愈複雜，可是又要追求用戶體驗，這就對頁面的性能提出了更高的要求。性能的監控數據主要是用來衡量頁面的流暢程度，也有一些主要的指標：

• 白屏時間：用戶從打開頁面開始到頁面開始有東西呈現爲止，這過程當中佔用的時間就是白屏時間
• 首屏時間：用戶瀏覽器首屏內全部內容都呈現出來所花費的時間
• 用戶可操做時間：用戶能夠進行正常的點擊、輸入等操做
• 頁面總下載時間：頁面全部資源都加載完成並呈現出來所花的時間，即頁面 onload 的時間
• 自定義的時間點：對於開發人員來講，徹底能夠自定義一些時間點，例如：某個組件 init 完成的時間、某個重要模塊加載的時間等等

這裏只是解釋了這些指標的含義，具體的判斷、統計方式在後續發出的文章中會詳細介紹。

三、點擊

在用戶的全部操做中，點擊應該是最爲主要的一個行爲，包含了：pc 端鼠標的 click，移動端手指的 touch。用戶的每次點擊都是一次訴求，從點擊數據中能夠挖掘的信息其實有不少，下面只列出了咱們目前所關注的指標：

• 頁面總點擊量
• 人均點擊量：對於導航類的網頁，這項指標是很是重要的
• 流出 url：一樣，導航類的網頁，直接瞭解網頁導流的去向
• 點擊時間：用戶的全部點擊行爲，在時間上的分佈，反映了用戶點擊操做的習慣
• 首次點擊時間：同上，可是隻統計用戶的第一次點擊，若是該時間偏大，是否就代表頁面很卡致使用戶長時間不能點擊呢？
• 點擊熱力圖：根據用戶點擊的位置，咱們能夠畫出整個頁面的點擊熱力圖，能夠很直觀的瞭解到頁面的熱點區域

四、異常

這裏的異常是指 JS 的異常，用戶的瀏覽器上報 JS 的 bug，這會極大地下降用戶體驗，對於瀏覽器型號、版本滿天飛的今天，再 NB 的程序員也不免會有擦槍走火的時候，固然 QA 可以覆蓋到大部分的 bug，但確定也會有一些 bug 在線上出現。JS 的異常捕獲只有兩種方式：window.onerror、try/catch，關於咱們是如何作的將在後續的文章中有詳細的描述，這裏只列出捕獲到異常時，通常須要採集哪些信息（主要用來 debug 異常）：

• 異常的提示信息：這是識別一個異常的最重要依據，如：’e.src’ 爲空或不是對象
• JS 文件名
• 異常所在行
• 發生異常的瀏覽器
• 堆棧信息：必要的時候須要函數調用的堆棧信息，可是注意堆棧信息可能會比較大，須要截取

五、其餘

除了上面提到的 4 類基本的數據統計需求，咱們固然還能夠根據實際狀況來定義一些其餘的統計需求，如用戶瀏覽器對 canvas 的支持程度，再好比比較特殊的 – 用戶進行輪播圖翻頁的次數，這些數據統計需求都是前端可以知足的，每一項統計的結果都體現了前端數據的價值。

如何採集？

在前端，經過注入 JS 腳本，使用一些 JS API（如：!!window.localStorage 就能夠檢驗瀏覽器是否支持 localStorage）或者監聽一些事件（如：click、window.onerror、onload 等）就能夠獲得數據。捕獲到這些數據以後，須要將數據發送回服務器端，通常都是採用訪問一個固定的 url，把數據做爲該 url 的 query string，如：http://www.baidu.com/u.gif?data1=hello&data2=hi。

在實踐的過程當中咱們抽離了一套用於前端統計的框架alog，方便開發者書寫本身的統計腳本，具體的使用方法和 API 見github。下面就使用 alog 來簡單說明如何進行前端數據的採集：

例如：你須要統計頁面的 PV，順便加上頁面來源（refer）

// 加載 alog，alog 是支持異步的
void function(e,t,n,a,o,i,m){
e.alogObjectName=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=e[o].l||+new Date,i=t.createElement(n),i.asyn=1,i.src=a,m=t.getElementsByTagName(n)[0],m.parentNode.insertBefore(i,m)
}(window,document,"script","http://uxrp.github.io/alog/dist/alog.min.js","alog");

// 定義一個統計模塊 pv
alog('define', 'pv', function(){ 
   var pvTracker = alog.tracker('pv');
   pvTracker.set('ref', document.referrer); // 設定 ref 參數
   return pvTracker;
});

// 建立一個 pv 統計模塊的實例
alog('pv.create', {
    postUrl: 'http://localhost/u.gif' // 指定上傳數據的 url 地址
});

// 上傳數據
alog('pv.send', "pageview"); // 指明是 pageview

在頁面上部署上面的代碼，瀏覽器將會發送下面的 http 請求：

http://localhost/u.gif?t=pageview&ref=yourRefer

再例如：JS 異常的採集，須要進行事件監聽

// 加載 alog
void function(e,t,n,a,o,i,m){
e.alogObjectName=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=e[o].l||+new Date,i=t.createElement(n),i.asyn=1,i.src=a,m=t.getElementsByTagName(n)[0],m.parentNode.insertBefore(i,m)
}(window,document,"script","http://uxrp.github.io/alog/dist/alog.min.js","alog");

// 定義一個統計模塊 err
alog('define', 'err', function(){ 
   var errTracker = alog.tracker('err');
   window.onerror = function(message, file, line) { //監聽 window.onerror
        errTracker.send('err', {msg:message, js:file, ln:line});
    };
   return errTracker;
});

// 建立一個 err 統計模塊的實例
alog('err.create', {
    postUrl: 'http://localhost/u.gif'
});

這時，只要頁面中 JS 發生異常，就會發送以下面的 HTTP 請求

http://localhost/u.gif?t=err&msg=errMessage&js=jsFileName&ln=errLine

如何展現

採集到數據以後，通過一系列的數據處理、彙總等操做以後，咱們須要使用生動的圖表來呈現數據，讓用戶（產品決策者、開發人員等）可以方便、快捷的看懂數據。咱們推薦使用百度的開源 javascript 圖表庫ECharts。下面列舉幾個常見的數據展現方式：

瀏覽器的佔比狀況：

用戶的登錄狀況

用戶的地理位置分佈

有些時候須要看多天的波動狀況，例如瀏覽器的多天佔比波動狀況

還有些時候你可能須要使用一些表格來展現：

總結

前端的數據有不少的分析價值，它是線上用戶的真實反饋，直接體現着產品的用戶體驗。根據文中描述的步驟，你徹底能夠搭建本身的前端數據平臺。

該文寫在w3ctech的走進名企 - 百度前端 FEX 專場以後，分享時的 PPT 在這裏，視頻在這裏。