一般來說，網站分析通過統計點擊流數據及網站產生的其他各類數據，提供各種數據報表來監控網站的運營狀態，為網站的優化和改進提供參考依據。

但網站分析能提供的絕不僅有數據，其中點擊熱圖是對網站分析的一個很好的擴充，目前網上介紹點擊熱圖的文章也比較多，很多網站師用點擊熱圖來評估用戶與網站之間的交互狀況從而改善用戶體驗。

熱力圖是分析網站結構和優化網站效果的重要工具，今天我就簡單介紹幾個點擊熱圖的實現工具及分析熱力圖對平臺優化的價值。

1、點擊熱圖的工具

除了Crazy Egg，網上介紹比較多的點擊熱圖工具還有ClickTable和tealeaf，這些工具都是通過JS來實現的，只要在相應的頁面上嵌入JS代碼，就能在這些工具的網站上查看該頁面的點擊效果圖，實現機制跟Google Analytics較為類似。這些工具一般都需要收費，但會有1個月的免費試用期，有興趣的可以去試試。

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

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

（1）、百度熱力圖

百度熱力圖是百度為了鼓勵站長做好用戶體驗的一種工具，主要可以分析出用戶來到你的網站，點擊了那些地方。

熱力圖同時還能告訴你，頁面的哪些部分吸引了大多數訪客的注意，這對那些對網站分析數據沒有什么經驗的站長或管理員非常有用。

（2）、Heat Map

因為博客當天訪問量不大，所以熱圖的分布不是很明顯，但還是能看出主要的點擊集中在博客最新的文章上面；另外右側的搜索、訂閱和分類目錄模塊也占據了一定的點擊比例。

一般網站的點擊都會聚集在全局導航欄的下面那一塊，并且呈 F 型分布，在需要下拉的頁面部分點擊一般就會劇減（對于需要下拉查看的內容，除非用戶找到了他們需要的信息，否則一般不會過多地進行點擊）。

（3）、Click Map

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

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

（4）、Hover Map

這個圖其實相當與網頁覆蓋圖（Overlay）或點擊密度圖（Click density），Google Analytics上面也提供了類似的功能。

網頁上可點擊的位置會由虛線框圈起來，鼠標放到某個框上面就會顯示該模塊被點擊的次數及點擊轉化率（CTR）；另外如果你為你的網站設定了目標，那么同時也會顯示點擊該模塊的目標轉化率，對于分析網站的重要頁面是個不錯的選擇。

2、點擊熱圖的價值

（1）、通過點擊熱圖發現用戶經常點擊的模塊或聚焦的內容。

（2）、觀察頁面中的哪些模塊具有較高的有效點擊數，用戶會嘗試去點擊哪些模塊。

（3）、應用于A/B測試，比較不同頁面的點擊分布情況。

（4）、用于改進網站交互和用戶體驗。

3、點擊熱圖的缺陷

（1）、網站點擊熱圖雖然提供了一種很直觀的網站分析途徑，但其功能還需完善，因為實現機制一般都是根據頁面的坐標來定位點擊位置，所以不同的分辨率和網站布局方式（居中等）都會導致結果的不準確。

（2）、在使用點擊熱圖時需要記錄用戶每次點擊的行為，所以會對網頁的性能產生影響，導致網頁的加載速度變慢。

（3）、當頁面各元素的位置發生大范圍變動時，點擊熱圖的結果就失效了。

4、針對響應式頁面的自適應熱圖

熱圖必須應付響應式頁面這種新的頁面形式，因為對于這類工具，它們必須不僅僅記錄可點擊（clickable）鏈接的用戶點擊行為，還必須記錄在頁面上用戶所有的點擊（無論這個地方能點還是不能點），因此響應式頁面在不同終端上的布局重構對這類點擊行為的記錄（尤其是對這些點擊行為發生的確切位置）有非常重大的影響。

現代熱圖工具若要忠實表現人們的點擊互動，就必須能夠展現在各類終端上被重構的（響應式）頁面的點擊圖。

上圖顯示了這種熱圖對響應式頁面的適應 不僅僅需要適應各類設備，也需要適應設備的縱向或橫向的旋轉。

5、利用熱圖分析WEB網站或APP的表現

熱圖并非是WEB的專用工具，APP很多時候也需要熱圖來展示用戶交互行為，對APP而言，熱圖同樣是 多快好省 的工具。

不過，值得注意的是，由于APP和WEB有本質上的不同 APP是程序，跟PC上的 .exe 文件差不多，熱圖的用法也有一定的不同。

一般而言，APP由于終端設備的限制，展示的面積比較小，互動元素集中而數量有限，所以熱圖的價值相比WEB較低，分析也比web的熱圖來的簡單直觀得多，所以其實是有利有弊。

另外，有一些內容（信息流）類的APP（網易新聞、今日頭條）之類，因為內容幾乎無時無刻不在發生變化，熱圖并不適用。

但是，對于工具類，電商類APP（尤其是電商APP的產品頁），熱圖仍然具有價值。

游戲APP的熱圖則非常特殊，取決于游戲的類型，但大多數游戲內的熱圖難以制作且意義不大，但游戲的一些操作界面（比如注冊、內購等），與WEB的交互非常類似，熱圖對于優化這些交互也很有意義。