一般來說，網(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)擊熱圖是對(duì)網(wǎng)站分析的一個(gè)很好的擴(kuò)充，目前網(wǎng)上介紹點(diǎn)擊熱圖的文章也比較多，很多網(wǎng)站師用點(diǎn)擊熱圖來評(píng)估用戶與網(wǎng)站之間的交互狀況從而改善用戶體驗(yàn)。

熱力圖是分析網(wǎng)站結(jié)構(gòu)和優(yōu)化網(wǎng)站效果的重要工具，今天我就簡單介紹幾個(gè)點(diǎn)擊熱圖的實(shí)現(xiàn)工具及分析熱力圖對(duì)平臺(tái)優(yōu)化的價(jià)值。

1、點(diǎn)擊熱圖的工具

除了Crazy Egg，網(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ù)器的空間和資源占用都比較高。

前段時(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)行篩選，下面是幾個(gè)熱力圖工具生成的幾張點(diǎn)擊效果圖：

（1）、百度熱力圖

百度熱力圖是百度為了鼓勵(lì)站長做好用戶體驗(yàn)的一種工具，主要可以分析出用戶來到你的網(wǎng)站，點(diǎn)擊了那些地方。

熱力圖同時(shí)還能告訴你，頁面的哪些部分吸引了大多數(shù)訪客的注意，這對(duì)那些對(duì)網(wǎng)站分析數(shù)據(jù)沒有什么經(jīng)驗(yàn)的站長或管理員非常有用。

（2）、Heat Map

因?yàn)椴┛彤?dāng)天訪問量不大，所以熱圖的分布不是很明顯，但還是能看出主要的點(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)擊）。

（3）、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)致了生成圖片顯示上的誤差。

（4）、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ò)的選擇。

2、點(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測(cè)試，比較不同頁面的點(diǎn)擊分布情況。

（4）、用于改進(jìn)網(wǎng)站交互和用戶體驗(yàn)。

3、點(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é)果就失效了。

4、針對(duì)響應(yīng)式頁面的自適應(yīng)熱圖

熱圖必須應(yīng)付響應(yīng)式頁面這種新的頁面形式，因?yàn)閷?duì)于這類工具，它們必須不僅僅記錄可點(diǎn)擊（clickable）鏈接的用戶點(diǎn)擊行為，還必須記錄在頁面上用戶所有的點(diǎn)擊（無論這個(gè)地方能點(diǎn)還是不能點(diǎn)），因此響應(yīng)式頁面在不同終端上的布局重構(gòu)對(duì)這類點(diǎn)擊行為的記錄（尤其是對(duì)這些點(diǎn)擊行為發(fā)生的確切位置）有非常重大的影響。

現(xiàn)代熱圖工具若要忠實(shí)表現(xiàn)人們的點(diǎn)擊互動(dòng)，就必須能夠展現(xiàn)在各類終端上被重構(gòu)的（響應(yīng)式）頁面的點(diǎn)擊圖。

上圖顯示了這種熱圖對(duì)響應(yīng)式頁面的適應(yīng) 不僅僅需要適應(yīng)各類設(shè)備，也需要適應(yīng)設(shè)備的縱向或橫向的旋轉(zhuǎn)。

5、利用熱圖分析WEB網(wǎng)站或APP的表現(xiàn)

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

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

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

另外，有一些內(nèi)容（信息流）類的APP（網(wǎng)易新聞、今日頭條）之類，因?yàn)閮?nèi)容幾乎無時(shí)無刻不在發(fā)生變化，熱圖并不適用。

但是，對(duì)于工具類，電商類APP（尤其是電商APP的產(chǎn)品頁），熱圖仍然具有價(jià)值。

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