技術篇：前端數據之美如何展示？
對于一個成熟的產品來說，隱藏在產品背后的數據分析是非常重要的，也是必不可少的。特別是在重視用戶體驗的今天，需要我們及時了解產品的使用情況，分析數據中隱藏的信息，為產品的提升和改進提供數據支撐。
隨著 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??。下面列舉幾個常見的數據展示方式：
瀏覽器的占比情況：
用戶的登陸情況：
有些時候需要看多天的波動情況，例如瀏覽器的多天占比波動情況
還有些時候你可能需要使用一些表格來展示：
總結
前端的數據有很多的分析價值，它是線上用戶的真實反饋，直接體現著產品的用戶體驗。根據文中描述的步驟，你完全可以搭建自己的前端數據平臺。
