网站数据统计阐明东西是网站站长和运营职员常常利用的一种东西，比力常用的有谷歌阐明、百度统计和腾讯阐明等等。全部这些统计阐明东西的第一步都是网站会见数据的网络。今朝主流的数据网络方法根基都是基于javascript的。本文将扼要阐明这种数据网络的道理，并一步一步现实搭建一个现实的数据网络体系。
　　数据网络道理阐明
　　简朴来说，网站统计阐明东西必要网络到用户欣赏方针网站的举动（如打开某网页、点击某按钮、将商品插手购物车等）及举动附加数据（如某下单举动发生的订单金额等）。早期的网站统计每每只网络一种用户举动：页面的打开。尔后用户在页面中的举动均无法网络。这种网络计谋能满意根基的流量阐明、来历阐明、内容阐明及访客属性等常用阐明视角，可是，跟着ajax技能的遍及利用及电子商务网站对付电子商务方针的统计阐明的需求越来越猛烈，这种传统的网络计谋已经显得力不能及。
　　厥后，Google在其产物谷歌阐明中创新性的引入了可定制的数据网络剧本，用户通过谷歌阐明界说好的可扩展接口，只需编写少量的javascript代码就可以实现自界说变乱和自界说指标的跟踪和阐明。今朝百度统计、搜狗阐明等产物均照搬了谷歌阐明的模式。
　　实在提及来两种数据网络模式的根基道理和流程是同等的，只是后一种通过javascript网络到了更多的信息。下面看一下此刻各类网站统计东西的数据网络根基道理。
　　起首通过一幅图总体看一下数据网络的根基流程。
　　

　　图1. 网站统计数据网络根基流程
　　起首，用户的举动会触发欣赏器对被统计页面的一个http哀求，这里临时先以为举动就是打开网页。当网页被打开，页面中的埋点javascript片断会被实行，用过相干东西的伴侣应该知道，一样平常网站统计东西城市要求用户在网页中插手一小段javascript代码，这个代码片断一样平常会动态建立一个script标签，并将src指向一个单独的js文件，此时这个单独的js文件（图1中绿色节点）会被欣赏器哀求到并实行，这个js每每就是真正的数据网络剧本。数据网络完成后，js会哀求一个后端的数据网络剧本（图1中的backend），这个剧本一样平常是一个伪装成图片的动态剧本步伐，大概由php、python或别的办事端说话编写，js会将网络到的数据通过http参数的方法通报给后端剧本，后端剧本剖析参数并按牢固格局记载到会见日记，同时大概会在http相应中给客户端栽培一些用于追踪的cookie。
　　上面是一个数据网络的或许流程，下面以谷歌阐明为例，对每一个阶段举行一个相对具体的阐明。
　　若要利用谷歌阐明（以下简称GA），必要在页面中插入一段它提供的javascript片断，这个片断每每被称为埋点代码。下面是我的博客中所安排的谷歌阐明埋点代码截图：
　　

　　图2. 谷歌阐明埋点代码
　　个中_gaq是GA的的全局数组，用于安排各类设置，个中每一条设置的格局为：
　　1_gaq.push（［‘Action’， ‘param1’， ‘param2’，..］）;
　　Action指定设置行动，背面是相干的参数列表。GA给的默认埋点代码会给出两条预置设置，_setAccount用于配置网站标识ID，这个标识ID是在注册GA时分派的。_trackPageview报告GA跟踪一次页面会见。更多设置请参考：https://developers.google.com/analytics/devguides/collection/gajs/。现实上，这个_gaq是被当做一个FIFO行列来用的，设置代码不必呈现在埋点代码之前，详细请参考上述链接的申明。
　　就本文来说，_gaq的机制不是重点，重点是背面匿名函数的代码，这才是埋点代码真正要做的。这段代码的首要目标就是引入一个外部的js文件（ga.js），方法是通过document.createElement要领建立一个script并按照协议（http或https）将src指向对应的ga.js，末了将这个element插入页面的dom树上。
　　留意ga.async = true的意思是异步伐用外部js文件，即不壅闭欣赏器的剖析，待外部js下载完成后异步实行。这个属性是HTML5新引入的。
　　数据网络剧本（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的后端统计剧本是），ajax行不通。一种通用的要领是js剧本建立一个Image工具，将Image工具的src属性指向后端剧本并携带参数，此时即实现了跨域哀求后端。这也是后端剧本为什么凡是伪装成gif文件的缘故原由。通过http抓包可以看到ga.js对__utm.gif的哀求：
　　

　　图3. 后端剧本哀求的http包
　　可以看到ga.js在哀求__utm.gif时带了许多信息，比方utmsr=1280×1024是屏幕辨别率，utmac=UA-35712773-1是_gaq中剖析出的我的GA标识ID等等。
　　值得留意的是，__utm.gif未必只会在埋点代码实行时被哀求，假如用_trackEvent设置了变乱跟踪，则在变乱产生时也会哀求这个剧本。
　　因为ga.js颠末了压缩和混合，可读性很差，我们就不阐明了，详细背面实现阶段我会实现一个功效雷同的剧本。
　　GA的__utm.gif是一个伪装成gif的剧本。这种后端剧本一样平常要完成以下几件工作：
　　1、剖析http哀求参数的到信息。
　　2、从办事器（WebServer）中获取一些客户端无法获取的信息，如访客ip等。
　　3、将信息按格局写入log。
　　5、天生一副1×1的空gif图片作为相应内容并将相应头的Content-type设为image/gif。
　　5、在相应头中通过Set-cookie配置一些必要的cookie信息。
　　之以是要配置cookie是由于假如要跟踪独一访客，凡是做法是假如在哀求时发明客户端没有指定的跟踪cookie，则按照法则天生一个全局独一的cookie并栽培给用户，不然Set-cookie中安排获取到的跟踪cookie以保持统一用户cookie稳定（见图4）。
　　

　　图4. 通过cookie跟踪独一用户的道理
　　这种做法固然不是完善的（比方用户清掉cookie或改换欣赏器会被以为是两个用户），可是是今朝被遍及利用的本领。留意，假如没有跨站跟踪统一用户的需求，可以通过js将cookie栽培在被统计站点的域下（GA是这么做的），假如要全网统必然位，则通事后端剧本栽培在办事端域下（我们待会的实现会这么做）。
　　注：相干网站建立本领阅读请移步到建站教程频道。
　　
　　体系的计划实现
　　按照上述道理，我本身搭建了一个会见日记网络体系。总体来说，搭建这个体系要做如下的事：
　　

　　图5. 会见数据网络体系事情剖析
　　下面详述每一步的实现。我将这个体系叫做MyAnalytics。
　　为了简朴起见，我不计划实现GA的完备数据网络模子，而是网络以下信息。
　　

　　埋点代码我将鉴戒GA的模式，可是今朝不会将设置工具作为一个FIFO行列用。一个埋点代码的模板如下：
　　这里我启用了二级域名analytics.codinglabs.org，统计剧本的名称为ma.js。固然这里有一点小题目，由于我并没有https的办事器，以是假如一个https站点摆设了代码会有题目，不外这里我们先忽略吧。
　　我写了一个不是很完美但能完成根基事情的统计剧本ma.js：
　　<blockquote>
　　（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://www.chinaz.com/web/2012/1102/‘http://upload.chinaz.com//？’"+ args;
　　}）（）;
　　</blockquote>
　　整个剧本放在匿名函数里，确保不会污染全局情况。功效在道理一节已经申明，不再赘述。个中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网站标识
　　为了简朴和服从思量，我计划直接利用nginx的access_log做日记网络，不外有个题目就是nginx设置自己的逻辑表达本领有限，以是我选用了OpenResty做这个工作。OpenResty是一个基于Nginx扩展出的高机能应用开辟平台，内部集成了诸多有效的模块，个中的焦点是通过ngx_lua模块集成了Lua，从而在nginx设置文件中可以通过Lua来表述营业。关于这个平台我这里不做过多先容，感乐趣的同窗可以参考其官方网站http://openresty.org/，大概这里有其作者章亦春（agentzh）做的一个很是有爱的先容OpenResty的slide：http://agentzh.org/misc/slides/ngx-openresty-ecosystem/，关于ngx_lua可以参考：https://github.com/chaoslawful/lua-nginx-module。
　　注：相干网站建立本领阅读请移步到建站教程频道。
　　
　　起首，必要在nginx的设置文件中界说日记格局：
　　<blockquote>
　　log_format tick "$msec^A$remote_addr^A$u_domain^A$u_url^A$u_title^A$u_referrer^A$u_sh^A$u_sw^A$u_cd
　　^A$u_lang^A$http_user_agent^A$u_utrace^A$u_account";
　　</blockquote>
　　留意这里以u_开头的是我们待会会本身界说的变量，别的的是nginx内置变量。
　　然后是焦点的两个location：
　　<blockquote>
　　location /1.gif {
　　#伪装成gif文件
　　default_type image/gif;
　　#自己封闭access_log，通过subrequest记载log
　　access_log off;
　　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记载日记，将参数和用户跟踪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 {
　　#内部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 ‘’;
　　}
　　</blockquote>
　　要完全表明这段剧本的每一个细节有点超出本文的范畴，并且用到了诸多第三方ngxin模块（全都包罗在OpenResty中了），重点的处所我都用解释标出来了，可以不消完全明白每一行的意义，只要约莫知道这个设置完成了我们在道理一节提到的后端逻辑就可以了。
编辑：论文第9区   发布时间：2013-02-05