网页用户行为的埋点设计 - KK4SBB

naive 2021-08-02 原文


网页用户行为的埋点设计


用户在访问网页时,每打开一次网页相当于是浏览器向网站后端的服务器发送一次http请求。借助chrome浏览器,我们能看到每个请求的header,其中包含了Cookie/Referer/User-agent等,还有用户的IP地址。后台的日志收集系统会记录这些请求日志,根据这些日志我们已经能够简单地统计出一个用户在网站的访问路径了。

 

对于个人站点,收集这些信息一般也够用,能够满足站长对流量来源、流量大小的基本分析。但是,对于大型电商、社交、新闻等类别网站,他们往往会需要更详细的用户行为和用户浏览状态,比如用户在页面的停留时间,用户在多个tab之间的切换等等行为记录。

 

后来,Google在其产品谷歌分析(Google Analytics)中创新性的引入了可定制的数据收集脚本,用户通过谷歌分析定义好的可扩展接口,只需编写少量的javascript代码就可以实现自定义事件和自定义指标的跟踪和分析。目前百度统计、搜狗分析等产品均照搬了谷歌分析的模式。

 

后者相比于前者,使用了Ajax和JavaScript的技术,使得收集的数据更全面、更容易。

 

基本流程

当用户从浏览器打开(点击)一个页面时,浏览器首先会发出一个http的请求,服务器端返回HTML内容,其中夹杂着一段js代码。这个代码片段一般会动态创建一个script标签,并将src指向一个单独的js文件,此时这个单独的js文件(图1中绿色节点)会被浏览器请求到并执行,这个js往往就是真正的数据收集脚本。数据收集完成后,js会请求一个后端的数据收集脚本(图1中的backend)。,js会将收集到的数据通过http参数的方式传递给后端脚本,后端脚本解析参数并按固定格式记录到访问日志,同时可能会在http响应中给客户端种植一些用于追踪的cookie。

 

埋设js代码

 

谷歌分析(GA)在页面中的埋点js代码片段是ga.js,它用来记录用户与网站的交互行为,其具体的用法可以在这里找到。目前,谷歌已经推荐开发者用新的版本,analytics.js。

 

首先,要在被分析页面HTML的header部分,加入上面这段代码。\’ _setAccount\’设置了该页面的一个ID,这个ID是注册GA时分配的。\’ _trackPageview\’则向GA的服务器发送一条跟踪记录。

 

接下去的这个函数,它创建了一段script,并将其src指向了ga.js,然后将这个元素加入到页面的dom树上。

 

异步收集数据

 

上面代码中的\’_gaq\’的对象是数据收集的关键。它是一个FIFO结构的队列,将需要记录的用户交互行为用\’_gaq.push\’的方法添加进队列。

比如,要记录用户点击某个按钮的行为,可以这样添加。

 

数据收集脚本(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的后端统计脚本是http://www.google-analytics.com/__utm.gif),ajax行不通。一种通用的方法是js脚本创建一个Image对象,将Image对象的src属性指向后端脚本并携带参数,此时即实现了跨域请求后端。这也是后端脚本为什么通常伪装成gif文件的原因。

 

后端脚本执行阶段

 

后端脚本一般要完成以下几件事情:

 

1、解析http请求参数的到信息。

2、从服务器(WebServer)中获取一些客户端无法获取的信息,如访客ip等。

3、将信息按格式写入log。

4、生成一副1×1的空gif图片作为响应内容并将响应头的Content-type设为image/gif。

5、在响应头中通过Set-cookie设置一些需要的cookie信息。

 

之所以要设置cookie是因为如果要跟踪唯一访客,通常做法是如果在请求时发现客户端没有指定的跟踪cookie,则根据规则生成一个全局唯一的cookie并种植给用户,否则Set-cookie中放置获取到的跟踪cookie以保持同一用户cookie不变。

 

 

 

 

参考

网站统计中的数据收集原理及实现:http://blog.codinglabs.org/articles/how-web-analytics-data-collection-system-work.html

GA的开发者文档:https://developers.google.com/analytics/devguides/collection/gajs/

posted on
2016-03-05 16:02 
KK4SBB 
阅读(21110
评论(0
编辑 
收藏 
举报

 

版权声明:本文为naive原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://www.cnblogs.com/naive/p/5245013.html

网页用户行为的埋点设计 - KK4SBB的更多相关文章

  1. Docker新手入门:基本用法 – 毛小娃

    Docker新手入门:基本用法 Docker新手入门:基本用法 1.Docker简介 1.1 第一本Docke […]...

  2. Win7下安装xp虚拟机 – 泽强

    Win7下安装xp虚拟机 在win7下安装Oracle VM VirtualBox虚拟机,然后在安装xp程序。 […]...

  3. 在Winform界面使用自定义用户控件及TabelPanel和StackPanel布局控件 – 伍华聪

    在Winform界面使用自定义用户控件及TabelPanel和StackPanel布局控件 在很多时候,我们做 […]...

  4. 数据库 –> SQL Server 和 Oracle 以及 MySQL 区别

    SQL Server 和 Oracle 以及 MySQL 区别   三者是目前市场占有率最高(依安装量而非收入 […]...

  5. Java自动化测试框架-04 – TestNG之Test Method篇 – 道法自然,法力无边(详细教程)

    简介 按照上一篇的计划,这一篇给小伙伴们分享一下测试方法。 一、设置参数 测试方法是可以带有参数的。每个测试方 […]...

  6. ​PNG图片压缩对比分析 – ZhYQ_note

    ​PNG图片压缩对比分析 原文地址:https://cloud.tencent.com/developer/a […]...

  7. 赚钱的秘诀(转) – 魔幻紫光

    到底如何赚更多钱呢?首先我们必须了解钱到底是什么?才知道如何赚更多钱,你同意吗? 我认为钱是一种物质,钱不只是 […]...

  8. react + node + express + ant + mongodb 的简洁兼时尚的博客网站

    前言 此项目是用于构建博客网站的,由三部分组成,包含前台展示、管理后台和后端。 此项目是基于 react + […]...

随机推荐

  1. 21-Java-Hibernate框架(一)

    一、Hibernate了解     Hibernate框架是Java持久层的框架,是Gavin King发明的 […]...

  2. Notepad++ 使用步骤,熟练掌握notepad++的使用技巧,无疑会大大提升专业技能。以及快捷键操作

    官方下载地址: https://notepad-plus.en.softonic.com/ 1.安装 双击安装 […]...

  3. 吐血推荐250部必看电影下载 IMDB TOP 250 download

    中文名: IMDB Top 250合辑 TLF-MiniSD收藏版英文名: IMDB Top 250 TLF- […]...

  4. 关于巴特沃斯低通滤波器

    在[B,A]=butter(n,wn)中,n是滤波器的阶数,Wn是截止频率,Wc = 截止频率*2/采样频率 […]...

  5. OneNET麒麟座应用开发之十:空气质量数据监测站项目总结

    大气质量数据监测站用于测试空气质量监测及数据采集,实现野外或者室内空气质量的检测。 1、项目概述 本项目是一个 […]...

  6. 在win64上使用bypy进行百度网盘文件上传

    阿里云服务器的带宽为2M,网站每日的备份包都3G多了,离线下载太费时间了,打算每日将备份包自动上传到自己的百度 […]...

  7. RocketMQ从3.5.8升级到4.3.2版本实战记录

      背景   我们在很早之前大约在2015年8月份左右我们开始使用Rocketmq作为公司消息中间件,那个时候 […]...

  8. 前端插件之Bootstrap Dual Listbox使用

    工欲善其事,必先利其器 对于很多非专业前端开发来说写页面是非常痛苦的,借助框架或插件往往能够达到事半功倍的效果 […]...

展开目录

目录导航