在php、jsp、asp後端總攬一切的時代，網站統計基本是後臺的事情——其實web開發，也沒有前端這個職位，網站設計（現在的UI）不僅要前途還要用dreamwave等工具生成html給後臺套模板。web2.0後，除了數據庫帶寬瓶頸，基本就在前端了。
入職順豐後，發現前端統計居然還得自己搞id，ajax發送POST請求去請求統計系統入庫（即使ajax也用head請求好點吧），驚呆了（雖然作爲一個前端，出過方案，做過nginx json 日誌統計todo案列，但是，沒有人配合，然並卵……）
今天來侃下這個話題：
在不使用谷歌分析、百度統計、站長統計、騰訊分析等工具前提下，如何規劃自己的統計系統？
數據收集原理分析
網站統計分析工具需要收集到用戶瀏覽目標網站的行爲（如打開某網頁、點擊某按鈕、將商品加入購物車等）及行爲附加數據（如某下單行爲產生的訂單金額等）。這裏的行爲可以分爲兩類：
- 觸發後臺請求（提交訂單、結算）——繼續拆分：1、直接觸發ajax請求，2、資源請求（如圖片等）
- 不觸發後臺請求（頁面內跳轉、單頁面跳轉
對於會觸發後臺請求的行爲，選擇好路徑關鍵詞，定時抓取nginx日誌，python分析入庫。
對於不觸發後臺請求的行爲，那麼我們需要手動觸發，一般是直接發送一個head請求（，百度統計爲發送一個1*1px的圖片（個人推薦圖片，後續請求修改請求參數即可）。如果是web-app的話，可以存儲到本地緩存，跟隨app統計，定時發送。
這裏關於統計js的建議：利用js的冒泡原理，在最頂層元素（body）監聽事件，更具元素文字觸發統計函數（修改img src url 中的param參數），具體流程如下
細節問題，可參考《網站統計中的數據收集原理及實現》與《聊一聊前端功能統計那些事兒》
收據入庫建議
請求發送到後臺，nginx會記錄請求（運維一般會關閉nginx的access_log），這裏個人推薦把nginx入職格式設置爲JSON格式(推薦查看《Nginx葵花寶典—草根站長Nginx運維百科全書》)。這樣無論python還是nodejs都很好地處理數據入庫工作。
需要注意的點：
1. 當點擊發生本頁跳轉的時候，同時發送日誌有一定機率無法發出。
當a標籤發生點擊的時候，我們往往會發送一條外鏈的點擊日誌，但是，如果這個a標籤是本頁跳轉（而不是新開頁面）的話，那麼在日誌發送之前，頁面有可能就已經跳轉了，這時，所有的請求都是發不出去的。目前應對這種狀況，沒有什麼特別好的辦法，
- 可以嘗試使用先發日誌，在日誌的回調用進行跳轉，這樣就有可能造成跳轉慢。
- 使用新式API navigator.sendBeacon()，可以在本頁面跳轉之後，堅強的發出一條請求。但是兼容性不太好。
2. 發送的參數不要太多，太長
因爲我們的請求畢竟算是GET請求，肯定有URL長度的限制。所以，發了大量的信息的話，怕會被截斷。
數據分析及可視化
入庫後，需要做數據挖掘和可視化，這樣才能產生價值（不然老闆怎麼來KPI）
網站都有哪些指標？怎麼統計？
這裏推薦先看下《前端數據之美 -- 基礎篇》
現在，歸納如下：
前端
通過http請求頭hender分析
- 頁面來源：頁面的 refer，可以定位頁面的入口
- 操作系統：瞭解用戶的 OS 狀況，幫助分析用戶羣體的特徵，特別是移動端，iOS 和 Android 的分佈就更有意義 user-agent
- 瀏覽器：可以統計到各種瀏覽器的佔比，對於是否繼續兼容 IE6、新技術（HTML5、CSS3 等）的運用等調研提供參考價值
- 訪問時段：掌握用戶訪問時間的分佈，引導消峯填谷、節省帶寬
需前端操作的
- 分辨率：對頁面設計提供參考，特別是響應式設計
- 白屏時間：影響白屏時間的多數是——DNS解析耗時+服務端耗時+網絡傳輸耗時 利用HTML5的performance接口performance.timing.navigationStart(用戶訪問我們網頁最開始的跳轉時間)在</body>前調用統計接口，發送 new Date().getTime()-performance.timing.navigationStart
- 首屏時間：DOM+樣式都渲染時間（個人認爲，因爲圖片等可以延時加載） 用戶可操作時間：到網頁用戶可以使用的時間。一般來講 dom ready時間，便是我們的用戶可操作時間了。推薦讀下《再談DOMContentLoaded與渲染阻塞—分析html頁面事件與資源加載》
- 總下載時間：最後一個請求發送完畢。nginx統計當前URL下請求隊列最後一個完成時間，或者 或者window.onload 函數內觸發統計函數
- 異常統計：JS 的異常捕獲只有兩種方式：window.onerror、try/catch 異常的提示信息：這是識別一個異常的最重要依據，如：’e.src’ 爲空或不是對象 JS 文件名、異常所在行、發生異常的瀏覽器 堆棧信息：必要的時候需要函數調用的堆棧信息，但是注意堆棧信息可能會比較大，需要截取
通過IP 與cookie
這裏可以自行了解下REMOTE_ADDR、HTTP_VIA、HTTP_X_FORWARDED_FOR
- PV/UV：最基礎的 PV（頁面訪問數量）、UV（獨立訪問用戶數量）
- 地域分佈：訪問用戶在地理位置上的分佈，可以針對不同地域做運營、活動等
- 停留時長：判斷頁面內容是否具有吸引力，對於需要長時間閱讀的頁面比較有意義
- 到達深度：和停留時長類似，例如百度百科，用戶瀏覽時的頁面到達深度直接反映詞條的質量
需後端操作的
- 登錄率：百度也開始看重登陸，登陸用戶具有更高的分析價值，引導用戶登陸是非常重要的
- 頁面總點擊量
- 人均點擊量：對於導航類的網頁，這項指標是非常重要的
- 流出 url：同樣，導航類的網頁，直接瞭解網頁導流的去向
- 點擊時間：用戶的所有點擊行爲，在時間上的分佈，反映了用戶點擊操作的習慣
- 首次點擊時間：同上，但是隻統計用戶的第一次點擊，如果該時間偏大，是否就表明頁面很卡導致用戶長時間不能點擊呢？
- 點擊熱力圖：根據用戶點擊的位置，我們可以畫出整個頁面的點擊熱力圖，可以很直觀的瞭解到頁面的熱點區域