網網站擊熱圖（Heat Map）

網站分析通過統計點選流資料及網站產生的其他各類資料，提供各種HTTP://www.aliyun.com/zixun/aggregation/9282.html">資料包表來監控網站的運營狀態， 為網站的優化和改進提供參考依據。 但網站分析能提供的絕不僅有資料，其中點擊熱圖（Heat Map）是對網站分析的一個很好的擴充，目前網上介紹點擊熱圖的文章也比較多，很多網站交互設計師用點擊熱圖來評估使用者與網站之間的交互狀況從而改善使用者體驗。 這裡簡單介紹幾個點擊熱圖的實現工具以及用我的博客做的點擊熱圖的實驗。

Sidney的博客中很早以前就介紹過一款點擊熱圖的分析工具——Crazy Egg令人驚訝的優秀網站分析工具，文章是由Tenly寫的。 另外網上介紹比較多的點擊熱圖工具還有ClickTable和tealeaf，這些工具都是通過JS來實現的，只要在相應的頁面上嵌入JS代碼，就能在這些工具的網站上查看該頁面的點擊效果圖，實現機制跟Google Analytics較為類似。 這些工具一般都需要收費，但會有1個月的免費試用期，有興趣的可以去試試。

另外有一款開源的工具——ClickHeat，可以下載它的原始程式碼部署到自己的伺服器上，並在網站頁面中嵌入相應的JS代碼來生成點擊熱圖，然後通過調用相應的頁面查看。 要部署ClickHeat，伺服器需要支援PHP，同時因為點擊的日誌和所有統計結果都保存到了部署的伺服器上，所以對伺服器的空間和資源佔用都比較高。

前段時間用我的博客做了下網網站擊熱圖的試用實驗，我用的是Click Density，跟ClickTable和Crazy Egg類似，也是通過嵌入JS的方法來實現的，在結果的輸出頁面可以選擇點擊的時間段、 瀏覽器類型等條件對結果進行篩選，下面的生成的幾張點擊效果圖：

因為我的博客訪問量不大，所以熱圖的分佈不是很明顯，但還是能看出主要的點擊集中在博客最新的文章上面；另外右側的搜索、訂閱和分類目錄模組也佔據了一定的點擊比例。 一般網站的點擊都會聚集在全域巡覽列的下面那一塊，並且呈「F」型分佈，在需要下拉的頁面部分點擊一般就會劇減（對於需要下拉查看的內容，除非使用者找到了他們需要的資訊，否則一般不會過多地進行點擊）。

這張是點擊分布圖，紅叉代表不正確點擊，綠叉代表有效點擊。 這個圖似乎比上面單純的顯示點擊分佈或點擊密度更有價值，因為它顯示了頁面的有效點擊，從圖上可以看出使用者在流覽我的博客時除了點擊文章標題和搜索框外，訂閱按鈕上面也分佈了大量的有效點擊數，這個對於博客來說至關重要， 因為博客類網站的一個重要目標就是產生訂閱，所以通過這個圖可以查看有多少有效點擊轉化成了網站目標，占總的點擊比例及占總的有效點擊的比例。

另外可以看到圖上的某些有效點擊並非一定落在可點擊的物件上，正是因為博客內容更新時導致頁面元素（標題位置、內容摘要行數等）的偏移，而生成的點擊不會跟隨頁面元素移動，導致了生成圖片顯示上的誤差。

這個圖其實相當與網頁覆蓋圖（Overlay）或點擊密度圖（Click density），Google Analytics上面也提供了類似的功能。 網頁上可點擊的位置會由虛線框圈起來，滑鼠放到某個框上面就會顯示該模組被點擊的次數及點擊轉化率（CTR）；另外如果你為你的網站設定了目標，那麼同時也會顯示點擊該模組的目標轉化率，對於分析網站的重要頁面是個不錯的選擇。

最後順便提一下，我的博客之前的一篇文章——網站資料分析的基本流程仲介紹了DMAIC模型，當時我是在查PDCA戴明環的相關資料的時候不經意間發現的，感覺很適用于網站分析的流程。 前幾天在翻Avinash Kaushik的《Web Analytics》，發現書中也介紹了DMAIC模型，所以感覺DMAIC確實是梳理網站分析流程的一個不錯的選擇。

» 本文采用 BY-NC-SA 協定，轉載請注明來源：網站資料分析 » 《網網站擊熱圖（Heat Map）》