前端資料之美 -- 基礎篇

edithfang發表於2014-07-03
前端
隨著 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。下面列舉幾個常見的資料展示方式：

瀏覽器的佔比情況：

browser


使用者的登陸情況：

login


使用者的地理位置分佈：

location


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

stack


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

feature



總結

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

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

本文轉載自：http://fex.baidu.com/blog/2014/05/front_end-data/?qq-pf-to=pcqq.c2c
前端 資料之美
評論(0)

相關文章