Web网站行为跟踪

     收集用户隐私的行径眼下已不再是什么新鲜的话题（与其说是收集，不如说是偷窥），就连G、MS也屡出风头，当然事出有因，企业通过无法八门的各种手段了解用户的行为，进而作为决策支持的依据；通常表现为跨领域的收集（浏览器、智能系统、OS etc.）、业务、产品数据的收集，当然收集的方式也不一而论。以下展示通过客户端脚本方式收集Web站点用户行为数据的实现方式，以此来判断页面加载过程、执行时间、用户停留时间、页面提交率、成功率、页面错误等（本示例实现较为简单，在特定复杂的业务数据收集时，可适当重构与改造）。

1、收集基础数据

基础数据涵盖

（1）  业务类：业务流页面地址、用户停留时间、打开次数、

会话ID、客户端IP、业务流步骤等

（2）  辅助类：浏览器、OS、COOKIE等

（3）  示例

 

/* 

•     记录构造基础数据 
• */  
• var Logger = {  
•     Debug: false,  
•     UserControl: 'inputUser',  
•     HistoryControl: 'inputHistory',  
•     TimerControl: 'inputTimer',  
•     GetUser: function() {  
•         if (!$f(this.UserControl)) return ",,";  
•         return $f(this.UserControl).value;  
•     },  
•     /*-- attribute --*/  
•     Guid: function() {  
•         return this.GetUser().split(',')[0];  
•     },  
•     SessionID: function() {  
•         return this.GetUser().split(',')[1];  
•     },  
•     GetStep: function() {  
•         return this.GetUser().split(',')[2];  
•     },  
•     ProcessTime: function() {  
•         if (!$f(this.TimerControl)) return "0";  
•         return $f(this.TimerControl).value;  
•     },  
•     AppSys: 1, //不同系统编号  
•     Environment: '', //Environment.Dev:开发Dev、测试Test、正式Official  
•     IsNewSite: 1,  
•     //是否历史返回  
•     IsHistory: function() {  
•         if (!$f(this.HistoryControl)) return false;  
•         if ($f(this.HistoryControl).value.length > 0)  
•             return true;  
•         //if (this.IsSuccReturn()) return true; //成功返回 非历史  
•         return false;  
•     },  
•     IsStep2History: function() { //是否为第2步返回历史  
•         if (!$f(this.HistoryControl)) return false;  
•         var history = $f(this.HistoryControl).value;  
•         if (history.length == 0)  
•             return false;  
•         if (history.split(',').length > 1)  
•             return true;  
•         return false;  
•     },  
•     //是否为页面reload返回  
•     IsReturn: function() {  
•         if (typeof getUrlParam != "function") return false;  
•         var para = getUrlParam("return");  
•         if (para == "1") return true;  
•         return false;  
•     },  
•     //是否成功返回  
•     IsSuccReturn: function() {  
•         var para = getUrlParam("succret");  
•         if (para == "1") return true;  
•         return false;  
•     },  
•     //tracetype,guid,sessionid,processtime,description  
•     WriteStepLog: function() {  
•         var argc = arguments.length;  
•         var traceType = (argc > 0) ? arguments[0] : "";  
•         var guid = (argc > 1) ? arguments[1] : "";  
•         var sessionID = (argc > 2) ? arguments[2] : "";  
•         var processTime = (argc > 3) ? (arguments[3] == "" ? "0" : arguments[3]) : "0";  
•         var description = (argc > 4) ? arguments[4] : "";  
•         var url = (argc > 5) ? arguments[5] : "";  
•         /*with (Trace.Parameter) 
•         { 
•         TraceType = traceType; 
•         Guid = guid; 
•         SessionID = sessionID; 
•         PageUrl = window.location.href; 
•         ProcessTime = processTime; 
•         //set const value 
•         AppSys = 1; 
•         Environment = Environment.Dev; //Offical 
•         IsNewSite = 1; 
•         Description = description; 
•         }*/  
•         Trace.Parameter.TraceType = traceType;  
•         Trace.Parameter.Guid = guid;  
•         Trace.Parameter.SessionID = sessionID;  
•         if (url.length == 0) {  
•             url = window.location.href;  
•             //alert("self:" + window.location.href + ",refer:" + self.document.referrer);  
•             if (url.toLowerCase().indexOf('errorpage.aspx') > -1 && traceType.indexOf('ret') == -1) {  
•                 if (document.referrer != null && document.referrer != "") url = document.referrer;  
•             }  
•         }  
•         Trace.Parameter.PageUrl = url;  
•         Trace.Parameter.ProcessTime = processTime;  
•         Trace.Parameter.AppSys = this.AppSys;  
•         if (this.Environment.length == 0) this.Environment = Environment.Official;  
•         var curUrl = window.location.href.toLowerCase();  
•         if (curUrl.indexOf('https://') > -1) {  
•             this.Environment = this.Environment.replace('http://', 'https://');  
•         }  
•         Trace.Parameter.Environment = this.Environment;  
•         Trace.Parameter.IsNewSite = this.IsNewSite;  
•         Trace.Parameter.Description = escape(description);  
•         if (this.Debug) {  
•             alert(Trace.Parameter.TraceType + "," + Trace.Parameter.Guid + "," + Trace.Parameter.SessionID + ","  
•             + Trace.Parameter.ProcessTime + "," + Trace.Parameter.Description);  
•         }  
•         Trace.Submit(Trace.Parameter, null, 'img');  
•     },  
•     WriteOpenLog: function() {  
•         try {  
•             var argc = arguments.length;  
•             var step = (argc > 0) ? arguments[0] : "";  
•             var desc = (argc > 1) ? arguments[1] : "";  
•             if (typeof PTID != "undefined" && PTID.length > 0) {  
•                 desc += ",PTID:" + PTID;  
•             }  
•             var loginstep = this.GetStep();  
•             /*if (this.IsSuccReturn()) { //成功返回 
•             Logger.WriteStepLog(Step.succret, this.Guid(), this.SessionID(), this.ProcessTime(), desc); 
•             this.SetTimer(); 
•             }*/  
•             if (step == "step1" && !this.IsHistory() && typeof loginstep != "undefined" && loginstep.length > 0) { //登录返回(第一步发生)  
•                 Logger.WriteStepLog(loginstep, this.Guid(), this.SessionID(), this.ProcessTime(), desc);  
•             }  
•             else if (step == "step1" && !this.IsHistory() && !this.IsReturn()) //not history back,not page reload  
•             {  
•                 Logger.WriteStepLog(step, this.Guid(), this.SessionID(), this.ProcessTime(), desc);  
•             }  
•             else if ((step == "step2" && !this.IsStep2History()) || step == "step3") { //第2步、第3步  
•                 Logger.WriteStepLog(step, this.Guid(), this.SessionID(), this.ProcessTime(), desc);  
•                 this.SetTimer();  
•             }  
•             else if (step == "password" || step == "mobile" || step == "cancelbind") { //一点充没有历史返回等属性  
•                 Logger.WriteStepLog(step, this.Guid(), this.SessionID(), this.ProcessTime(), desc);  
•                 this.SetTimer();  
•             }  
•             else if (this.IsHistory() || this.IsStep2History() || this.IsReturn()) { //历史返回  
•                 Logger.WriteStepLog(step + "ret", this.Guid(), this.SessionID(), "0", desc);  
•                 this.SetTimer();  
•             }  
•             else {  
•                 Logger.WriteStepLog(step, this.Guid(), this.SessionID(), "0", desc);  
•             }  
•         }  
•         catch (e) {  
•   
•         }  
•     },  
•     WriteSubmitLog: function() {  
•         try {  
•             var argc = arguments.length;  
•             var step = (argc > 0) ? arguments[0] : "";  
•             var desc = (argc > 1) ? arguments[1] : "";  
•             var url = (argc > 2) ? arguments[2] : "";  
•             if (typeof PTID != "undefined" && PTID.length > 0) {  
•                 desc += ",PTID:" + PTID;  
•             }  
•             Logger.WriteStepLog(step, this.Guid(), this.SessionID(), this.ProcessTime(), desc, url);  
•             $f(this.HistoryControl).value = "1";  
•             //set step2  
•             if (step == "step2submit") {  
•                 $f(this.HistoryControl).value = "1,1";  
•             }  
•             this.SetTimer();  
•         }  
•         catch (e) {  
•         }  
•     },  
•     SetTimer: function() { //reset timer  
•         if (Timer && typeof Timer != "undefined") {  
•             Timer.Reset();  
•         }  
•     },  
•     DirectOpenLog: function() {  
•         try {  
•             var argc = arguments.length;  
•             var step = (argc > 0) ? arguments[0] : "";  
•             var desc = (argc > 1) ? arguments[1] : "";  
•             if (typeof PTID != "undefined" && PTID.length > 0) {  
•                 desc += ",PTID:" + PTID;  
•             }  
•             this.AppSys = 2;  
•             Logger.WriteStepLog(step, this.Guid(), this.SessionID(), this.ProcessTime(), desc);  
•             if (step != Step.step1) {  
•                 this.SetTimer();  
•             }  
•         }  
•         catch (e) {  
•         }  
•     }  
• };  
• var $f = function(name) {  
•     return document.getElementById(name);  
• }  
• //记录客户端脚本错误  
• window.onerror = function GetErrors(error) {  
•     try {  
•         var msg;  
•         for (var i = 0; i < arguments.length; i++) {  
•             if (i == 0 || i == 2) {  
•                 msg += " | " + arguments[i];  
•             }  
•         }  
•         if (msg.length > 0 && typeof Logger != 'undefined') {  
•             Logger.WriteStepLog('syserror', '-', '-', '', msg);  
•         }  
•         window.onerror = null;  
•         return true;  
•     } catch (e) { };  
• }  

　　

2、时间统计

通过在页面放置计时器，计算当前视图下用户的停留时间。

示例：

/*--------Timer Script------------- 

• *  
• * 页面计时器控件 
• * 1、Timer.BindControl = 'inputTimer'; 
• * 2、<input id="inputTimer" type="hidden" class="timer" /> 
• * 不写Cookie、不显示定时器时,采用(EndTime - StratTime)即可 
• */  
• var up, down;  
• var cmin1, csec1, clock;  
• var Timer = {  
•     Debug: false,  
•     BindControl: 'inputTimer',  
•     StartTime: '',  
•     EndTime: '',  
•     StartTimer: function() {  
•         if (!$f(this.BindControl)) return;  
•         if ($f(this.BindControl).value != "") return;  
•         //$("#" + this.BindControl).val("");  
•         cmin1 = 0;  
•         csec1 = 0;  
•         //每个页面单独记录,不需要采用Cookie,屏蔽  
•         //        var cookie = GetCookie("Timer");  
•         //        if (cookie) {  
•         //            cmin1 = parseInt(this.Minutes(cookie));  
•         //            csec1 = parseInt(this.Seconds(cookie));  
•         //            DeleteCookie("Timer");  
•         //        }  
•         //        else {  
•         //            cmin1 = csec1 = 0;  
•         //        }  
•         this.Repeat();  
•     },  
•     SetValue: function() {  
•         var html = $f(this.BindControl).value;  
•         if (html != null && html.length > 0) SetCookie("Timer", html);  
•     },  
•     Minutes: function(data) {  
•         for (var i = 0; i < data.length; i++) if (data.substring(i, i + 1) == ":") break;  
•         return (data.substring(0, i));  
•     },  
•     Seconds: function(data) {  
•         for (var i = 0; i < data.length; i++) if (data.substring(i, i + 1) == ":") break;  
•         return (data.substring(i + 1, data.length));  
•     },  
•     Display: function(min, sec) {  
•         var disp = "";  
•         if (min <= 9) disp += "0" + min + ":";  
•         else disp += min + ":";  
•         if (sec <= 9) disp += "0" + sec;  
•         else disp += sec;  
•         return (disp);  
•     },  
•     Repeat: function() {  
•         csec1++;  
•         if (csec1 == 60) { csec1 = 0; cmin1++; }  
•         $f(this.BindControl).value = this.Display(cmin1, csec1);  
•         if (this.Debug) $f("inputDebug").value = this.Display(cmin1, csec1);  
•         clock = window.setTimeout(function() { Timer.Repeat() }, 1000);  
•     },  
•     //重新开始计时  
•     Reset: function() {  
•         $f(this.BindControl).value = "";  
•         window.clearTimeout(clock);  
•         Timer.StartTimer();  
•     },  
•     AddTrigger: function() {  
•         var list = document.getElementsByTagName("INPUT");  
•         for (var i = 0; i < list.length; i++) {  
•             if (list[i].type.toUpperCase() == 'TEXT') {  
•                 if (list[i].addEventListener) {  
•                     list[i].addEventListener("keyup", function() { Timer.StartTimer(); }, false);  
•                 }  
•                 else {  
•                     list[i].attachEvent("onkeyup", function() { Timer.StartTimer(); });  
•                 }  
•             }  
•         }  
•     }  
• };  
• if (document.all) {  
•     window.attachEvent("onload", function() { Timer.AddTrigger() });  
• }  
• else {  
•     window.addEventListener("load", function() { Timer.AddTrigger() }, false);  
• }  
• if (Timer.Debug) {  
•     if (!document.getElementById("inputDebug")) {  
•         document.write("<input type='text' id='inputDebug' />");  
•     }  
• }  
• /* 兼容两种模式设定Cookie */  
• //$(window).unload(function() { Timer.SetValue(); });  
• //$("form").submit(function() { Timer.SetValue(); });  

3、异步记录

将收集到的数据通过GET、POST异步的方式发送到目标服务器

示例：

/*--------Trace Script-------------*/  

• var Step =  
• {  
•     /* step */  
•     step1: "step1", //第一步打开,不含历史返回、成功返回  
•     step2: "step2",  
•     step3: "step3",  
•     /* post */  
•     step1submit: "step1submit", //第一步提交  
•     step2submit: "step2submit",  
•     step3submit: "step3submit",  
•     step3resubmit: "step3resubmit", //第三步重新提交  
•     /* success */  
•     success:"success", //操作成功  
•     succret: "succret", //成功返回  
•     step1ret: "step1ret", //返回第一步  
•     step2ret: "step2ret",  
•     step3ret: "step3ret",  
•     /* error */  
•     error:"error", //操作失败  
•     errstep1: "errstep1", //第一步出错 错误页面记录  
•     errstep2: "errstep2",  
•     errstep3: "errstep3",  
•     errstep1ret: "errstep1ret", //出错页返回到第一步  
•     errstep2ret: "errstep2ret",  
•     errstep3ret: "errstep3ret",  
•     /* login */  
•     loginb1: "loginb1", //银行卡登录返回  
•     loginc1: "loginc1", //实物卡登录返回  
•     loginbind: "loginbind", //一点充登录返回  
•     step1login: "step1login", //第一步登录界面  
•     /* other */  
•     bind: "bind", //用户绑定一点充  
•     mobile: "mobile", //修改手机号  
•     password: "password", //修改密码  
•     cancelbind: "cancelbind", //取消服务  
•     Login: "Login", //用户登录日志  
•     querydeposit: "querydeposit", //充值记录  
•     querycardbalance: "querycardbalance", //实物卡余额  
•     clickkf: "clickkf", //点击在线客服  
•     closekf: "closekf", //关闭在线客服  
•     clickaccount1: "clickaccount1", //点击新增常用账号  
•     clickaccount2: "clickaccount2" //点击新增确定按钮  
• };  
• var Environment = { Dev: "http://dev.xxx.com", Test: "http://test.xxx.com", Official: "http://www.xxx.com" }  
• var Trace = {  
•     AutoSubmit: false, //是否在提交表单时自动处理  
•     Parameter: {  
•         TraceType: '', //TraceType.open  
•         Guid: '0',  
•         SessionID: '',  
•         PageUrl: '',  
•         Description: '',  
•         ProcessTime: '',  
•         IsNewSite: false,  
•         AppSys: 1,  
•         ClientIP: '',  
•         Environment: Environment.Official,  
•         Extend: {}  
•     },  
•     MyAjax: function() {  
•         this.xml = false;  
•         this.GetXmlHttp = function() {  
•             if (!this.xml && typeof XMLHttpRequest != 'undefined') {  
•                 this.xml = new XMLHttpRequest();  
•             }  
•             else {  
•                 var MSXML = ['MSXML2.XMLHTTP.5.0', 'MSXML2.XMLHTTP.4.0', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP', 'Microsoft.XMLHTTP'];  
•                 for (var i = 0; i < MSXML.length; i++) {  
•                     try {  
•                         this.xml = new ActiveXObject(MSXML[i]);  
•                         break;  
•                     }  
•                     catch (e) {//alert(e.message);  
•                     }  
•                 }  
•             }  
•         }  
•         this.GetXmlHttp();  
•         var xmlHttp = this.xml;  
•         var ajax = this;  
•         var callBack = null;  
•         this.updatePage = function() {  
•             if (xmlHttp.readyState == 4) {  
•                 var response = xmlHttp.responseText;  
•                 if (callBack != null && typeof callBack == "function") {  
•                     callBack(response);  
•                 }  
•             }  
•         }  
•         this.toQueryString = function(json) {  
•             var query = "";  
•             if (json != null) {  
•                 for (var param in json) {  
•                     query += param + "=" + escape(json[param]) + "&"  
•                 }  
•             }  
•             return query;  
•         }  
•         //提交参数,回调函数, post、get方法  
•         this.invoke = function(params, pageCallBack, method) {  
•             if (xmlHttp) {  
•                 var query = "";  
•                 query += this.toQueryString(params);  
•                 query = query.substring(0, query.length - 1);  
•                 //var thisReg = new RegExp(/'|"/gi);  
•                 //query = query.replace(thisReg, "");  
•                 callBack = pageCallBack;  
•                 if (method != null && method.toUpperCase() == "GET") {  
•                     var url = params.Environment + "/Trace.aspx?" + query;  
•                     xmlHttp.onreadystatechange = ajax.updatePage;  
•                     xmlHttp.open("GET", url, true);  
•                     xmlHttp.setRequestHeader("TraceAjax-Ver", "ver1.0");  
•                     xmlHttp.send(null);  
•                 }  
•                 else if (method != null && method.toUpperCase() == "POST") {  
•                     var url = params.Environment + "/Trace.aspx";  
•                     //  xmlHttp.setRequestHeader("Content-Length",query);   
•                     xmlHttp.onreadystatechange = ajax.updatePage; //new CallClient(this);  
•                     xmlHttp.open("POST", url, true);  
•                     xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");  
•                     xmlHttp.setRequestHeader("TraceAjax-Ver", "ver1.0");  
•                     xmlHttp.send(query);  
•                 }  
•                 else { //跨域  
•                     Trace.CreateTraceImg();  
•                     document.getElementById("traceImg").src = params.Environment + "/Trace.aspx?a=" + Math.random(1000000000) + "&" + query;  
•                 }  
•             }  
•         }  
•     },  
•     CreateTraceImg: function() {  
•         if (!document.getElementById("traceImg")) {  
•             document.write("<img id=\"traceImg\" style='display:none' />");  
•             //            var imgNode = document.createElement("img")  
•             //            imgNode.setAttribute("id", "traceImg")  
•             //            imgNode.style.display = "none";  
•             //            document.body.appendChild(imgNode);  
•         }  
•     },  
•     Submit: function(params, pageCallBack, method) {  
•         try {  
•             var ajax = new Trace.MyAjax();  
•             //校验step是否正确  
•             //        for (var i = 0; i < Step.length; i++) {  
•             //            if (params.TraceType == Step[i]) {  
•             //                alert(Step[i]);  
•             //            }  
•             //        }  
•             ajax.invoke(params, pageCallBack, method);  
•         }  
•         catch (e) {  
•         }  
•     }  
• };  
• Trace.CreateTraceImg();  

4、后端数据分析

结合前台收集的用户数据，后台初步可以完成，每一个页面的打开次数、占用时长，提交率、以及后台业务流的成功率等，通过报表形式展示数据分析界面，这样就可以监控用户行为异常、监控系统波动以及影响区域。

5、扩展

通过记录来源地址，可以更详尽的分析用户行为的流程。

通过追加页面元素的点击情况，从而计算点击率。

虽然服务器端也可以做到这些过程，但需求在不同的过程中插入众多的日志记录，进而POST到服务器端，过于繁冗！

另外跟踪服务器可对来源的数据请求验证其合法性，以及是否授权。

*注意：在Tracer的过程中，如遇采用系统方法如：绑定事件window.onload，需要注意不用覆盖了方法，避免与应用的页面冲突，可以通过来添加事件监听,eg:

AddTrigger: function() {  

•     var list = document.getElementsByTagName("INPUT");  
•     for (var i = 0; i < list.length; i++) {  
•         if (list[i].type.toUpperCase() == 'TEXT') {  
•             if (list[i].addEventListener) {  
•                 list[i].addEventListener("keyup", function() { Timer.StartTimer(); }, false);  
•             }  
•             else {  
•                 list[i].attachEvent("onkeyup", function() { Timer.StartTimer(); });  
•             }  
•         }  
•     }  
• }  

6、关于脚本压缩

推荐采用JSA压缩工具，原因：稳定、可靠、压缩质量有保证

不过需要大家安装一下JAVA RUNTIME