網頁用戶行爲的埋點設計

用戶在訪問網頁時，每打開一次網頁至關因而瀏覽器向網站後端的服務器發送一次http請求。藉助chrome瀏覽器，咱們能看到每一個請求的header，其中包含了Cookie/Referer/User-agent等，還有用戶的IP地址。後臺的日誌收集系統會記錄這些請求日誌，根據這些日誌咱們已經可以簡單地統計出一個用戶在網站的訪問路徑了。javascript

對於我的站點，收集這些信息通常也夠用，可以知足站長對流量來源、流量大小的基本分析。可是，對於大型電商、社交、新聞等類別網站，他們每每會須要更詳細的用戶行爲和用戶瀏覽狀態，好比用戶在頁面的停留時間，用戶在多個tab之間的切換等等行爲記錄。html

後來，Google在其產品谷歌分析（Google Analytics）中創新性的引入了可定製的數據收集腳本，用戶經過谷歌分析定義好的可擴展接口，只需編寫少許的javascript代碼就能夠實現自定義事件和自定義指標的跟蹤和分析。目前百度統計、搜狗分析等產品均照搬了谷歌分析的模式。java

後者相比於前者，使用了Ajax和JavaScript的技術，使得收集的數據更全面、更容易。web

基本流程 ajax

當用戶從瀏覽器打開（點擊）一個頁面時，瀏覽器首先會發出一個http的請求，服務器端返回HTML內容，其中夾雜着一段js代碼。這個代碼片斷通常會動態建立一個script標籤，並將src指向一個單獨的js文件，此時這個單獨的js文件（圖1中綠色節點）會被瀏覽器請求到並執行，這個js每每就是真正的數據收集腳本。數據收集完成後，js會請求一個後端的數據收集腳本（圖1中的backend）。，js會將收集到的數據經過http參數的方式傳遞給後端腳本，後端腳本解析參數並按固定格式記錄到訪問日誌，同時可能會在http響應中給客戶端種植一些用於追蹤的cookie。chrome

埋設js代碼 windows

谷歌分析（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）被請求後會被執行，這個腳本通常要作以下幾件事：

一、經過瀏覽器內置javascript對象收集信息，如頁面title（經過document.title）、referrer（上一跳url，經過document.referrer）、用戶顯示器分辨率（經過windows.screen）、cookie信息（經過document.cookie）等等一些信息。

二、解析_gaq收集配置信息。這裏面可能會包括用戶自定義的事件跟蹤、業務數據（如電子商務網站的商品編號等）等。

三、將上面兩步收集的數據按預約義格式解析並拼接。

四、請求一個後端腳本，將信息放在http request參數中攜帶給後端腳本。

這裏惟一的問題是步驟4，javascript請求後端腳本經常使用的方法是ajax，可是ajax是不能跨域請求的。這裏ga.js在被統計網站的域內執行，然後端腳本在另外的域（GA的後端統計腳本是http://www.google-analytics.com/__utm.gif），ajax行不通。一種通用的方法是js腳本建立一個Image對象，將Image對象的src屬性指向後端腳本並攜帶參數，此時即實現了跨域請求後端。這也是後端腳本爲何一般假裝成gif文件的緣由。

後端腳本執行階段

後端腳本通常要完成如下幾件事情：

一、解析http請求參數的到信息。

二、從服務器（WebServer）中獲取一些客戶端沒法獲取的信息，如訪客ip等。

三、將信息按格式寫入log。

四、生成一副1×1的空gif圖片做爲響應內容並將響應頭的Content-type設爲image/gif。

五、在響應頭中經過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/