网站流量日志数据自定义采集

news/2024/5/15 20:39:12/文章来源:https://blog.csdn.net/weixin_34274029/article/details/91680111

1. 原理分析
首先,用户的行为会触发浏览器对被统计页面的一个http请求,比如打开某网页。当网页被打开,页面中的埋点javascript代码会被执行。
网站流量日志数据自定义采集
埋点是指:在网页中预先加入小段javascript代码,这个代码片段一般会动态创建一个script标签,并将src属性指向一个单独的js文件,此时这个单独的js文件(图中绿色节点)会被浏览器请求到并执行,这个js往往就是真正的数据收集脚本。
数据收集完成后,js会请求一个后端的数据收集脚本(图中的backend),这个脚本一般是一个伪装成图片的动态脚本程序,js会将收集到的数据通过http参数的方式传递给后端脚本,后端脚本解析参数并按固定格式记录到访问日志,同时可能会在http响应中给客户端种植一些用于追踪的cookie。

2. 设计实现
根据原理分析并结合Google Analytics,想搭建一个自定义日志数据采集系统,要做以下几件事:
网站流量日志数据自定义采集
2.1. 确定收集信息
网站流量日志数据自定义采集
2.2. 确定埋点代码
埋点,是网站分析的一种常用的数据采集方法。核心就是在需要进行数据采集的关键点植入统计代码,进行数据的采集。比如以谷歌分析原型来说,需要在页面中插入一段它提供的javascript片段,这个片段往往被称为埋点代码。

<script type="text/javascript">var _maq = _maq || [];_maq.push(['_setAccount', 'UA-XXXXX-X']);(function() {var ma = document.createElement('script'); ma.type = 'text/javascript'; ma.async = true;ma.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ma.js';var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ma, s);})();
</script>

其中_maq是全局数组,用于放置各种配置,其中每一条配置的格式为:
_maq.push(['Action', 'param1', 'param2', ...]);
_maq的机制不是重点,重点是后面匿名函数的代码,这段代码的主要目的就是引入一个外部的js文件(ma.js),方式是通过document.createElement方法创建一个script并根据协议(http或https)将src指向对应的ma.js,最后将这个元素插入页面的dom树上。
注意ma.async = true的意思是异步调用外部js文件,即不阻塞浏览器的解析,待外部js下载完成后异步执行。这个属性是HTML5新引入的。
扩展知识:js自调用匿名函数
格式: (function(){})();
第一对括号向脚本返回未命名的函数;后一对空括号立即执行返回的未命名函数,括号内为匿名函数的参数。
自调用匿名函数的好处是,避免重名,自调用匿名函数只会在运行时执行一次,一般用于初始化。
2.3. 前端数据收集脚本
数据收集脚本(ma.js)被请求后会被执行,一般要做如下几件事:
1、通过浏览器内置javascript对象收集信息,如页面title(通过document.title)、referrer(上一跳url,通过document.referrer)、用户显示器分辨率(通过windows.screen)、cookie信息(通过document.cookie)等等一些信息。
2、解析_maq数组,收集配置信息。这里面可能会包括用户自定义的事件跟踪、业务数据(如电子商务网站的商品编号等)等。
3、将上面两步收集的数据按预定义格式解析并拼接(get请求参数)。
4、请求一个后端脚本,将信息放在http request参数中携带给后端脚本。
这里唯一的问题是步骤4,javascript请求后端脚本常用的方法是ajax,但是ajax是不能跨域请求的。一种通用的方法是js脚本创建一个Image对象,将Image对象的src属性指向后端脚本并携带参数,此时即实现了跨域请求后端。这也是后端脚本为什么通常伪装成gif文件的原因。
示例代码:

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

整个脚本放在匿名函数里,确保不会污染全局环境。其中log.gif是后端脚本。
2.4. 后端脚本
log.gif是后端脚本,是一个伪装成gif图片的脚本。后端脚本一般需要完成以下几件事情:
1、解析http请求参数得到信息。
2、从Web服务器中获取一些客户端无法获取的信息,如访客ip等。
3、将信息按格式写入log。
4、生成一副1×1的空gif图片作为响应内容并将响应头的Content-type设为image/gif。
5、在响应头中通过Set-cookie设置一些需要的cookie信息。
之所以要设置cookie是因为如果要跟踪唯一访客,通常做法是如果在请求时发现客户端没有指定的跟踪cookie,则根据规则生成一个全局唯一的cookie并种植给用户,否则Set-cookie中放置获取到的跟踪cookie以保持同一用户cookie不变。这种做法虽然不是完美的(例如用户清掉cookie或更换浏览器会被认为是两个用户),但是目前被广泛使用的手段。
我们使用nginx的access_log做日志收集,不过有个问题就是nginx配置本身的逻辑表达能力有限,所以选用OpenResty做这个事情。
OpenResty是一个基于Nginx扩展出的高性能应用开发平台,内部集成了诸多有用的模块,其中的核心是通过ngx_lua模块集成了Lua,从而在nginx配置文件中可以通过Lua来表述业务。
Lua 是一种轻量小巧的脚本语言,用标准C语言编写并以源代码形式开放, 其设计目的是为了嵌入应用程序中,从而为应用程序提供灵活的扩展和定制功能。
首先,需要在nginx的配置文件中定义日志格式:
log_format tick
"$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";
注意这里以u_开头的是我们待会会自己定义的变量,其它的是nginx内置变量。然后是核心的两个location:

location / log.gif {#伪装成gif文件default_type image/gif;   #本身关闭access_log,通过subrequest记录logaccess_log off;access_by_lua "-- 用户跟踪cookie名为__utracelocal 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)endngx.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,来自ngx_set_misc模块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;#打开日志 log_subrequest on;#记录日志到ma.log 格式为tickaccess_log /path/to/logs/directory/ma.log tick;#输出空字符串echo '';}

要完全掌握这段脚本的每一个细节还是比较吃力的,用到了诸多第三方ngxin模块(全都包含在OpenResty中了),重点都用注释标出来,可以不用完全理解每一行的意义,只要大约知道这个配置完成了我们提到的后端逻辑就可以了。

2.5. 日志格式
日志格式主要考虑日志分隔符,一般会有以下几种选择:
固定数量的字符、制表符分隔符、空格分隔符、其他一个或多个字符、特定的开始和结束文本。
2.6. 日志切分
日志收集系统访问日志时间一长文件变得很大,而且日志放在一个文件不便于管理。通常要按时间段将日志切分,例如每天或每小时切分一个日志。通过crontab定时调用一个shell脚本实现,如下:


_prefix="/path/to/nginx"time=`date +%Y%m%d%H`mv ${_prefix}/logs/ma.log ${_prefix}/logs/ma/ma-${time}.logkill -USR1 `cat ${_prefix}/logs/nginx.pid `

这个脚本将ma.log移动到指定文件夹并重命名为ma-{yyyymmddhh}.log,然后向nginx发送USR1信号令其重新打开日志文件。
USR1通常被用来告知应用程序重载配置文件, 向服务器发送一个USR1信号将导致以下步骤的发生:停止接受新的连接,等待当前连接停止,重新载入配置文件,重新打开日志文件,重启服务器,从而实现相对平滑的不关机的更改。
cat ${_prefix}/logs/nginx.pid 取 nginx 的进程号
然后再/etc/crontab里加入一行:
59 root /path/to/directory/rotatelog.sh
在每个小时的59分启动这个脚本进行日志轮转操作。

3. 系统环境部署
服务器中安装依赖
yum -y install gcc perl pcre-devel openssl openssl-devel
上传LuaJIT-2.0.4.tar.gz并安装LuaJIT
tar -zxvf LuaJIT-2.0.4.tar.gz -C /usr/local/src/
cd /usr/local/src/LuaJIT-2.0.4/
make && make install PREFIX=/usr/local/luajit
设置LuaJIT环境变量
vi /etc/profile
export LUAJIT_LIB=/usr/local/luajit/lib
export LUAJIT_INC=/usr/local/luajit/include/luajit-2.0
source /etc/profile
创建modules文件夹,保存nginx依赖的模块
mkdir -p /usr/local/nginx/modules
上传nginx依赖的模块
set-misc-nginx-module-0.29.tar.gz
lua-nginx-module-0.10.0.tar.gz
ngx_devel_kit-0.2.19.tar.gz
echo-nginx-module-0.58.tar.gz
将依赖的模块直接解压到modules目录
tar -zxvf lua-nginx-module-0.10.0.tar.gz -C /usr/local/nginx/modules/
tar -zxvf set-misc-nginx-module-0.29.tar.gz -C /usr/local/nginx/modules/
tar -zxvf ngx_devel_kit-0.2.19.tar.gz -C /usr/local/nginx/modules/
tar -zxvf echo-nginx-module-0.58.tar.gz -C /usr/local/nginx/modules/
安装openresty
tar -zxvf openresty-1.9.7.3.tar.gz -C /usr/local/src/
cd /usr/local/src/openresty-1.9.7.3/
./configure --prefix=/usr/local/openresty --with-luajit && make && make install
安装nginx
tar -zxvf nginx-1.8.1.tar.gz -C /usr/local/src/
编译nginx并支持其他模块
cd /usr/local/src/nginx-1.8.1/
./configure --prefix=/usr/local/nginx \
--with-ld-opt="-Wl,-rpath,/usr/local/luajit/lib" \
--add-module=/usr/local/nginx/modules/ngx_devel_kit-0.2.19 \
--add-module=/usr/local/nginx/modules/lua-nginx-module-0.10.0 \
--add-module=/usr/local/nginx/modules/set-misc-nginx-module-0.29 \
--add-module=/usr/local/nginx/modules/echo-nginx-module-0.58
make -j2
make install
备注:如果对linux相关操作不熟,请严格按照上述步骤搭建环境,切记心细,心细,再心细。

4. 自定义采集数据实现4.1. 方案一:基本功能实现
a) 创建页面index.html,添加埋点代码,放入nginx默认目录nginx/html下。
b) 在默认目录nginx/html下添加一个数据采集脚本ma.js。
c) 修改nginx的配置文件,添加自定义相关业务逻辑。
d) 启动nginx
sbin/nginx -c conf/nginx.conf
e) 通过游览器访问nginx
f) 观察自定义日志采集文件是否有对应的内容输出
tail -f logs/user_defined.log
此时还可以观察nginx默认的输出日志文件
tail -f logs/access.log
停止nginx:
sbin/nginx –s stop
4.2. 方案二:页面点击事件
详细步骤请参考附件资料。

转载于:https://blog.51cto.com/13587708/2167551

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_818994.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Slog44_支配vue框架初阶项目之博客网站-单页-客户端与服务端上传功能关联

ArthurSlogSLog-44Year1GuangzhouChinaAug 22th 2018GitHub掘金主页简书主页segmentfault人们会渐渐爱上压迫 崇拜那些使他们丧失思考能力的工业产物 开发环境MacOS(High Sierra 10.13.5) 需要的信息和信息源&#xff1a; HTTP概述HTTP互联网是如何工作的万维网是如何工作的统一…

《大型网站技术架构》读书笔记之六:永无止境之网站的伸缩性架构

此篇已收录至《大型网站技术架构》读书笔记系列目录贴&#xff0c;点击访问该目录可获取更多内容。 首先&#xff0c;所谓网站的伸缩性&#xff0c;指不需要改变网站的软硬件设计&#xff0c;仅仅通过改变部署的服务器数量就可以扩大或者缩小网站的服务处理能力。在整个互联网行…

(SpringMvc,BootStrap,Mysql)酒店旅游网站

【项目功能】 根据需求&#xff0c;确定系统采用JSP技术&#xff0c; SQL Server 2008作为数据库。整个系统要操作方便、易于维护、灵活实用。主要实现了个人中心、首页轮播管理、景区/线路管理、客户管理、酒店门票分类管理、酒店门票管理、帖子管理、帖子回复管理、售后维权…

我是计算机专业,技能一般,女生,大四,准备毕业设计,我想问是不是网站设计简单一些呢?

做网站吧。前端都是使用的htmljscss的方式做的&#xff0c;主要的区别来自于后台。后台可以选择语言比较多&#xff0c;java、python、php、asp其中php是最简单的。Php的环境搭建也简单&#xff0c;文件比较少。用php还不和java一样&#xff0c;java需要导包配置jdk等等&#x…

【计算机毕业设计】基于ssm家校通网站系统

源码交流、毕设帮助、技术指导&#xff0c;见文末。 随着网络技术的飞速发展&#xff0c;网络已渗透到全人类的各个方面&#xff0c;深刻影响着我们的生活和工作方式。家校通网站给教育带来了更广阔的发展空间。家校通网站有对部分类似网站进行分析&#xff0c;找到规律和方法…

【计算机毕业设计】基于springboot个人博客网站

所有的软件开发前都需要进行需求调研和分析&#xff0c;在个人博客系统系统中前台用户需要能够浏览已发布的博客文章&#xff0c;并能在文章底部进行评论互动&#xff0c;后台管理人员登录系统需要能够对系统功能方面的信息进行管理&#xff0c;针对个人博客系统的需求分析有以…

【计算机毕业设计】java ssm+jsp 旅游网站的设计与实现

本旅游管理系统主要包括系统用户管理模块、景点信息管理模块、变幻图管理、旅游线路管理、登录模块、和退出模块等多个模块。采用目前最流行的ssm框架结构和java中流行的ssm框架和myeclipse编辑器、MySQL数据库设计并实现的 。 本系统主要包含了等系统用户管理、景点信息管理…

【计算机毕业设计】java ssm+vue婚纱影楼摄影网站

源码交流及指导、毕设帮助 见文末 本站不同于其它摄影网站&#xff0c;本网站不但可以展示本店的摄影作品&#xff0c;更可以列出众多摄影套餐供用户选择预约&#xff0c;用户看中哪款套餐了&#xff0c;可以预约时间进行拍摄&#xff0c;即增加了店内本身的业务量&#xff0c;…

【计算机毕业设计】jsp+ssm某地区精准扶贫网站(可更改为任意地区)

本精准扶贫网站管理系统主要包括系统用户管理模块、捐赠信息管理模块、投诉信息管理、扶贫资讯管理、登录模块、和退出模块等多个模块,系统基于mvc设计模式,数据库选用的是Mysql数据库&#xff0c;采用Java语言中的SSM(springMvcspringMybatis)框架进行后端开发,JSP主要用于前端…

【计算机毕业设计】ssm+jsp二手车交易网站

毕设帮助、技术指导、源码交流&#xff0c;联系方式见文末。。 二手车交易网站采用B/S模式&#xff0c;促进了二手车交易网站的安全、质量、快捷的发展。传统的管理模式还处于手工处理阶段&#xff0c;管理效率极低&#xff0c;随着用户的不断增多&#xff0c;传统基于手工管理…

【计算机毕业设计】基于springboot的景区旅游网站

随着“互联网”加速与产业融合&#xff0c;数字经济已成为中国发展的新引擎。在旅游产业也不例外&#xff0c;相关数据显示&#xff0c;“互联网旅游”孕育一个新的庞大旅游市场。这个新型市场由网民购买力购买欲望组成。根据最新的互联网发展状况统计报告&#xff0c;截至今年…

【计算机毕业设计】基于java web的校友同学网站

校友资源是高校建设和校友个人发展的宝贵潜在财富&#xff0c;但是历届毕业生离校后&#xff0c;随着时间的推移以及生活繁忙的原因&#xff0c;他们渐渐的忽略了与校友们和母校的联系&#xff0c;基于这种现状&#xff0c;设计并实现B/S架构的校友信息系统应运而生。 校友同学…

3dsmax子菜单无法选择_向大疆无人机学习:在WordPress网站的divi主题中添加悬浮固定二级菜单...

我们WP花园为客户提供深度定制WordPress网站设计开发的过程中&#xff0c;经常会为购买了高级定制服务的客户提供一些个性化模块功能开发。最近&#xff0c;我们有一个WordPress网站建站客户&#xff0c;想要仿制大疆无人机产品详情页里面的固定菜单二级目录的样式&#xff0c;…

seo查询工具源码_SEO关键词查询工具,SEO辅助工具

上一篇给大家分享了四个好用的SEO工具&#xff0c;今天继续给大家推荐几个不错的网站。一&#xff1a;网站安全检测1&#xff1a;百度安全检测&#xff1a;这个是大家一定要熟悉的安全检测平台。已经引用腾讯、小红伞、金山、知道创宇的数据库&#xff0c;假设你的网站在搜索结…

php安装与下载,学习PHP网站开发 连载——PHPCMS的下载与安装详解

原标题&#xff1a;学习PHP网站开发 连载——PHPCMS的下载与安装详解首先是要下载&#xff0c;然后安装&#xff0c;才能在本地学习和调试1&#xff1a;下载PHPCMS官网地址&#xff1a;www.phpcms.cn接着点击&#xff1a;下载结果&#xff1a;解压缩&#xff1a;进入该目录&…

服务器banner是什么_选择网站建设公司应该注意什么?

近期有不少客户咨询我们时都问了同样的问题&#xff1a;“南京网站建设这块真的好复杂&#xff0c;什么价格都有&#xff0c;从几百到几万&#xff0c;到底应该怎么选择网站建设公司呢&#xff1f;”其实从价格角度来说&#xff0c;我们在《建设一个企业网站需要多少钱呢&#…

chm文件在服务器看不到内容,电脑不能打开文件secedit.chm怎么办_网站服务器运行维护,电脑...

win10系统搜索不到无线网络怎么办_网站服务器运行维护win10系统搜索不到无线网络的解决方法&#xff1a;1、首先按【winr】组合键打开运行窗口&#xff0c;输入service.msc&#xff0c;点击【确定】&#xff1b;2、然后开启【wired autoconfig】与【wlan autoconfig】服务即可。…

Google 联合一些社交网站来对抗 facebook

谷歌(Google) 将与其它一些行业领先的社交网站联手&#xff0c;共同对抗互联网新贵Facebook。  谷歌将于周四推出一个通用标准集 ( OpenSocial )&#xff0c;允许软件开发者为谷歌旗下社交网站Orkut&#xff0c;以及LinkedIn、hi5、Friendster、Plaxo和Ning等其它社交网站开…

域名注册便宜_有哪些便宜的域名可以注册建站?

建网站肯定不能缺少域名&#xff0c;不然别人怎么访问网站&#xff1f;总不能让用户输入一长串的网站服务器IP地址吧&#xff1f;开发网站之前需要把域名申请注册好&#xff0c;方便到时候网站快速上线&#xff0c;立马就能解析域名跟服务器绑定。也有很多人是独立建站&#xf…

CSDN 未来网站内容Tag架构猜想

大概是上周吧&#xff0c;写了一篇blog主观的分析了一下CSDN目前的内容架构&#xff0c;收到许多朋友好的意见和建议&#xff0c;在此首先对他们表示感谢。网络变化真的很快&#xff0c;现在的网站内容架构较2&#xff0c;3年前已经有翻天覆地的变化。很多人也提出了“如今的网…