前端數(shù)據(jù)之美如何展示_數(shù)據(jù)分析師

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

有哪些?

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

1、訪問(wèn)

訪問(wèn)數(shù)據(jù)是基于用戶每次在瀏覽器上打開目標(biāo)頁(yè)面來(lái)統(tǒng)計(jì)的，它是以 PV 為粒度的統(tǒng)計(jì)，一個(gè) PV 只統(tǒng)計(jì)一次訪問(wèn)數(shù)據(jù)。訪問(wèn)數(shù)據(jù)可以算作是最基礎(chǔ)、覆蓋面最廣的一種統(tǒng)計(jì)，可以統(tǒng)計(jì)到很多的指標(biāo)項(xiàng)，下面列出了一些較為常見的指標(biāo)項(xiàng)：

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

2、性能

頁(yè)面 DOM 結(jié)構(gòu)越來(lái)越復(fù)雜，但是又要追求用戶體驗(yàn)，這就對(duì)頁(yè)面的性能提出了更高的要求。性能的監(jiān)控?cái)?shù)據(jù)主要是用來(lái)衡量頁(yè)面的流暢程度，也有一些主要的指標(biāo)：

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

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

3、點(diǎn)擊

在用戶的所有操作中，點(diǎn)擊應(yīng)該是最為主要的一個(gè)行為，包含了：pc 端鼠標(biāo)的 click，移動(dòng)端手指的 touch。用戶的每次點(diǎn)擊都是一次訴求，從點(diǎn)擊數(shù)據(jù)中可以挖掘的信息其實(shí)有很多，下面只列出了我們目前所關(guān)注的指標(biāo)：

頁(yè)面總點(diǎn)擊量

人均點(diǎn)擊量：對(duì)于導(dǎo)航類的網(wǎng)頁(yè)，這項(xiàng)指標(biāo)是非常重要的
流出 url：同樣，導(dǎo)航類的網(wǎng)頁(yè)，直接了解網(wǎng)頁(yè)導(dǎo)流的去向
點(diǎn)擊時(shí)間：用戶的所有點(diǎn)擊行為，在時(shí)間上的分布，反映了用戶點(diǎn)擊操作的習(xí)慣
首次點(diǎn)擊時(shí)間：同上，但是只統(tǒng)計(jì)用戶的第一次點(diǎn)擊，如果該時(shí)間偏大，是否就表明頁(yè)面很卡導(dǎo)致用戶長(zhǎng)時(shí)間不能點(diǎn)擊呢？
點(diǎn)擊熱力圖：根據(jù)用戶點(diǎn)擊的位置，我們可以畫出整個(gè)頁(yè)面的點(diǎn)擊熱力圖，可以很直觀的了解到頁(yè)面的熱點(diǎn)區(qū)域

4、異常

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

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

5、其他

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

如何采集?

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

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

例如：你需要統(tǒng)計(jì)頁(yè)面的 PV，順便加上頁(yè)面來(lái)源(refer)

在頁(yè)面上部署上面的代碼，瀏覽器將會(huì)發(fā)送下面的 http 請(qǐng)求：

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

這時(shí)，只要頁(yè)面中 JS 發(fā)生異常，就會(huì)發(fā)送如下面的 HTTP 請(qǐng)求

如何展示

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

瀏覽器的占比情況：

用戶的登陸情況：

用戶的地理位置分布：

有些時(shí)候需要看多天的波動(dòng)情況，例如瀏覽器的多天占比波動(dòng)情況

還有些時(shí)候你可能需要使用一些表格來(lái)展示：

總結(jié)

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