接触行为分析，大概有一个月左右时间，这段时间不论是在网上学习，还是自己琢磨如何来做埋点，如何拿取数据，如何存储等，都学到了一些东西，这篇文章主要介绍我这段时间的研究历程，希望之后做这块的人能有个参考。
一、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;
})();
二、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;
}(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;
})();
三、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数据收集（单独部署的程序，为以后的日志分析做扩展）除了和用户进行了绑定，还可以特定地对用户搜索页面的搜索内容全部拿到！！！这一版本放弃了比较重的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.之后有新版，会继续更新。
扫一扫
3076
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
