智能网站搭建（一）数据埋点
2016-07-19 00:00
351 查看
智能网站搭建（一）数据埋点
现在越来越多的网站开始对用户在网站上的一些行为进行分析，作为一个比较喜欢新鲜事物的人，就对这个技术进行一定的了解，并自己通过参考的博客实现了一个简易的数据收集系统。为了不影响当前使用的系统，收集系统是单独的一个服务器。
数据埋点，就是对数据进行收集，很多时候我们对一些关键的步骤也可以使用埋点技术，现在我只是简单举一个例子，进入页面就发送数据。
页面内容如下：
关键的ma.js页面内容如下：
我这个js里面收集的只是一些超级简单的信息，比如我们用户信息存在了cookie中，这个时候我们就可以读取cookie里面的一些数据一并发过来了。
而且有一些朋友会发现，为什么我发送数据的接口是请求一个图片，这里其实就是借助图片资源是可以跨域的原理，只要后端配合，就可以实现完美的数据采集。
看看我们的后端是怎么做的，既可以使用nginx直接打印日志，也可以使用spring mvc来做哈，我是用spring mvc来做的，因为必须要试试spring mvc，一直用nginx也不能忘了java。
实现如下：
我的参数是乱写的，这个只需要和前端的商量一下就可以成功了。
这个就是我实现的一个超级简单的数据埋点和收集。后面会有一些常见的数据挖掘算法的使用，先写在这里，不知道自己有没有空写出来。
参考博客：http://blog.codinglabs.org/articles/how-web-analytics-data-collection-system-work.html
谷歌统计的实现js:https://support.google.com/analytics/answer/2709828?hl=zh-Hans&topic=1011345&ctx=topic&rd=1
现在越来越多的网站开始对用户在网站上的一些行为进行分析，作为一个比较喜欢新鲜事物的人，就对这个技术进行一定的了解，并自己通过参考的博客实现了一个简易的数据收集系统。为了不影响当前使用的系统，收集系统是单独的一个服务器。
数据埋点，就是对数据进行收集，很多时候我们对一些关键的步骤也可以使用埋点技术，现在我只是简单举一个例子，进入页面就发送数据。
页面内容如下：
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- <script type="text/javascript" src="js/type.js" ></script>-->
<!-- <script src="http://localhost:8080/DataCollection/ma.js"></script>-->
</head>
<body>
</body>
<script type="text/javascript">
var _maq = _maq || [];
_maq.push(['_setAccount', '网站标识']);
(function() {
var ma = document.createElement('script');
ma.type = 'text/javascript';
ma.async = true;
ma.src = "http://localhost:8080/DataCollection/ma.js";
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ma, s);
})();
</script>
</html>关键的ma.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) {
if(args != '') {
args += '&';
}
args += i + '=' + encodeURIComponent(params[i]);
}
//通过Image对象请求后端脚本
var img = new Image(1, 1);
img.src = 'http://localhost:8080/DataCollection/handler/school/log.gif?' + args;
})();我这个js里面收集的只是一些超级简单的信息，比如我们用户信息存在了cookie中，这个时候我们就可以读取cookie里面的一些数据一并发过来了。
而且有一些朋友会发现，为什么我发送数据的接口是请求一个图片，这里其实就是借助图片资源是可以跨域的原理，只要后端配合，就可以实现完美的数据采集。
看看我们的后端是怎么做的，既可以使用nginx直接打印日志，也可以使用spring mvc来做哈，我是用spring mvc来做的，因为必须要试试spring mvc，一直用nginx也不能忘了java。
实现如下：
@RequestMapping(value ="log.gif")
public void analysis(String args,HttpServletResponse response) throws IOException{
System.out.println(args);
response.setHeader("Pragma", "No-cache");
response.setHeader("Cache-Control", "no-cache");
response.setDateHeader("Expires", 0);
response.setContentType("image/gif");
OutputStream out = response.getOutputStream();
BufferedImage image = new BufferedImage(1, 1, BufferedImage.TYPE_INT_RGB);
ImageIO.write(image,"gif",out);
out.flush();
}我的参数是乱写的，这个只需要和前端的商量一下就可以成功了。
这个就是我实现的一个超级简单的数据埋点和收集。后面会有一些常见的数据挖掘算法的使用，先写在这里，不知道自己有没有空写出来。
参考博客：http://blog.codinglabs.org/articles/how-web-analytics-data-collection-system-work.html
谷歌统计的实现js:https://support.google.com/analytics/answer/2709828?hl=zh-Hans&topic=1011345&ctx=topic&rd=1
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 