用戶在訪問網頁時,每打開一次網頁相當於是瀏覽器向網站后端的服務器發送一次http請求。借助chrome瀏覽器,我們能看到每個請求的header,其中包含了Cookie/Referer/User-agent等,還有用戶的IP地址。后台的日志收集系統會記錄這些請求日志,根據這些日志我們已經能夠簡單地統計出一個用戶在網站的訪問路徑了。
對於個人站點,收集這些信息一般也夠用,能夠滿足站長對流量來源、流量大小的基本分析。但是,對於大型電商、社交、新聞等類別網站,他們往往會需要更詳細的用戶行為和用戶瀏覽狀態,比如用戶在頁面的停留時間,用戶在多個tab之間的切換等等行為記錄。
后來,Google在其產品谷歌分析(Google Analytics)中創新性的引入了可定制的數據收集腳本,用戶通過谷歌分析定義好的可擴展接口,只需編寫少量的javascript代碼就可以實現自定義事件和自定義指標的跟蹤和分析。目前百度統計、搜狗分析等產品均照搬了谷歌分析的模式。
后者相比於前者,使用了Ajax和JavaScript的技術,使得收集的數據更全面、更容易。
基本流程
當用戶從瀏覽器打開(點擊)一個頁面時,瀏覽器首先會發出一個http的請求,服務器端返回HTML內容,其中夾雜着一段js代碼。這個代碼片段一般會動態創建一個script標簽,並將src指向一個單獨的js文件,此時這個單獨的js文件(圖1中綠色節點)會被瀏覽器請求到並執行,這個js往往就是真正的數據收集腳本。數據收集完成后,js會請求一個后端的數據收集腳本(圖1中的backend)。,js會將收集到的數據通過http參數的方式傳遞給后端腳本,后端腳本解析參數並按固定格式記錄到訪問日志,同時可能會在http響應中給客戶端種植一些用於追蹤的cookie。
埋設js代碼
谷歌分析(GA)在頁面中的埋點js代碼片段是ga.js,它用來記錄用戶與網站的交互行為,其具體的用法可以在這里找到。目前,谷歌已經推薦開發者用新的版本,analytics.js。
首先,要在被分析頁面HTML的header部分,加入上面這段代碼。' _setAccount'設置了該頁面的一個ID,這個ID是注冊GA時分配的。' _trackPageview'則向GA的服務器發送一條跟蹤記錄。
接下去的這個函數,它創建了一段script,並將其src指向了ga.js,然后將這個元素加入到頁面的dom樹上。
異步收集數據
上面代碼中的'_gaq'的對象是數據收集的關鍵。它是一個FIFO結構的隊列,將需要記錄的用戶交互行為用'_gaq.push'的方法添加進隊列。
比如,要記錄用戶點擊某個按鈕的行為,可以這樣添加。
數據收集腳本(ga.js)被請求后會被執行,這個腳本一般要做如下幾件事:
1、通過瀏覽器內置javascript對象收集信息,如頁面title(通過document.title)、referrer(上一跳url,通過document.referrer)、用戶顯示器分辨率(通過windows.screen)、cookie信息(通過document.cookie)等等一些信息。
2、解析_gaq收集配置信息。這里面可能會包括用戶自定義的事件跟蹤、業務數據(如電子商務網站的商品編號等)等。
3、將上面兩步收集的數據按預定義格式解析並拼接。
4、請求一個后端腳本,將信息放在http request參數中攜帶給后端腳本。
這里唯一的問題是步驟4,javascript請求后端腳本常用的方法是ajax,但是ajax是不能跨域請求的。這里ga.js在被統計網站的域內執行,而后端腳本在另外的域(GA的后端統計腳本是http://www.google-analytics.com/__utm.gif),ajax行不通。一種通用的方法是js腳本創建一個Image對象,將Image對象的src屬性指向后端腳本並攜帶參數,此時即實現了跨域請求后端。這也是后端腳本為什么通常偽裝成gif文件的原因。
后端腳本執行階段
后端腳本一般要完成以下幾件事情:
1、解析http請求參數的到信息。
2、從服務器(WebServer)中獲取一些客戶端無法獲取的信息,如訪客ip等。
3、將信息按格式寫入log。
4、生成一副1×1的空gif圖片作為響應內容並將響應頭的Content-type設為image/gif。
5、在響應頭中通過Set-cookie設置一些需要的cookie信息。
之所以要設置cookie是因為如果要跟蹤唯一訪客,通常做法是如果在請求時發現客戶端沒有指定的跟蹤cookie,則根據規則生成一個全局唯一的cookie並種植給用戶,否則Set-cookie中放置獲取到的跟蹤cookie以保持同一用戶cookie不變。
參考
網站統計中的數據收集原理及實現:http://blog.codinglabs.org/articles/how-web-analytics-data-collection-system-work.html
GA的開發者文檔:https://developers.google.com/analytics/devguides/collection/gajs/