【行为分析】(五)目前做到的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.之后有新版,会继续更新。

     




评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值