【行为分析】（五）目前做到的3版behavor analyse简介

2024-08-26 21:08
文章标签 分析 行为 简介 目前 做到 analyse behavor

本文主要是介绍【行为分析】（五）目前做到的3版behavor analyse简介，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

       接触行为分析，大概有一个月左右时间，这段时间不论是在网上学习，还是自己琢磨如何来做埋点，如何拿取数据，如何存储等，都学到了一些东西，这篇文章主要介绍我这段时间的研究历程，希望之后做这块的人能有个参考。

  

一、V1.0

       这一版地址：https://github.com/zhangzhenhua92/datacollection.git

       主要围绕坤哥的例子来玩，至少能让它在一个demo中跑起来，开始使用jboss部署，一点点的启动，直到在jboss黑窗口控制台下输出了args参数，我感觉这个东西好像要成功了~~~

        内容介绍：

       （1）主要是前端埋点的认识，后端Controller没有做任何处理，实现功能仅仅是把前端要拿到的数据，在用户触发页面跳转时通过伪装图片的形式传到后端。

       （2）需要改进：

                1.拿到的数据是写死的假数据，并非真正用户的行为。

                2.触发机制是在页面刷新之后，针对新页面中的内容，这个时候，新页面除了上一跳地址reffer，以及当前url，其他信息拿不到，触发时间需要修改到刷新之前。

        （3）研究意义：宏观上了解到行为分析前端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) {// alert(i);if (args != '') {args += '&';}args += i + '=' + params[i];}//通过Image对象请求后端脚本var img = new Image(1, 1);var src = 'http://localhost:8080/data/dataCollection/log.gif?args=' + encodeURIComponent(args);//alert(src);img.src = src;
})();
       这就是V1.0，一个尚待完善的雏形。


二、V2.0

      这一版是没有需求上的要求的，我自己就是产品经理，这块搞成了这个样子：https://github.com/zhangzhenhua92/behavor_analys.git

      内容简介：

     （1）功能上，完善了V1.0中的collection触发时间，在页面A跳到B的时候，A跳转之前完成了数据收集才允许跳转；拿到了用户真实的数据，主要包括：域名、url、上一跳地址、进入页面的时间、跳出页面的时间、本页面停留时间、用户显示器长宽比例、所用浏览器名称（为前端同学拿的）等数据。

     （2）代码上，这个版本的行为分析，需要引入jquery库以及jquery.cookie脚本来使用，相比V1.0只要1个js文件，这版本需要4个，而且需要每一个页面都引入这4个js文件才能实现，其实对系统的侵入性特别大，而且V2.0没有做到将它作为单独的项目，除了需要引入4个js标签之外，还要引入ES的工具类以及elasticsearch.properties的配置，以及我写的Controller方法，用于向ES服务器发送数据。

      （3）有待优化，上面（2）中说的都需要优化，同时这版有个问题，页面连续跳转N次，在收集的信息中，会把第N次，以及前N-1次所有的数据全部拿回到ES服务器中，这样做的劣势就是随着页面跳转次数越来越多，信息量越来越大，根本没有办法分析。同时没有绑定用户，这样子不知道是谁的行为，很奇怪。

       不过这一版至少已经拿到了用户的行为，算是小成功吧。

       核心代码展示：

       小段js文件A，用于抛砖引玉，引出真正做收集的大js文件B：

var second = 0;
window.setInterval(function () {second ++;
}, 1000);
var tjArr = localStorage.getItem("jsArr") ? localStorage.getItem("jsArr") : '[{}]';
$.cookie('tjRefer', getReferrer() ,{expires:1,path:'/'});window.onbeforeunload = function() {if($.cookie('tjRefer') == ''){var tjT = eval('(' + localStorage.getItem("jsArr") + ')');if(tjT){tjT[tjT.length-1].time += second;var jsArr= JSON.stringify(tjT);localStorage.setItem("jsArr", jsArr);}} else {var tjArr = localStorage.getItem("jsArr") ? localStorage.getItem("jsArr") : '[{}]';var dataArr = {'url' : location.href,'time' : second,'refer' : getReferrer(),'timeIn' : Date.parse(new Date()),'timeOut' : Date.parse(new Date()) + (second * 1000)};tjArr = eval('(' + tjArr + ')');tjArr.push(dataArr);tjArr= JSON.stringify(tjArr);localStorage.setItem("jsArr", tjArr);}var ma = document.createElement('script');ma.type = 'text/javascript';ma.async = true;ma.src = "http://localhost:8091/data/js/ma.js";var s = document.getElementsByTagName('script')[0];s.parentNode.insertBefore(ma, s);
};
function getReferrer() {var referrer = '';try {referrer = window.top.document.referrer;} catch(e) {if(window.parent) {try {referrer = window.parent.document.referrer;} catch(e2) {referrer = '';}}}if(referrer === '') {referrer = document.referrer;}return referrer;
}
       js文件B： 

(function () {//************************************var a = localStorage.getItem('jsArr');var b = [{},{"url":"http://localhost:8091/data/page1.html","time":"304","refer":"http://localhost:8091/data/","timeIn":"1500969100000","timeOut":"1500969404000"}];//alert("json数组的长度：" + a.length);alert("拿到的数据" + a);//************************************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 || '';}//拼接参数串，内置函数查询到的信息var args = '';for (var i in params) {// alert(i);if (args != '') {args += '&';}args += i + '=' + params[i];}//补充前台的页面信息alert("arg中的数据是：" + args);//通过Image对象请求后端脚本var img = new Image(1, 1);//var src = 'http://localhost:8091/data/dataCollection/log.gif?args=' + encodeURIComponent(args);var src = 'http://192.168.#*.*&￥:8080/data/dataCollection/log.gif?args=' + encodeURIComponent(args);img.src = src;})();
        这里，请求的image路径，我将其改为了某服务器地址，此时测试也通过了。具体代码请参考如上的github地址，这个项目我已经托管到github供大家下载学习。


三、V3.0

      github下载地址：https://github.com/zhangzhenhua92/behavor_analys.git 。

      先看看这个版本的成就吧：

优化内容：1、在dubbo版itoo前后端分离的条件下，测试成功。2、去掉对jquery,以及jquery.cookie库的引用。3、合并了tongji.js和ma.js，现在所有的js文件只有1个。4、去掉了随着页面刷新造成的老数据越来越多的堆积5、和用户绑定一起6、针对搜索界面，拿到用户的输入内容7、拿了ip地址、所在省份（内网iP暂时获取不到）未完成：1.用户端的性能分析，Metrics，和作者联系但未得到回复。2.内网ip目前V2.0成果1.拿到数据：（1）用户名（2）iP地址，所在省份（3）域名（4）url（5）页面title（6）跳入时间（7）跳出时间（8）上一跳地址（9）用户搜索页面上的搜索记录（10）用户所使用的操作系统语言（有助于开发对应的语言包）2.移除的内容：（1）1个js文件，2个jquery库（2）args拼接，后台拿到的冗余数据（3）V1.0里js埋点拿取的无用数据，类似浏览器品种、显示器长宽等部署：（目前做到了对系统的侵入性，仅仅整个项目引一个js标签）1.所有页面前端仅仅引1个js标签，（不用所有页面都引用）2.部署一个工程到服务器上，用于单独做行为分析的收集、大数据分析。技术：1.前端：js埋点2.后端：ES数据收集（单独部署的程序，为以后的日志分析做扩展）
       如上，是昨天对这个V3.0写的验收报告，这里就直接用了，相比前V1.0和V2.0，这一版已经可以直接使用了，值得高兴的是，这一版真正做到了前后端分离，以及对整个itoo的侵入性，只需要引用1个js文件，看清楚啦，是整个系统，只要1个js文件！！！

       除了和用户进行了绑定，还可以特定地对用户搜索页面的搜索内容全部拿到！！！这一版本放弃了比较重的jquery库和jquery.cookie的使用，虽然cookie从4M容量变成了4K，但是设计上也不再通过Cookie拿取常规值，cookie中只是拿取username。

       核心代码展示：

//初次加载username到cookie当中
(function(){//向cookie中写死一个用户，因为现在前端登录界面没有开发出来document.cookie ="vincent";
})();var second = 0;
window.setInterval(function () {second ++;
}, 1000);//关闭、刷新页面之前，页面上埋点 - vincent - 2017年8月15日
window.onbeforeunload = function() {var dataArr = {'url' : location.href,'time' : second,'refer' : getReferrer(),'timeIn' : Date.parse(new Date()),'timeOut' : Date.parse(new Date()) + (second * 1000)};var params = {};if(dataArr){params.url = location.href || '';params.time = dataArr.time || '';params.refer = getReferrer() || '';params.timeIn = dataArr.timeIn || '';params.timeOut = dataArr.timeOut || '';}//Document对象数据if (document) {//每次拿取用户名称params.username = document.cookie || '';params.domain = document.domain || '';params.title = document.title || '';}//navigator对象数据,获取用户的默认语言if (navigator) {params.lang = navigator.language || '';}//拼接参数串，内置函数查询到的信息var args = '';for (var i in params) {if (args != '') {args += '&';}args += i + '=' + params[i];}//通过Image对象请求后端脚本var img = new Image(1, 1);var src = 'http://192.168.*@#.@#￥:8091/data/dataCollection/log.gif?args=' + encodeURIComponent(args);img.src = src; 
};function getReferrer() {var referrer = '';try {referrer = window.top.document.referrer;} catch(e) {if(window.parent) {try {referrer = window.parent.document.referrer;} catch(e2) {referrer = '';}}}if(referrer === '') {referrer = document.referrer;}return referrer;
}


       有待优化：

       （1）ES后台是否搭建集群，大批量用户使用系统时页面跳转，ES是否能够撑得住。

       （2）Metrics这款C端性能分析工具的作者没有联系到，是否可以换个思路使用别的工具来做？

        

        也是经历了第V3.0版本之后，我发现之前网上很多人为什么会有2个js，一个小的一个大的，小js文件调用出大js文件，很可能的原因就是大文件是放在服务器上进行调用的，里面包含有后端收集系统的服务器地址，不能暴露给用户，这样就能够防止被恶意攻击。这也是昨天突然间想到的。


        That's all.之后有新版，会继续更新。

     




这篇关于【行为分析】（五）目前做到的3版behavor analyse简介的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1109682。

相关文章

Nginx分布式部署流程分析

Nginx分布式部署流程分析

《Nginx分布式部署流程分析》文章介绍Nginx在分布式部署中的反向代理和负载均衡作用,用于分发请求、减轻服务器压力及解决session共享问题,涵盖配置方法、策略及Java项目应用,并提及分布式事... 目录分布式部署NginxJava中的代理代理分为正向代理和反向代理正向代理反向代理Nginx应用场景
阅读更多...
Redis中的有序集合zset从使用到原理分析

Redis中的有序集合zset从使用到原理分析

《Redis中的有序集合zset从使用到原理分析》Redis有序集合(zset)是字符串与分值的有序映射,通过跳跃表和哈希表结合实现高效有序性管理,适用于排行榜、延迟队列等场景,其时间复杂度低,内存占... 目录开篇：排行榜背后的秘密一、zset的基本使用1.1 常用命令1.2 Java客户端示例二、zse
阅读更多...
Redis中的AOF原理及分析

Redis中的AOF原理及分析

《Redis中的AOF原理及分析》Redis的AOF通过记录所有写操作命令实现持久化,支持always/everysec/no三种同步策略,重写机制优化文件体积,与RDB结合可平衡数据安全与恢复效率... 目录开篇：从日记本到AOF一、AOF的基本执行流程1. 命令执行与记录2. AOF重写机制二、AOF的
阅读更多...
MyBatis Plus大数据量查询慢原因分析及解决

MyBatis Plus大数据量查询慢原因分析及解决

《MyBatisPlus大数据量查询慢原因分析及解决》大数据量查询慢常因全表扫描、分页不当、索引缺失、内存占用高及ORM开销,优化措施包括分页查询、流式读取、SQL优化、批处理、多数据源、结果集二次... 目录大数据量查询慢的常见原因优化方案高级方案配置调优监控与诊断总结大数据量查询慢的常见原因MyBAT
阅读更多...
分析 Java Stream 的 peek使用实践与副作用处理方案

分析 Java Stream 的 peek使用实践与副作用处理方案

《分析JavaStream的peek使用实践与副作用处理方案》StreamAPI的peek操作是中间操作,用于观察元素但不终止流,其副作用风险包括线程安全、顺序混乱及性能问题,合理使用场景有限... 目录一、peek 操作的本质：有状态的中间操作二、副作用的定义与风险场景1. 并行流下的线程安全问题2. 顺
阅读更多...
MyBatis/MyBatis-Plus同事务循环调用存储过程获取主键重复问题分析及解决

MyBatis/MyBatis-Plus同事务循环调用存储过程获取主键重复问题分析及解决

《MyBatis/MyBatis-Plus同事务循环调用存储过程获取主键重复问题分析及解决》MyBatis默认开启一级缓存,同一事务中循环调用查询方法时会重复使用缓存数据,导致获取的序列主键值均为1,... 目录问题原因解决办法如果是存储过程总结问题myBATis有如下代码获取序列作为主键IdMappe
阅读更多...
Java Docx4j类库简介及使用示例详解

Java Docx4j类库简介及使用示例详解

《JavaDocx4j类库简介及使用示例详解》Docx4j是一个强大而灵活的Java库,非常适合需要自动化生成、处理、转换MicrosoftOffice文档的服务器端或后端应用,本文给大家介绍Jav... 目录1.简介2.安装与依赖3.基础用法示例3.1 创建一个新 DOCX 并添加内容3.2 读取一个已存
阅读更多...
Java中最全最基础的IO流概述和简介案例分析

Java中最全最基础的IO流概述和简介案例分析

《Java中最全最基础的IO流概述和简介案例分析》JavaIO流用于程序与外部设备的数据交互,分为字节流（InputStream/OutputStream）和字符流（Reader/Writer）,处理... 目录IO流简介IO是什么应用场景IO流的分类流的超类类型字节文件流应用简介核心API文件输出流应用文
阅读更多...
Spring Security简介、使用与最佳实践

Spring Security简介、使用与最佳实践

《SpringSecurity简介、使用与最佳实践》SpringSecurity是一个能够为基于Spring的企业应用系统提供声明式的安全访问控制解决方案的安全框架,本文给大家介绍SpringSec... 目录一、如何理解 Spring Security？—— 核心思想二、如何在 Java 项目中使用？——
阅读更多...
Java Stream 并行流简介、使用与注意事项小结

Java Stream 并行流简介、使用与注意事项小结

《JavaStream并行流简介、使用与注意事项小结》Java8并行流基于StreamAPI,利用多核CPU提升计算密集型任务效率,但需注意线程安全、顺序不确定及线程池管理,可通过自定义线程池与C... 目录1. 并行流简介​特点：​2. 并行流的简单使用​示例：并行流的基本使用​3. 配合自定义线程池​示
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2