前端數據之美

http://fex.baidu.com/blog/2014/05/front_end-data/

引言

對於一個成熟的產品來說，隱藏在產品背後的數據分析是非常重要的，也是必不可少的。特別是在重視用戶體驗的今天，需要我們及時瞭解產品的使用情況，分析數據中隱藏的信息，爲產品的提升和改進提供數據支撐。

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

有哪些？

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

1、訪問

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

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

2、性能

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

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

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

3、點擊

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

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

4、異常

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

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

5、其他

除了上面提到的 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 在這裏，視頻在這裏。