<wbr><wbr></wbr><font face="宋體">你想知道你的網站設計是否合理嗎？你確定你的那些按鈕和鏈接是放在該放的位置了嗎？你想知道用戶到底對頁面上的哪些地方感興趣嗎？<br> 沒有人能猜出來用戶到底喜歡什么，那些“我以為”“我覺得”云云都是扯淡。你有數據嗎？<br> 前一陣看到車東的《基于鼠標點擊跟蹤的用戶點擊行為分析》，覺得是個很不錯的主意，可以跟蹤點擊行為來分析用戶在自己網站上的行為特點，給設計部門一個直觀的科學的參考，進而進行有針對性的改進。自己試驗了一下，效果非常very相當的goood。<br> 以下是我試驗的具體過程：<br> 首先在需要跟蹤用戶點擊行為的頁面加入下面的javascript腳本（注意，下面的腳本是在車東的腳本基礎上做的改進，使之兼容Firefox和IE）：</font></wbr>
<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>
<wbr><wbr></wbr></wbr>
經過本人在IE以及MAXTHON下的測試，document.documentElement.scrollLeft和document.documentElement.scrollTop返回值都是0，不知道原著是否有錯誤。全部改成document.body.scrollLeft和document.body.scrollTop就可以了！
<wbr><wbr></wbr></wbr>
然后在<body>標簽中加入onmousedown=”clickStat(event);”方法。這樣做也是為了瀏覽器兼容（tmd，這些爛標準啥時候能統一）。
在服務端用click_stats.php來接收傳遞過來的參數，并記錄到指定的文件中。如果對多個頁面進行統計，還可以在參數中增加頁面信息，在服務器端根據頁面參數把數據保存到不同的文件中。
接收到的參數包括客戶端的屏幕分辨率和點擊時的具體坐標，可以根據自己的需要對采集到的數據進行分析。例如，可以確定頁面上每個按鈕或鏈接的具體坐標范圍，來統計每個按鈕或鏈接的點擊次數以及占所有點擊次數的百分比。
為了更加直觀，我把完整的頁面截了一個圖作為背景，然后用gd在圖上把采集到的數據畫成一個個的點，這樣就可以清晰的看到頁面的點擊情況，被點擊次數多的按鈕或鏈接，點分布的非常密集，反之就非常稀疏，或者根本沒有。直觀的反映了受歡迎的程度。
還有需要注意的是，在進行分析的時候一定要考慮到分辨率的問題，例如如果用來畫點的背景截圖是1024的，而客戶端的分辨率是1280的，在畫這個坐標點的時候就要在橫坐標上減去128。
<wbr><wbr></wbr></wbr>
128象素是這樣計算出來的，(($ScreenWidth-1024)/2)，我們以1024做標準寬度，其他比1024大的顯示器分辨率要相應減去一部分數值。比1024小的分辨率要加上這個數值。
|
if( $_GET[width] > "1024") $_GET[x] =<wbr><wbr></wbr> $_GET[x] - ( ( $_GET[width] - 1024 ) % 2 );<br> elseif( $_GET[width] < "1024") $_GET[x] =<wbr><wbr></wbr> $_GET[x] + ( ( 1024 - $_GET[width] ) % 2 );</wbr></wbr>
|
看到統計結果，你就會發現很多地方和你想象的很不一樣。沒有為什么，真實的數據才能真實的反映用戶的行為，而我們作為網站的設計和實現者，完全不能代表普通用戶，往往一廂情愿的得到錯誤的結論。
<wbr><wbr></wbr></wbr>
由于要做一個比較通用的系統，總不能每次都要截圖吧。所以下面給出一些解決方法。
<wbr><wbr></wbr></wbr>
關于網頁縮略圖，只有在一個網頁的縮略圖上成功的繪制出用戶鼠標所點擊過的點，才能看到哪些地方熱門，哪些地方冷門。要得到真是的縮略圖不一定要得到‘真圖’。這個<iframe src="<?=$siteurl?>" width="100%" height="<?=$max_y?>" frameborder="0" marginheight="0"></iframe>可以幫助我們實現這個愿望。在框架中隱藏調用這個頁面的。那么這個‘圖’就可以當作我們的背景圖了。只要把數據繪制在這個圖上就可以了哦。
<wbr><wbr></wbr></wbr>
PHP是不能夠在一個頁面上繪制圖形的，它需要在一個圖片上才可以的。那你有沒有想到PHP是否可以繪制‘透明圖’呢？<wbr><wbr></wbr></wbr>
<wbr><wbr></wbr></wbr>
|
$im<wbr><wbr></wbr> =<wbr><wbr></wbr> imagecreate<wbr><wbr></wbr> ($max_x,$max_y);<wbr><wbr></wbr><br> $background_color<wbr><wbr></wbr> =<wbr><wbr></wbr> ImageColorAllocate($im,<wbr><wbr></wbr> 0,255,0);<wbr><wbr></wbr> //<wbr><wbr></wbr> 指派一個綠色<wbr><wbr></wbr><br> imagecolortransparent($im,$background_color);<wbr><wbr></wbr> //<wbr><wbr></wbr> 設置為透明色，若注釋掉該行則輸出綠色的圖<br> $tc<wbr><wbr></wbr> = imagecolorallocate ($im, 0, 0, 0);</wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>
for($i=0;$i<count($file);$i++)
{
<wbr><wbr></wbr>imagesetpixel($im,$x[$i],$y[$i],$tc);<br> }<br> imagepng<wbr><wbr></wbr> ($im);<wbr><wbr></wbr><br> imagedestroy<wbr><wbr></wbr> ($im);</wbr></wbr></wbr></wbr><wbr><wbr></wbr></wbr>
|
<wbr><wbr></wbr></wbr>
上面的代碼就是繪制一個透明圖層。HTML代碼里面有個‘層’的定義，它可以懸浮在某一個網頁的上面，左右漂移，以前很多網站廣告就是這樣做的。這里我們不是用來作廣告，而是借用這個思路。
|
<?
<wbr><wbr></wbr>$max_y= $_GET[max_y];<br><wbr><wbr></wbr>$siteurl<wbr><wbr></wbr> = $idr[siteurl];<br> ?><br> <style type="text/css"><br> <!--<br> #Layer1 {<br><wbr><wbr></wbr>position:absolute;<br><wbr><wbr></wbr>left:0px;<br><wbr><wbr></wbr>right:0px;<br><wbr><wbr></wbr>top:0px;<br><wbr><wbr></wbr>width:100%;<br><wbr><wbr></wbr>height:100%;<br><wbr><wbr></wbr>border:#000000 1px dashed;<br><wbr><wbr></wbr>z-index:1;<br> }<br> body{margin:0px;}<br> --><br> </style><br> <div id="Layer1" align="center"><img src="click_stat_img.php?siteid=<?=$siteurl?>"></div><br></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>
<div align="center"><iframe src="<?=$siteurl?>" width="100%" height="<?=$max_y?>" frameborder="0" marginheight="0"></iframe></div>
|
<wbr><wbr></wbr></wbr>
click_stat_img.php
用來繪制圖形。
<wbr><wbr></wbr></wbr>