您的位置：首页 > 其它

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

2012-12-11 16:19 381 查看

你想知道你的网站设计是否合理吗？你确定你的那些按钮和链接是放在该放的位置了吗？你想知道用户到底对页面上的哪些地方感兴趣吗？

没有人能猜出来用户到底喜欢什么，那些“我以为”“我觉得”云云都是扯淡。你有数据吗？

前一阵看到车东的《基于鼠标点击跟踪的用户点击行为分析》，觉得是个很不错的主意，可以跟踪点击行为来分析用户在自己网站上的行为特点，给设计部门一个直观的科学的参考，进而进行有针对性的改进。自己试验了一下，效果非常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是否可以绘制‘透明图’呢？

$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">



</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用来绘制图形。

具体参考这个实例：http://count.bb258.com/clickmap/click_list.php

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航