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

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

有哪些？

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

1、訪問

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

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

2、性能

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

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

這里只是解釋了這些指標的含義，具體的判斷、統(tǒng)計方式在后續(xù)發(fā)出的文章中會詳細介紹。

3、點擊

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

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

4、異常

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

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

5、其他

除了上面提到的 4 類基本的數據統(tǒng)計需求，我們當然還可以根據實際情況來定義一些其他的統(tǒng)計需求，如用戶瀏覽器對 canvas 的支持程度，再比如比較特殊的 — 用戶進行輪播圖翻頁的次數，這些數據統(tǒng)計需求都是前端能夠滿足的，每一項統(tǒng)計的結果都體現(xiàn)了前端數據的價值。

如何采集？

在前端，通過注入 JS 腳本，使用一些 JS API（如：!!window.localStorage 就可以檢驗瀏覽器是否支持 localStorage）或者監(jiān)聽一些事件（如：click、window.onerror、onload 等）就可以得到數據。捕獲到這些數據之后，需要將數據發(fā)送回服務器端，一般都是采用訪問一個固定的 url，把數據作為該 url 的 query string，如：??http://www.baidu.com/u.gif?data1=hello&data2=hi??。

在實踐的過程中我們抽離了一套用于前端統(tǒng)計的框架??alog???，方便開發(fā)者書寫自己的統(tǒng)計腳本，具體的使用方法和 API 見??github??。下面就使用 alog 來簡單說明如何進行前端數據的采集：

例如：你需要統(tǒng)計頁面的 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");

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

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

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

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

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

再例如：JS 異常的采集，需要進行事件監(jiān)聽

// 加載 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");

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

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

這時，只要頁面中 JS 發(fā)生異常，就會發(fā)送如下面的 HTTP 請求

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

如何展示

采集到數據之后，經過一系列的數據處理、匯總等操作之后，我們需要使用生動的圖表來呈現(xiàn)數據，讓用戶（產品決策者、開發(fā)人員等）能夠方便、快捷的看懂數據。我們推薦使用百度的開源 javascript 圖表庫??ECharts??。下面列舉幾個常見的數據展示方式：

瀏覽器的占比情況：

用戶的登陸情況：

有些時候需要看多天的波動情況，例如瀏覽器的多天占比波動情況

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

總結

前端的數據有很多的分析價值，它是線上用戶的真實反饋，直接體現(xiàn)著產品的用戶體驗。根據文中描述的步驟，你完全可以搭建自己的前端數據平臺。