目录

概述：  Web网页埋点分析的意义

一、web网页前端页面中需要加载ma.js的脚本代码

二、放到后台的前端代码

三、后端配置， 配置nginx服务器日志格式

四：编写index.html

五、后台nginx环境搭建及参考资料

六、参考资料：

概述：  Web网页埋点分析的意义

   进行web网站流量数据统计埋点分析，可以帮助网站管理员、运营人员、推广人员等实时获取网站流量信息，并从流量来源、网站内容、网站访客特性等多方面提供网站分析的数据依据。从而帮助提高网站流量，提升网站用户体验优化，让访客更多的沉淀下来变成会员或客户，通过更少的投入获取最大化的收入。
    访问日志指用户访问网站时的所有访问、浏览、点击行为数据。比如点击了哪一个链接例如常见的微信复制统计、页面访客分析等，打开了哪一个页面复制了哪个微信号，采用了哪个搜索项、总体会话时间等。而所有这些信息都可通过网站日志保存下来。通过分析这些数据，可以获知许多对网站 运营至关重要的信息。采集的数据越全面，分析就能越精准。参考自：


gif埋点的java demo web端埋点_数据分析

网页埋点

 


gif埋点的java demo web端埋点_数据挖掘_02

标题

 

一、web网页前端页面中需要加载ma.js的脚本代码

<script type="text/javascript">
	var _maq = _maq || [];
	_maq.push(['_setAccount', 'zaomianbao']);
	(function() {
		var ma = document.createElement('script'); 
		ma.type = 'text/javascript';
		ma.async = true;
		ma.src = 'http://vtongji.gam7.com/ma.js';
		var s = document.getElementsByTagName('script')[0]; 
		s.parentNode.insertBefore(ma, s);
	})();
</script>

二、放到后台的前端代码

(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://vtongji.ibixue.com/log.gif?' + args;
})();

三、后端配置， 配置nginx服务器日志格式

worker_processes  2;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;

	log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';
					  
    log_format user_log_format "$msec||$remote_addr||$status||$body_bytes_sent||$u_domain||$u_url||$u_title||$u_referrer||$u_sh||$u_sw||$u_cd||$u_lang||$http_user_agent||$u_account";
    
    sendfile        on;  #允许sendfile方式传输文件，默认为off

    keepalive_timeout  65; #连接超时时间，默认为75s

    server {
        listen       80;
        server_name  localhost;
		location /log.gif {
			#伪装成gif文件
			default_type image/gif;    
			#nginx本身记录的access_log，日志格式为main
			access_log  logs/access.log  main;
		
			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_account $arg_account;

		
			#打开subrequest（子请求）日志
			log_subrequest on;
			#自定义采集的日志，记录数据到user_defined.log
			access_log logs/user_defined.log user_log_format;
		
			#输出空字符串
			echo '';
		}	
	
    }
}

四：编写index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>测试埋点</title>
	
		<script type="text/javascript">
			var _maq = _maq || [];
			_maq.push(['_setAccount', 'zaomianbao']);
	 
			(function() {
				var ma = document.createElement('script'); 
				ma.type = 'text/javascript';
				ma.async = true;
				ma.src = 'http://yishengjun.gookang.com/ma.js';
				var s = document.getElementsByTagName('script')[0]; 
				s.parentNode.insertBefore(ma, s);
			})();
		</script>	
	</head>
	<body>
		<h1 align="center">测试埋点</h1>
	</body>
</html>

五、后台nginx环境搭建及参考资料

web点数据采集后台配置nginx：


下载数据源：
wget -O lua-nginx-module-0.10.0.tar.gz https://github.com/openresty/lua-nginx-module/archive/v0.10.0.tar.gz

wget --no-check-certificate -Oecho-nginx-module-0.58.tar.gz 'https://github.com/openresty/echo-nginx-module/archive/v0.58.tar.gz'

wget --no-check-certificate -O nginx_devel_kit-0.2.19.tar.gz https://github.com/simpl/ngx_devel_kit/archive/v0.2.19.tar.gz

wget https://openresty.org/download/openresty-1.9.7.3.tar.gz

wget --no-check-certificate -Oset-misc-nginx-module-0.29.tar.gz 'https://github.com/openresty/set-misc-nginx-module/archive/v0.29.tar.gz'

六、参考资料：

http://openresty.org/en/
http://nginx.org/en/download.html

http://www.lua.org/about.html
http://www.baldu.com
http://vtongji.gam7.com
http://www.runoob.com/lua/lua-tutorial.html
http://www.vrgc.com.cn