網(wǎng)站分析通過統(tǒng)計(jì)點(diǎn)擊流數(shù)據(jù)及網(wǎng)站產(chǎn)生的其他各類數(shù)據(jù)，提供各種數(shù)據(jù)報(bào)表來監(jiān)控網(wǎng)站的運(yùn)營狀態(tài)，為網(wǎng)站的優(yōu)化和改進(jìn)提供參考依據(jù)。但網(wǎng)站分析能提供的絕不僅有數(shù)據(jù)，其中點(diǎn)擊熱圖（Heat Map）是對(duì)網(wǎng)站分析的一個(gè)很好的擴(kuò)充，目前網(wǎng)上介紹點(diǎn)擊熱圖的文章也比較多，很多網(wǎng)站交互設(shè)計(jì)師用點(diǎn)擊熱圖來評(píng)估用戶與網(wǎng)站之間的交互狀況從而改善用戶體驗(yàn)。這里簡單介紹幾個(gè)點(diǎn)擊熱圖的實(shí)現(xiàn)工具以及用我的博客做的點(diǎn)擊熱圖的實(shí)驗(yàn)。

幾款點(diǎn)擊熱圖工具

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

另外有一款開源的工具——ClickHeat，可以下載它的源代碼部署到自己的服務(wù)器上，并在網(wǎng)站頁面中嵌入相應(yīng)的JS代碼來生成點(diǎn)擊熱圖，然后通過調(diào)用相應(yīng)的頁面查看。要部署ClickHeat，服務(wù)器需要支持PHP，同時(shí)因?yàn)辄c(diǎn)擊的日志和所有統(tǒng)計(jì)結(jié)果都保存到了部署的服務(wù)器上，所以對(duì)服務(wù)器的空間和資源占用都比較高。

點(diǎn)擊熱圖應(yīng)用實(shí)例

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

Heat Map

因?yàn)槲业牟┛驮L問量不大，所以熱圖的分布不是很明顯，但還是能看出主要的點(diǎn)擊集中在博客最新的文章上面；另外右側(cè)的搜索、訂閱和分類目錄模塊也占據(jù)了一定的點(diǎn)擊比例。一般網(wǎng)站的點(diǎn)擊都會(huì)聚集在全局導(dǎo)航欄的下面那一塊，并且呈“F”型分布，在需要下拉的頁面部分點(diǎn)擊一般就會(huì)劇減（對(duì)于需要下拉查看的內(nèi)容，除非用戶找到了他們需要的信息，否則一般不會(huì)過多地進(jìn)行點(diǎn)擊）。

Click Map

這張是點(diǎn)擊分布圖，紅叉代表無效的點(diǎn)擊，綠叉代表有效點(diǎn)擊。這個(gè)圖似乎比上面單純的顯示點(diǎn)擊分布或點(diǎn)擊密度更有價(jià)值，因?yàn)樗@示了頁面的有效點(diǎn)擊，從圖上可以看出用戶在瀏覽我的博客時(shí)除了點(diǎn)擊文章標(biāo)題和搜索框外，訂閱按鈕上面也分布了大量的有效點(diǎn)擊數(shù)，這個(gè)對(duì)于博客來說至關(guān)重要，因?yàn)椴┛皖惥W(wǎng)站的一個(gè)重要目標(biāo)就是產(chǎn)生訂閱，所以通過這個(gè)圖可以查看有多少有效點(diǎn)擊轉(zhuǎn)化成了網(wǎng)站目標(biāo)，占總的點(diǎn)擊比例及占總的有效點(diǎn)擊的比例。

另外可以看到圖上的某些有效點(diǎn)擊并非一定落在可點(diǎn)擊的對(duì)象上，正是因?yàn)椴┛蛢?nèi)容更新時(shí)導(dǎo)致頁面元素（標(biāo)題位置、內(nèi)容摘要行數(shù)等）的偏移，而生成的點(diǎn)擊不會(huì)跟隨頁面元素移動(dòng)，導(dǎo)致了生成圖片顯示上的誤差。

Hover Map

這個(gè)圖其實(shí)相當(dāng)與網(wǎng)頁覆蓋圖（Overlay）或點(diǎn)擊密度圖（Click density），Google Analytics上面也提供了類似的功能。網(wǎng)頁上可點(diǎn)擊的位置會(huì)由虛線框圈起來，鼠標(biāo)放到某個(gè)框上面就會(huì)顯示該模塊被點(diǎn)擊的次數(shù)及點(diǎn)擊轉(zhuǎn)化率（CTR）；另外如果你為你的網(wǎng)站設(shè)定了目標(biāo)，那么同時(shí)也會(huì)顯示點(diǎn)擊該模塊的目標(biāo)轉(zhuǎn)化率，對(duì)于分析網(wǎng)站的重要頁面是個(gè)不錯(cuò)的選擇。

點(diǎn)擊熱圖的價(jià)值及缺陷

點(diǎn)擊熱圖的價(jià)值

1. 通過點(diǎn)擊熱圖發(fā)現(xiàn)用戶經(jīng)常點(diǎn)擊的模塊或聚焦的內(nèi)容；
2. 觀察頁面中的哪些模塊具有較高的有效點(diǎn)擊數(shù)，用戶會(huì)嘗試去點(diǎn)擊哪些模塊；
3. 應(yīng)用于A/B測試，比較不同頁面的點(diǎn)擊分布情況；
4. 用于改進(jìn)網(wǎng)站交互和用戶體驗(yàn)。

點(diǎn)擊熱圖的缺陷

1. 網(wǎng)站點(diǎn)擊熱圖雖然提供了一種很直觀的網(wǎng)站分析途徑，但其功能還需完善，因?yàn)閷?shí)現(xiàn)機(jī)制一般都是根據(jù)頁面的坐標(biāo)來定位點(diǎn)擊位置，所以不同的分辨率和網(wǎng)站布局方式（居中等）都會(huì)導(dǎo)致結(jié)果的不準(zhǔn)確；
2. 在使用點(diǎn)擊熱圖時(shí)需要記錄用戶每次點(diǎn)擊的行為，所以會(huì)對(duì)網(wǎng)頁的性能產(chǎn)生影響，導(dǎo)致網(wǎng)頁的加載速度變慢；
3. 當(dāng)頁面各元素的位置發(fā)生大范圍變動(dòng)時(shí)，點(diǎn)擊熱圖的結(jié)果就失效了。

最后順便提一下，我的博客之前的一篇文章——網(wǎng)站數(shù)據(jù)分析的基本流程中介紹了DMAIC模型，當(dāng)時(shí)我是在查PDCA戴明環(huán)的相關(guān)資料的時(shí)候不經(jīng)意間發(fā)現(xiàn)的，感覺很適用于網(wǎng)站分析的流程。前幾天在翻Avinash Kaushik的《Web Analytics》，發(fā)現(xiàn)書中也介紹了DMAIC模型，所以感覺DMAIC確實(shí)是梳理網(wǎng)站分析流程的一個(gè)不錯(cuò)的選擇。

? 本文采用?BY-NC-SA 協(xié)議，轉(zhuǎn)載請(qǐng)注明來源：網(wǎng)站數(shù)據(jù)分析 ??《網(wǎng)站點(diǎn)擊熱圖（Heat Map）》