網站統計中的訪問信息收集的前端實現

網站數據統計分析工具是網站站長和運營人員常用的一種工具，比較經常使用的有谷歌分析、百度統計和騰訊分析等等。全部這些統計分析工具的第一步都是網站訪問數據的收集。目前主流的數據收集方式基本都是基於javascript的。本文將簡要分析這種數據收集的原理，並一步一步實際搭建一個實際的數據收集系統。

近幾天我本身搭建了一個訪問工具站點的日誌收集系統，搭建這個系統要作以下的事：

1.肯定收集信息：

爲了簡單起見，我不打算實現GA的完整數據收集模型，而是收集如下信息。

名稱	途徑	備註
訪問時間	web server	IIS DateTime.Now
IP	web server	IIS 後端API實現
域名	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	IIS 後端API實現
客戶端語言	javascript	navigator.language
訪客標識	cookie
網站標識	javascript	自定義對象

2.前端埋點代碼

點代碼我將借鑑GA的模式，可是目前不會將配置對象做爲一個FIFO隊列用。一個埋點代碼的模板以下：

<script type="text/javascript">
var _maq = _maq || []; _maq.push(['_setAccount', '網站標識']); (function() { var ma = document.createElement('script'); ma.type = 'text/javascript'; ma.async = true; ma.src = ('https:' == document.location.protocol ? 'https://static' : 'http://static') + '.idevtool.com/content/js/ma.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ma, s); })(); </script>

3.前端統計腳本

(function () { var params = {}; //Document對象數據
    if(document) { params.domain = document.domain || ''; params.url = document.URL || ''; params.title = document.title || ''; params.referrer = document.referrer || ''; } //Window對象數據
    if(window && window.screen) { params.sh = window.screen.height || 0; params.sw = window.screen.width || 0; params.cd = window.screen.colorDepth || 0; } //navigator對象數據
    if(navigator) { params.lang = navigator.language || ''; } //解析_maq配置
    if(_maq) { for(var i in _maq) { switch(_maq[i][0]) { case '_setAccount': params.account = _maq[i][1]; break; default: break; } } } //拼接參數串
    var args = ''; for(var i in params) { if(args != '') { args += '&'; } args += i + '=' + encodeURIComponent(params[i]); } //經過Image對象請求後端腳本
    var img = new Image(1, 1); img.src = 'http://analytics.domain.org/logo.gif?' + args; })();

整個腳本放在匿名函數裏，確保不會污染全局環境。功能在原理一節已經說明，再也不贅述。其中logo.gif是後端腳本。

4.後端api接收日誌

後端是用的.Net WebAPI 接收，寫數據庫，單獨部署的站點，安全認證

5.管理端統計分析

獨立IP數，PV數等各類統計

 

程序員工具站點：草根工具www.idevtool.com 

我的筆記站點：草根筆記note.idevtool.com

原文出處：https://www.cnblogs.com/benpao/p/10786926.html