2017網(wǎng)站熱點(diǎn)圖的實(shí)現(xiàn)形式和功能特點(diǎn)
熱點(diǎn)圖是通過使用不同的標(biāo)志將圖或頁面上的區(qū)域按照受關(guān)注程度的不同加以標(biāo)注并呈現(xiàn)的一種分析手段，熱點(diǎn)圖將用戶的每一次鼠標(biāo)點(diǎn)擊、滾動、視野停留都轉(zhuǎn)作了數(shù)據(jù)化的色彩繪制出來，您不但可以一目了然用戶偏好，更方便和設(shè)計(jì)師溝通，優(yōu)化網(wǎng)頁設(shè)計(jì)。
熱點(diǎn)圖是一款好用的用戶行為分析工具，通過用戶在頁面上的瀏覽軌跡，點(diǎn)擊熱區(qū)來找到網(wǎng)站內(nèi)對用戶有價(jià)值的信息，并且優(yōu)化網(wǎng)站死角來更加豐富和滿足用戶體驗(yàn)。
一、熱點(diǎn)圖的兩種實(shí)現(xiàn)形式
目前熱點(diǎn)圖有兩種主要的實(shí)現(xiàn)形式：
點(diǎn)擊熱點(diǎn)圖(clickmap)：基于鼠標(biāo)的點(diǎn)擊行為采集、分析、呈現(xiàn)，crazy egg點(diǎn)擊熱點(diǎn)圖的佼佼者。
注意力熱點(diǎn)圖(Attation heatmap)：不需要采集分析鼠標(biāo)行為數(shù)據(jù)，而是使用綜合多種神經(jīng)學(xué)相關(guān)的算法來對人的視覺注意力進(jìn)行模擬而生成以吸引注意力程度不同的熱點(diǎn)圖，
1、點(diǎn)擊熱點(diǎn)圖
點(diǎn)擊熱點(diǎn)圖的生成過程我們可以簡單劃分成三個(gè)部分：
(1)、鼠標(biāo)點(diǎn)擊數(shù)據(jù)采集與上傳
第一部分的實(shí)現(xiàn)需要在企業(yè)網(wǎng)站的產(chǎn)品展示頁面埋設(shè)相應(yīng)javascript代碼，代碼核心思想是利用鼠標(biāo)點(diǎn)擊時(shí)會觸發(fā)onMouseDown事件，然后在事件中添加腳本捕捉鼠標(biāo)點(diǎn)擊的具體位置坐標(biāo)、相應(yīng)鏈接以及屏幕分辨率等相關(guān)數(shù)據(jù)，然后通過httpRequest對象將數(shù)據(jù)發(fā)送到訪客鼠標(biāo)點(diǎn)擊數(shù)據(jù)采集服務(wù)器保存，數(shù)據(jù)采集服務(wù)器會將數(shù)據(jù)以某種固定格式保存，方便數(shù)據(jù)分析服務(wù)器提取和分析這些數(shù)據(jù)。
(2)、數(shù)據(jù)的分析建模生成點(diǎn)擊熱點(diǎn)圖
第二部分是主要部分，當(dāng)網(wǎng)站決策者需要查看某頁面的熱點(diǎn)圖時(shí)，觸發(fā)系統(tǒng)向鼠標(biāo)點(diǎn)擊數(shù)據(jù)分析服務(wù)器發(fā)出生成熱點(diǎn)圖請求，分析服務(wù)器通過在獲得相應(yīng)的訪客鼠標(biāo)點(diǎn)擊數(shù)據(jù)后進(jìn)行匯總分析，形成該請求頁面的點(diǎn)擊數(shù)據(jù)集，在數(shù)據(jù)集基礎(chǔ)上進(jìn)行圖形建模，最終形成產(chǎn)品關(guān)注度熱點(diǎn)圖，主要的步驟解釋如下：
a、解析鼠標(biāo)點(diǎn)擊數(shù)據(jù)記錄：我們在采集鼠標(biāo)點(diǎn)擊數(shù)據(jù)時(shí)會按照一種固定的預(yù)先定義好的格式進(jìn)行記錄，那么解析的過程遵守同樣的規(guī)則進(jìn)行解析，最終還原各數(shù)據(jù)項(xiàng)，為建模做準(zhǔn)備。
b、還原鼠標(biāo)點(diǎn)擊位置：首先生成空白熱點(diǎn)圖，然后在獲得的點(diǎn)擊數(shù)據(jù)基礎(chǔ)上進(jìn)行點(diǎn)擊位置等數(shù)據(jù)還原
c、點(diǎn)擊數(shù)據(jù)集建模：使用預(yù)先設(shè)計(jì)好的單位點(diǎn)擊效果圖來標(biāo)識每個(gè)點(diǎn)擊行為，直到完成整個(gè)點(diǎn)擊數(shù)據(jù)集的建模
d、生成熱點(diǎn)圖：將已經(jīng)完成的點(diǎn)擊數(shù)據(jù)建模圖進(jìn)行格式轉(zhuǎn)換，轉(zhuǎn)換后的圖形將根據(jù)點(diǎn)擊的密集程度分成不同的顏色區(qū)域，點(diǎn)擊越密集的地方顏色將越鮮艷，相反點(diǎn)擊稀疏的地方顏色相應(yīng)的要淡一些，最后轉(zhuǎn)換后的圖片需要進(jìn)行透明化的處理，這個(gè)主要為為了后續(xù)展現(xiàn)過程服務(wù)，我們最終是希望將這個(gè)生成的熱點(diǎn)圖直接置于產(chǎn)品展示位置之上，透明的效果可以非常清楚的看到背后對應(yīng)的產(chǎn)品信息
(3)、熱點(diǎn)圖的呈現(xiàn)
第三部分主要解決如何將服務(wù)器端生成的.點(diǎn)擊熱點(diǎn)圖展示給網(wǎng)站決策者，這個(gè)過程是比較簡單的，可以結(jié)合新建層以及圖片透明化處理等手段來完成，這一步好了我們就可以得到大致效果圖，如下：
當(dāng)然上圖是使用顏色的深淺來表示受關(guān)注的強(qiáng)弱，也可以使用點(diǎn)的密集程度以及百分比來進(jìn)行標(biāo)注，這方面crazy egg做的非常不錯，大家可以去感受下。
2、注意力熱點(diǎn)圖
注意力熱點(diǎn)圖是通過模擬人類看見物體前幾秒的視覺效果，同時(shí)使用一種預(yù)測一個(gè)真人最可能查看物體的方式的算法生成熱點(diǎn)圖，這個(gè)算法綜合了幾種神經(jīng)科學(xué)研究理論，包括特征整合理論、顯著性研究、視覺注意理論，眼動追蹤, 人類感知和認(rèn)知。
使用注意力熱點(diǎn)圖，設(shè)計(jì)師、廣告主、創(chuàng)作者可以通過分析圖像吸引注意力的強(qiáng)弱來對這幅圖像的效果進(jìn)行預(yù)先測試，當(dāng)然也可以用于跟蹤注意力轉(zhuǎn)移路線，視覺熱點(diǎn)圖一般由以下因素組成：
(1)、熱區(qū)：最感興趣的區(qū)域。
(2)、熱點(diǎn)排序：下一個(gè)感興趣的點(diǎn)以及何時(shí)興趣轉(zhuǎn)移到其上(毫秒級)。
(3)、視覺串聯(lián)：眼睛在熱點(diǎn)間運(yùn)動情況。
(4)、被忽略的區(qū)域。
視覺關(guān)注度熱點(diǎn)圖不僅可以對圖片進(jìn)行熱點(diǎn)和關(guān)注度分析，還可以對視頻進(jìn)行分析，這個(gè)是點(diǎn)擊熱點(diǎn)圖無法做到的，但對于分析的準(zhǔn)確性點(diǎn)擊熱點(diǎn)圖的準(zhǔn)確性要高于視覺關(guān)注度熱點(diǎn)。
二、熱點(diǎn)圖的功能特點(diǎn)
從線下到線上，從單一到多樣，從展示到交互，從緩慢起步到爆炸發(fā)展。整個(gè)人類文明所獲得的全部數(shù)據(jù)中，有90%是在過去三年內(nèi)所產(chǎn)生，這就是我們正在并且將持續(xù)依賴的線上世界，而面對我們視線不能觸達(dá)的遙遠(yuǎn)彼端，我們需要一個(gè)助手來幫助自己收集、清洗和整理數(shù)據(jù)。
將用戶的一次次鼠標(biāo)點(diǎn)擊還原，變成曲線、報(bào)告、可視化熱圖等等多種多樣便于我們理解的信息，讓我們看到用戶如何在網(wǎng)站中互動，在數(shù)據(jù)中找到問題、獲取機(jī)會，最大化優(yōu)化用戶體驗(yàn)、萃取推廣價(jià)值，像傳統(tǒng)服務(wù)那樣能夠面對面地把握用戶的心思并作出正確的引導(dǎo)，不，我們甚至可以借助更聰明的數(shù)據(jù)做得更好。
在這個(gè)新的數(shù)據(jù)時(shí)代，使用與之相匹配的工作方法，讓每一次訪問、每一次頁面瀏覽、每一次鼠標(biāo)點(diǎn)擊產(chǎn)生非凡的價(jià)值，進(jìn)行熱圖展示，真實(shí)反映用戶視野。
1、可視化的用戶行為
您討厭一邊拿著受訪列表一邊往頁面元素上對照是不是?我們也討厭這樣。所以我們通過熱圖工具令用戶的每一次鼠標(biāo)點(diǎn)擊、滾動、視野停留都轉(zhuǎn)作了數(shù)據(jù)化的色彩繪制出來。現(xiàn)在您不但可以一目了然看到用戶喜歡什么?更可以方便地和設(shè)計(jì)部門的同事交流。
熱點(diǎn)圖可以直觀清楚地看到頁面上每一個(gè)區(qū)域的訪客興趣焦點(diǎn)，無須報(bào)告數(shù)據(jù)分析，圖形化展現(xiàn)，無需任何頁面分析經(jīng)驗(yàn)。
2、完美支持細(xì)分和對比
只是將所有的點(diǎn)擊堆放在一起還遠(yuǎn)遠(yuǎn)不夠，細(xì)分永遠(yuǎn)能夠告訴我們更多，新訪客和回訪客的行為意向是不同的，為什么有些用戶能夠完成注冊而有些不能?細(xì)分可以給我們更多啟發(fā)。
3、有條有理的點(diǎn)擊分布圖
只看熱點(diǎn)和色彩還不夠，需要點(diǎn)擊量的數(shù)值?不妨試試點(diǎn)擊分布圖，它能夠整整齊齊地為您顯示一個(gè)元素上的點(diǎn)擊量數(shù)值。無論是鏈接、按鈕還是圖片、板塊，連同出站鏈接、搜索框這樣傳統(tǒng)監(jiān)測無法直接統(tǒng)計(jì)的元素也可以包含在內(nèi)，甚至連平時(shí)隱藏鼠標(biāo)懸浮才會展開的元素也能捕捉到!
4、標(biāo)記推廣營銷
準(zhǔn)備投放廣告?在社交網(wǎng)絡(luò)上發(fā)布了消息并且附上了通往網(wǎng)站的鏈接?準(zhǔn)備進(jìn)行郵件營銷?推薦您全部使用網(wǎng)址構(gòu)建器給廣告等鏈接指向的著陸頁面貼上標(biāo)記。經(jīng)過了特殊的標(biāo)記，這些和自然流量不同的入站來源能夠被特別區(qū)分出來，了解用戶的質(zhì)量和訪問偏好，更進(jìn)一步幫助您優(yōu)化廣告的投放策略。
5、轉(zhuǎn)化漏斗
通過將您有意引導(dǎo)用戶依次訪問的頁面流程設(shè)置為，可以通過漏斗中積累的數(shù)據(jù)查看有多少用戶按照您預(yù)期的引導(dǎo)不斷前行，有多少用戶中途放棄離開，找到漏斗中的泄露點(diǎn)迅速改善，挽留更多的用戶順利完成轉(zhuǎn)化(具體可查看馬海祥博客《怎么用熱力圖分析網(wǎng)頁》的相關(guān)介紹)!
6、快速細(xì)分
拒絕繁瑣的細(xì)分操作成為尋求數(shù)據(jù)意義的障礙，定位細(xì)分目標(biāo)，只需要幾次點(diǎn)擊。直觀地尋找細(xì)分對象，一邊閱讀數(shù)據(jù)一邊快速鉆取發(fā)現(xiàn)機(jī)會和問題�？焖偌�(xì)分不僅快速易用，還貫穿著整個(gè)報(bào)告體系，找到一個(gè)剖析點(diǎn)，可以帶著它穿行全部報(bào)告甚至熱圖，直到您獲取到最終的信息。
7、轉(zhuǎn)化率與轉(zhuǎn)化價(jià)值
通過轉(zhuǎn)化，讓重要的用戶事件變得可以度量，我們不僅可以記錄對網(wǎng)站有益的轉(zhuǎn)化，如注冊、購買、索取資料，還建議您對意味著網(wǎng)站損失的用戶行為同樣予以衡量，如注銷賬戶、取消訂閱、取消訂單等等。更加公正全面地衡量渠道和內(nèi)容表現(xiàn)，當(dāng)您發(fā)現(xiàn)一個(gè)渠道為您帶來了大量用戶訂單，但是用戶在完成某項(xiàng)行為后又大量取消訂單，您便需要進(jìn)一步考慮推廣策略了。
【2017網(wǎng)站熱點(diǎn)圖的實(shí)現(xiàn)形式和功能特點(diǎn)】相關(guān)文章：
2.Java語言的特點(diǎn)和實(shí)現(xiàn)機(jī)制
5.數(shù)字調(diào)音臺的功能和特點(diǎn)