页面埋点&nginx日志采集

页面(web容器:httpd/nginx负载均衡 + apache server)<===> 日志采集服务器(nginx服务器)

  1. 通过某个页面跳转到我们的页面;
  2. 我们页面一渲染完成加载埋点的js,执行业务逻辑采集信息;
  3. 采集页面完成之后,访问log.gif,把参数拼接在args发送给采集服务器;
  4. 采集服务器返回一个1*1空的图片,断开连接。

采集页面埋点(在页面body最后埋js)

<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 = 'http://xxxxxx/ma.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ma, s);
})();
</script>

采集服务器ma.js

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

日志格式

  日志采用每行一条记录的方式,采用不可见字符^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出现如下异常错误: unknown directive "access_by_lua"

之所以报错是缺少nginx的三方插件

安装一个ngx_openresty  该集成包中有:NginxLuaLuajitngx_lua,以及一些有用的Nginx第三方模块。

安装步骤如下:

# 下载
wget https://openresty.org/download/openresty-1.13.6.2.tar.gz
# 解压
tar -zxf openresty-1.13.6.2.tar.gz
# 安装
cd openresty-1.13.6.1 ./configure --with-luajit
make
make install #安装完成默认路径
cd /usr/local/openresty # 配置nginx服务器

 首先,需要在nginx的配置文件中定义日志格式:

log_format tick escape=json "$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";

注意这里以u_开头的是我们待会会自己定义的变量,其它的是nginx内置变量。

采集服务器nginx配置

在nginx 1.11.8 以上版本中log_format 增加了escape=json 参数,在配置日志格式时加上转义中文。

worker_processes  2;

events {
worker_connections 1024;
} http {
include mime.types;
default_type application/octet-stream; log_format tick escape=json "$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"; access_log logs/access.log tick; sendfile on; keepalive_timeout 65; server {
listen 80;
server_name localhost;
location /log.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 这个地方的nginx_logs文件夹 需要先创建好 mkdir /usr/local/openresty/nginx/nginx_logs
access_log nginx_logs/ma.log tick; #输出空字符串
echo '';
}
}
}

要完全解释这段脚本的每一个细节有点超出本文的范围,而且用到了诸多第三方ngxin模块(全都包含在OpenResty中了),重点的地方我都用注释标出来了,可以不用完全理解每一行的意义,只要大约知道这个配置完成了我们在原理一节提到的后端逻辑就可以了。

测试

点击跳转需要埋点的页面

埋点的页面

埋点的页面 ,可以看到已经请求了 http://xxx/log.gif 了

已经写入日志了。成功

Nginx 配置埋点js日志采集的更多相关文章

  1. 使用Nginx和Logstash以及kafka来实现网站日志采集的详细步骤和过程

    使用Nginx和Logstash以及kafka来实现网站日志采集的详细步骤和过程 先列出来总体启动流程: (1)启动zookeeper集群(hadoop01.hadoop02和hadoop03这3台机 ...

  2. filebeat + logstash 日志采集链路配置

    1. 概述 一个完整的采集链路的流程如下: 所以要进行采集链路的部署需要以下几个步聚: nginx的配置 filebeat部署 logstash部署 kafka部署 kudu部署 下面将详细说明各个部 ...

  3. 大数据应用日志采集之Scribe 安装配置指南

    大数据应用日志采集之Scribe 安装配置指南 大数据应用日志采集之Scribe 安装配置指南 1.概述 Scribe是Facebook开源的日志收集系统,在Facebook内部已经得到大量的应用.它 ...

  4. Nginx 配置HTTPS 与Node.js 配置HTTPS方法

    前段时间公司网站要求加上HTTPS安全CA证书,公司服务器全是阿里云服务器,并且配有负载均衡,所以选择直接在阿里云购买CA证书,阿里云有一种证书可以免费试用一年,决定申请此证书,阿里云证书需要验证,阿 ...

  5. IDC机房机器日志采集配置

    以机器 gpu-server-011  为例: 机房机器添加AliUids操作 [root@gpu-server-011 ~]# mkdir -p /etc/ilogtail/users/ [root ...

  6. Nginx配置中的log_format用法梳理(设置详细的日志格式)

    nginx服务器日志相关指令主要有两条:一条是log_format,用来设置日志格式:另外一条是access_log,用来指定日志文件的存放路径.格式和缓存大小,可以参加ngx_http_log_mo ...

  7. nginx启用TCP反向代理日志配置

    Nginx使用TCP反向代理日志配置不同于http 修改nginx配置文档/usr/local/nginx/conf/nginx.conf 设置日志格式 stream { log_format pro ...

  8. Nginx配置日志格式记录cookie

    Nginx配置日志格式记录cookie1. 一般用来做UV统计,或者获取用户token等. 配置方式:  在nginx的配置文件中有个变量:$http_cookie来获取cookie的信息.配置方式很 ...

  9. Centos下Nginx配置WEB访问日志并结合shell脚本定时切割

    在一个成熟的WEB系统里,没有日志管理是不可以的,有了日志,可以帮助你得到用户地域来源.跳转来源.使用终端.某个URL访问量等相关信息:通过错误日志,你可以得到系统某个服务或server的性能瓶颈等. ...

随机推荐

  1. [转]常用Git命令清单

    原文地址:http://www.ruanyifeng.com/blog/2015/12/git-cheat-sheet.html 作者: 阮一峰 日期: 2015年12月 9日 我每天使用 Git , ...

  2. WebGL画点程序v2

    本文程序实现画一个点的任务,如下图.其中,点的位置坐标由Javascript传到着色器程序中,而不是直接给定("硬编码")在顶点着色器中. 整个程序包含两个文件,分别是: 1. H ...

  3. WebForm 登陆test

    <script> window.onload = function () { document.getElementById("form1").onsubmit = f ...

  4. React-Router ---withRouter

    import React from 'react' import { withRouter } from 'react-router' const Hello = (props) => { re ...

  5. Java子类对于父类中static方法的继承

    今天看到了Java中子类继承父类的一个相关讨论,在网上综合了各家的观点,写下了一篇简短的总结. 问题如下,在父类中含有staic修饰的静态方法,那么子类在继承父类以后可不可以重写父类中的静态方法呢? ...

  6. [置顶] 来自 Google 的高可用架构理念与实践

    转自:   https://mp.weixin.qq.com/s?__biz=MzAwMDU1MTE1OQ==&mid=402738153&idx=1&sn=af5e76aad ...

  7. 我的网站恢复访问了,http://FansUnion.cn

    博客网站 http://FansUnion.cn 恢复访问了. 周末,发表几篇原创文章.

  8. Docker在WIN7上的配置

    为什么使用Docker Toolbox Docker在Windows上使用有两种方式,一是利用VirtualBox建立linux虚拟机,在linux虚拟机中安装docker服务端和客户端,二是利用Wi ...

  9. delphi主i窗口中实现多页面管理效果

    MainForm上加Panel,把Panel的DockSite设为True, 把窗口FB_orderManage的DragKind设为dkDock,  DragMode设为dmAuromatic 在M ...

  10. 【codeforces 798B】Mike and strings

    [题目链接]:http://codeforces.com/contest/798/problem/B [题意] 给你n个字符串; 每次操作,你可以把字符串的每个元素整体左移(最左边那个字符跑到最后面去 ...