圖1. 網(wǎng)站統(tǒng)計數(shù)據(jù)收集基本流程
首先，用戶的行為會觸發(fā)瀏覽器對被統(tǒng)計頁面的一個http請求，這里姑且先認為行為就是打開網(wǎng)頁。當網(wǎng)頁被打開，頁面中的埋點javascript片段會被執(zhí)行，用過相關工具的朋友應該知道，一般網(wǎng)站統(tǒng)計工具都會要求用戶在網(wǎng)頁中加入一小段javascript代碼，這個代碼片段一般會動態(tài)創(chuàng)建一個script標簽，并將src指向一個單獨的js文件，此時這個單獨的js文件（圖1中綠色節(jié)點）會被瀏覽器請求到并執(zhí)行，這個js往往就是真正的數(shù)據(jù)收集腳本。數(shù)據(jù)收集完成后，js會請求一個后端的數(shù)據(jù)收集腳本（圖1中的backend），這個腳本一般是一個偽裝成圖片的動態(tài)腳本程序，可能由php、python或其它服務端語言編寫，js會將收集到的數(shù)據(jù)通過http參數(shù)的方式傳遞給后端腳本，后端腳本解析參數(shù)并按固定格式記錄到訪問日志，同時可能會在http響應中給客戶端種植一些用于追蹤的cookie。
上面是一個數(shù)據(jù)收集的大概流程，下面以谷歌分析為例，對每一個階段進行一個相對詳細的分析。
埋點腳本執(zhí)行階段
若要使用谷歌分析（以下簡稱GA），需要在頁面中插入一段它提供的javascript片段，這個片段往往被稱為埋點代碼。下面是我的博客中所放置的谷歌分析埋點代碼截圖：
圖2. 谷歌分析埋點代碼
其中_gaq是GA的的全局數(shù)組，用于放置各種配置，其中每一條配置的格式為：
Action指定配置動作，后面是相關的參數(shù)列表。GA給的默認埋點代碼會給出兩條預置配置，_setAccount用于設置網(wǎng)站標識ID，這個標識ID是在注冊GA時分配的。_trackPageview告訴GA跟蹤一次頁面訪問。更多配置請參考：https://developers.google.com/analytics/devguides/collection/gajs/。實際上，這個_gaq是被當做一個FIFO隊列來用的，配置代碼不必出現(xiàn)在埋點代碼之前，具體請參考上述鏈接的說明。
就本文來說，_gaq的機制不是重點，重點是后面匿名函數(shù)的代碼，這才是埋點代碼真正要做的。這段代碼的主要目的就是引入一個外部的js文件（ga.js），方式是通過document.createElement方法創(chuàng)建一個script并根據(jù)協(xié)議（http或https）將src指向?qū)膅a.js，最后將這個element插入頁面的dom樹上。
注意ga.async = true的意思是異步調(diào)用外部js文件，即不阻塞瀏覽器的解析，待外部js下載完成后異步執(zhí)行。這個屬性是HTML5新引入的。
數(shù)據(jù)收集腳本執(zhí)行階段
數(shù)據(jù)收集腳本（ga.js）被請求后會被執(zhí)行，這個腳本一般要做如下幾件事：
1、通過瀏覽器內(nèi)置javascript對象收集信息，如頁面title（通過document.title）、referrer（上一跳url，通過document.referrer）、用戶顯示器分辨率（通過windows.screen）、cookie信息（通過document.cookie）等等一些信息。
2、解析_gaq收集配置信息。這里面可能會包括用戶自定義的事件跟蹤、業(yè)務數(shù)據(jù)（如電子商務網(wǎng)站的商品編號等）等。
3、將上面兩步收集的數(shù)據(jù)按預定義格式解析并拼接。
4、請求一個后端腳本，將信息放在http request參數(shù)中攜帶給后端腳本。
這里唯一的問題是步驟4，javascript請求后端腳本常用的方法是ajax，但是ajax是不能跨域請求的。這里ga.js在被統(tǒng)計網(wǎng)站的域內(nèi)執(zhí)行，而后端腳本在另外的域（GA的后端統(tǒng)計腳本是http://www.google-analytics.com/__utm.gif），ajax行不通。一種通用的方法是js腳本創(chuàng)建一個Image對象，將Image對象的src屬性指向后端腳本并攜帶參數(shù)，此時即實現(xiàn)了跨域請求后端。這也是后端腳本為什么通常偽裝成gif文件的原因。通過http抓包可以看到ga.js對__utm.gif的請求：
圖3. 后端腳本請求的http包
可以看到ga.js在請求__utm.gif時帶了很多信息，例如utmsr=1280×1024是屏幕分辨率，utmac=UA-35712773-1是_gaq中解析出的我的GA標識ID等等。
值得注意的是，__utm.gif未必只會在埋點代碼執(zhí)行時被請求，如果用_trackEvent配置了事件跟蹤，則在事件發(fā)生時也會請求這個腳本。
由于ga.js經(jīng)過了壓縮和混淆，可讀性很差，我們就不分析了，具體后面實現(xiàn)階段我會實現(xiàn)一個功能類似的腳本。
后端腳本執(zhí)行階段
GA的__utm.gif是一個偽裝成gif的腳本。這種后端腳本一般要完成以下幾件事情：
1、解析http請求參數(shù)的到信息。
2、從服務器（WebServer）中獲取一些客戶端無法獲取的信息，如訪客ip等。
3、將信息按格式寫入log。
5、生成一副1×1的空gif圖片作為響應內(nèi)容并將響應頭的Content-type設為image/gif。
5、在響應頭中通過Set-cookie設置一些需要的cookie信息。
之所以要設置cookie是因為如果要跟蹤唯一訪客，通常做法是如果在請求時發(fā)現(xiàn)客戶端沒有指定的跟蹤cookie，則根據(jù)規(guī)則生成一個全局唯一的cookie并種植給用戶，否則Set-cookie中放置獲取到的跟蹤cookie以保持同一用戶cookie不變（見圖4）。
圖4. 通過cookie跟蹤唯一用戶的原理
這種做法雖然不是完美的（例如用戶清掉cookie或更換瀏覽器會被認為是兩個用戶），但是是目前被廣泛使用的手段。注意，如果沒有跨站跟蹤同一用戶的需求，可以通過js將cookie種植在被統(tǒng)計站點的域下（GA是這么做的），如果要全網(wǎng)統(tǒng)一定位，則通過后端腳本種植在服務端域下（我們待會的實現(xiàn)會這么做）。
系統(tǒng)的設計實現(xiàn)
根據(jù)上述原理，我自己搭建了一個訪問日志收集系統(tǒng)。總體來說，搭建這個系統(tǒng)要做如下的事：
圖5. 訪問數(shù)據(jù)收集系統(tǒng)工作分解
確定收集的信息
為了簡單起見，我不打算實現(xiàn)GA的完整數(shù)據(jù)收集模型，而是收集以下信息。
| 名稱 | 途徑 | 備注 |
| 訪問時間 | web server | Nginx $msec |
| IP | web server | Nginx $remote_addr |
| 域名 | javascript | document.domain |
| URL | javascript | document.URL |
| 頁面標題 | javascript | document.title |
| 分辨率 | javascript | window.screen.height width |
| 顏色深度 | javascript | window.screen.colorDepth |
| Referrer | javascript | document.referrer |
| 瀏覽客戶端 | web server | Nginx $http_user_agent |
| 客戶端語言 | javascript | navigator.language |
| 訪客標識 | cookie | |
| 網(wǎng)站標識 | javascript | 自定義對象 |
(function() {
var ma = document.createElement('script'); ma.type = 'text/javascript'; ma.async = true;
ma.src = ('https:' == document.location.protocol ? 'https://analytics' : 'http://analytics') + '.codinglabs.org/ma.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ma, s);
})();
/script>
這里我啟用了二級域名analytics.codinglabs.org，統(tǒng)計腳本的名稱為ma.js。當然這里有一點小問題，因為我并沒有https的服務器，所以如果一個https站點部署了代碼會有問題，不過這里我們先忽略吧。
前端統(tǒng)計腳本
我寫了一個不是很完善但能完成基本工作的統(tǒng)計腳本ma.js：
//通過Image對象請求后端腳本
var img = new Image(1, 1);
img.src = 'http://analytics.codinglabs.org/1.gif?' + args;
})();
整個腳本放在匿名函數(shù)里，確保不會污染全局環(huán)境。功能在原理一節(jié)已經(jīng)說明，不再贅述。其中1.gif是后端腳本。
日志格式
日志采用每行一條記錄的方式，采用不可見字符^A（ascii碼0×01，Linux下可通過ctrl + v ctrl + a輸入，下文均用“^A”表示不可見字符0×01），具體格式如下：
時間^AIP^A域名^AURL^A頁面標題^AReferrer^A分辨率高^A分辨率寬^A顏色深度^A語言^A客戶端信息^A用戶標識^A網(wǎng)站標識
后端腳本
為了簡單和效率考慮，我打算直接使用nginx的access_log做日志收集，不過有個問題就是nginx配置本身的邏輯表達能力有限，所以我選用了OpenResty做這個事情。OpenResty是一個基于Nginx擴展出的高性能應用開發(fā)平臺，內(nèi)部集成了諸多有用的模塊，其中的核心是通過ngx_lua模塊集成了Lua，從而在nginx配置文件中可以通過Lua來表述業(yè)務。關于這個平臺我這里不做過多介紹，感興趣的同學可以參考其官方網(wǎng)站http://openresty.org/，或者這里有其作者章亦春（agentzh）做的一個非常有愛的介紹OpenResty的slide：http://agentzh.org/misc/slides/ngx-openresty-ecosystem/，關于ngx_lua可以參考：https://github.com/chaoslawful/lua-nginx-module。
首先，需要在nginx的配置文件中定義日志格式：
然后是核心的兩個location：
access_by_lua "
-- 用戶跟蹤cookie名為__utrace
local uid = ngx.var.cookie___utrace
if not uid then
-- 如果沒有則生成一個跟蹤cookie，算法為md5(時間戳+IP+客戶端信息)
uid = ngx.md5(ngx.now() .. ngx.var.remote_addr .. ngx.var.http_user_agent)
end
ngx.header['Set-Cookie'] = {'__utrace=' .. uid .. '; path=/'}
if ngx.var.arg_domain then
-- 通過subrequest到/i-log記錄日志，將參數(shù)和用戶跟蹤cookie帶過去
ngx.location.capture('/i-log?' .. ngx.var.args .. 'utrace=' .. uid)
end
";
#此請求不緩存
add_header Expires "Fri, 01 Jan 1980 00:00:00 GMT";
add_header Pragma "no-cache";
add_header Cache-Control "no-cache, max-age=0, must-revalidate";
#返回一個1×1的空gif圖片
empty_gif;
}
location /i-log {
#內(nèi)部location，不允許外部直接訪問
internal;
#設置變量，注意需要unescape
set_unescape_uri $u_domain $arg_domain;
set_unescape_uri $u_url $arg_url;
set_unescape_uri $u_title $arg_title;
set_unescape_uri $u_referrer $arg_referrer;
set_unescape_uri $u_sh $arg_sh;
set_unescape_uri $u_sw $arg_sw;
set_unescape_uri $u_cd $arg_cd;
set_unescape_uri $u_lang $arg_lang;
set_unescape_uri $u_utrace $arg_utrace;
set_unescape_uri $u_account $arg_account;
#打開日志
log_subrequest on;
#記錄日志到ma.log，實際應用中最好加buffer，格式為tick
access_log /path/to/logs/directory/ma.log tick;
#輸出空字符串
echo '';
}
要完全解釋這段腳本的每一個細節(jié)有點超出本文的范圍，而且用到了諸多第三方ngxin模塊（全都包含在OpenResty中了），重點的地方我都用注釋標出來了，可以不用完全理解每一行的意義，只要大約知道這個配置完成了我們在原理一節(jié)提到的后端邏輯就可以了。
日志輪轉(zhuǎn)
真正的日志收集系統(tǒng)訪問日志會非常多，時間一長文件變得很大，而且日志放在一個文件不便于管理。所以通常要按時間段將日志切分，例如每天或每小時切分一個日志。我這里為了效果明顯，每一小時切分一個日志。我是通過crontab定時調(diào)用一個shell腳本實現(xiàn)的，shell腳本如下：
mv ${_prefix}/logs/ma.log ${_prefix}/logs/ma/ma-${time}.log
kill -USR1 `cat ${_prefix}/logs/nginx.pid`
這個腳本將ma.log移動到指定文件夾并重命名為ma-{yyyymmddhh}.log，然后向nginx發(fā)送USR1信號令其重新打開日志文件。
然后再/etc/crontab里加入一行：
圖6. http包分析ma.js和1.gif的請求
同時可以看一下1.gif的請求參數(shù)：
圖7. 1.gif的請求參數(shù)
相關信息確實也放在了請求參數(shù)中。
然后我tail打開日志文件，然后刷新一下頁面，因為沒有設access log buffer， 我立即得到了一條新日志：
圖8. 輪轉(zhuǎn)日志
關于分析
通過上面的分析和開發(fā)可以大致理解一個網(wǎng)站統(tǒng)計的日志收集系統(tǒng)是如何工作的。有了這些日志，就可以進行后續(xù)的分析了。本文只注重日志收集，所以不會寫太多關于分析的東西。
注意，原始日志最好盡量多的保留信息而不要做過多過濾和處理。例如上面的MyAnalytics保留了毫秒級時間戳而不是格式化后的時間，時間的格式化是后面的系統(tǒng)做的事而不是日志收集系統(tǒng)的責任。后面的系統(tǒng)根據(jù)原始日志可以分析出很多東西，例如通過IP庫可以定位訪問者的地域、user agent中可以得到訪問者的操作系統(tǒng)、瀏覽器等信息，再結(jié)合復雜的分析模型，就可以做流量、來源、訪客、地域、路徑等分析了。當然，一般不會直接對原始日志分析，而是會將其清洗格式化后轉(zhuǎn)存到其它地方，如MySQL或HBase中再做分析。
分析部分的工作有很多開源的基礎設施可以使用，例如實時分析可以使用Storm，而離線分析可以使用Hadoop。當然，在日志比較小的情況下，也可以通過shell命令做一些簡單的分析，例如，下面三條命令可以分別得出我的博客在今天上午8點到9點的訪問量（PV），訪客數(shù)（UV）和獨立IP數(shù)（IP）：
一篇關于實現(xiàn)nginx收日志的文章：http://blog.linezing.com/2011/11/%E4%BD%BF%E7%94%A8nginx%E8%AE%B0%E6%97%A5%E5%BF%97
關于Nginx可以參考：http://wiki.nginx.org/Main
OpenResty的官方網(wǎng)站為：http://openresty.org
ngx_lua模塊可參考：https://github.com/chaoslawful/lua-nginx-module
本文http抓包使用Chrome瀏覽器開發(fā)者工具，繪制思維導圖使用Xmind，流程和結(jié)構圖使用Tikz PGF
標簽：文山 黔南 鹽城 宣城 東莞 桂林 景德鎮(zhèn) 南昌
巨人網(wǎng)絡通訊聲明：本文標題《網(wǎng)站統(tǒng)計中的數(shù)據(jù)收集原理及實現(xiàn)》，本文關鍵詞 網(wǎng)站,統(tǒng)計,中的,數(shù)據(jù),收集,；如發(fā)現(xiàn)本文內(nèi)容存在版權問題，煩請?zhí)峁┫嚓P信息告之我們，我們將及時溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡，涉及言論、版權與本站無關。
上一篇：各種語言常用的一句話判斷代碼
