开发者社区> 白展糖> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

基于鼠标点击跟踪的用户点击行为分…

简介:  你想知道你的网站设计是否合理吗?你确定你的那些按钮和链接是放在该放的位置了吗?你想知道用户到底对页面上的哪些地方感兴趣吗? 没有人能猜出来用户到底喜欢什么,那些“我以为”“我觉得”云云都是扯淡。
+关注继续查看
 你想知道你的网站设计是否合理吗?你确定你的那些按钮和链接是放在该放的位置了吗?你想知道用户到底对页面上的哪些地方感兴趣吗?
没有人能猜出来用户到底喜欢什么,那些“我以为”“我觉得”云云都是扯淡。你有数据吗?
前一阵看到车东的《基于鼠标点击跟踪的用户点击行为分析》,觉得是个很不错的主意,可以跟踪点击行为来分析用户在自己网站上的行为特点,给设计部门一个直观的科学的参考,进而进行有针对性的改进。自己试验了一下,效果非常very相当的goood。
以下是我试验的具体过程:
首先在需要跟踪用户点击行为的页面加入下面的javascript脚本(注意,下面的脚本是在车东的脚本基础上做的改进,使之兼容Firefox和IE):

<script language="javascript">
function clickStat(evt) {
//下面的try-catch语句兼容不同浏览器下创建element的方法;
try{
var image = document.createElement_x("<img></img>");
}catch(err){
var image = document.createElement_x('img');
}
//这里不用document.body.scrollLeft方法来获得滚动条的值,因为在w3c标准的网页中返回值始终为0;
var tempX = evt.clientX + document.documentElement.scrollLeft;
var tempY = evt.clientY + document.documentElement.scrollTop;
image.src = "/click_stats.php?width=" + screen.width + "&x=" + tempX + "&y=" + tempY;
image.height = 0;
image.width = 0;
//下面的try-catch语句屏蔽Firefox下的报错信息;
try{
document.body.insertBefore(image);
}catch(err){}
return true;
}
</script>

 

经过本人在IE以及MAXTHON下的测试,document.documentElement.scrollLeft和document.documentElement.scrollTop返回值都是0,不知道原著是否有错误。全部改成document.body.scrollLeft和document.body.scrollTop就可以了!

 


然后在<body>标签中加入onmousedown=”clickStat(event);”方法。这样做也是为了浏览器兼容(tmd,这些烂标准啥时候能统一)。
在服务端用click_stats.php来接收传递过来的参数,并记录到指定的文件中。如果对多个页面进行统计,还可以在参数中增加页面信息,在服务器端根据页面参数把数据保存到不同的文件中。
接收到的参数包括客户端的屏幕分辨率和点击时的具体坐标,可以根据自己的需要对采集到的数据进行分析。例如,可以确定页面上每个按钮或链接的具体坐标范围,来统计每个按钮或链接的点击次数以及占所有点击次数的百分比。
为了更加直观,我把完整的页面截了一个图作为背景,然后用gd在图上把采集到的数据画成一个个的点,这样就可以清晰的看到页面的点击情况,被点击次数多的按钮或链接,点分布的非常密集,反之就非常稀疏,或者根本没有。直观的反映了受欢迎的程度。
还有需要注意的是,在进行分析的时候一定要考虑到分辨率的问题,例如如果用来画点的背景截图是1024的,而客户端的分辨率是1280的,在画这个坐标点的时候就要在横坐标上减去128。
 
128象素是这样计算出来的,(($ScreenWidth-1024)/2),我们以1024做标准宽度,其他比1024大的显示器分辨率要相应减去一部分数值。比1024小的分辨率要加上这个数值。
if( $_GET[width] > "1024") $_GET[x] =  $_GET[x] - ( ( $_GET[width] - 1024 ) % 2 );
elseif( $_GET[width] < "1024") $_GET[x] =  $_GET[x] + ( ( 1024 - $_GET[width] ) % 2 );

看到统计结果,你就会发现很多地方和你想象的很不一样。没有为什么,真实的数据才能真实的反映用户的行为,而我们作为网站的设计和实现者,完全不能代表普通用户,往往一厢情愿的得到错误的结论。
 
由于要做一个比较通用的系统,总不能每次都要截图吧。所以下面给出一些解决方法。
 
关于网页缩略图,只有在一个网页的缩略图上成功的绘制出用户鼠标所点击过的点,才能看到哪些地方热门,哪些地方冷门。要得到真是的缩略图不一定要得到‘真图’。这个<iframe src="<?=$siteurl?>" width="100%" height="<?=$max_y?>" frameborder="0" marginheight="0"></iframe>可以帮助我们实现这个愿望。在框架中隐藏调用这个页面的。那么这个‘图’就可以当作我们的背景图了。只要把数据绘制在这个图上就可以了哦。基于鼠标点击分析用户行为的系统(PHP)
 
PHP是不能够在一个页面上绘制图形的,它需要在一个图片上才可以的。那你有没有想到PHP是否可以绘制‘透明图’呢? 
 

$im  =  imagecreate  ($max_x,$max_y); 
$background_color  =  ImageColorAllocate($im,  0,255,0);  //  指派一个绿色 
imagecolortransparent($im,$background_color);  //  设置为透明色,若注释掉该行则输出绿色的图
$tc  = imagecolorallocate ($im, 0, 0, 0);

for($i=0;$i<count($file);$i++)
{
 imagesetpixel($im,$x[$i],$y[$i],$tc);
}
imagepng  ($im); 
imagedestroy  ($im);
 

 
上面的代码就是绘制一个透明图层。HTML代码里面有个‘层’的定义,它可以悬浮在某一个网页的上面,左右漂移,以前很多网站广告就是这样做的。这里我们不是用来作广告,而是借用这个思路。

<?
 $max_y= $_GET[max_y];
 $siteurl  = $idr[siteurl];
?>
<style type="text/css">
<!--
#Layer1 {
 position:absolute;
 left:0px;
 right:0px;
 top:0px;
 width:100%;
 height:100%;
 border:#000000 1px dashed;
 z-index:1;
}
body{margin:0px;}
-->
</style>
<div id="Layer1" align="center"><img src="click_stat_img.php?siteid=<?=$siteurl?>"></div>

<div align="center"><iframe src="<?=$siteurl?>" width="100%" height="<?=$max_y?>" frameborder="0" marginheight="0"></iframe></div>

 
click_stat_img.php用来绘制图形。
 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
CSS mask 实现鼠标跟随镂空效果
CSS mask 实现鼠标跟随镂空效果
96 0
CSS实例:鼠标滑过超级链接文字时改变背景颜色
先讲简单的: 通过CSS可以设置超链接在不同时刻的颜色: a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: #00FFFF} /* 已访问的链接 */ a:hover {color: #0...
773 0
MFC实现登录对话框连接access数据库方式
编写一个简单的登录对话框 大家好,我们利用MFC编写一个简单的登录对话框。主窗体是单文档界面。程序运行的时候,先弹出一个简单的登录对话框,输入用户名和密码后主窗体显示出来。 1、开打VC++6.0。
1200 0
+关注
白展糖
十多年的JAVA码农,带着小组向前冲
文章
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载