Hotjar 網站熱點地圖-分析網頁中使用者最常點擊區域

內容目錄

Toggle

歡迎回到鵠學苑 — WordPress 網頁設計超詳細攻略 – Hotjar 網站 熱點地圖 – 分析網頁中使用者最常點擊區域，網站架構中資訊區域安排與版面設計，是出於網站前端( Front End )工程師所規畫，而其來源可能來自於網站主題套版、相似類型網站內容、或者是前端工程師根據過去網站架設案例的創作經驗而做出安排，這樣的網站設計方式沒有絕對的對與錯，只有是否合理並有利於增進使用者體驗，那麼有沒有一種方法可以對藉由網站訪客回饋來得知網站內部資訊區塊的安排方式是否合理呢？
今天要介紹的 Hotjar 網站熱點地圖，就具備有這樣的功能，註冊流程請參考這篇文章：https://www.design-hu.com.tw/wordpress/wordpress-tools/hotjar.html，在這篇教學中會告訴大家如何在 Hotjar 中 Heatmaps 的選項中做步驟設定，在 Heatmaps 可以指定想要分析的網站頁面，結果中會顯示出網站訪客停留時間最久或最多點擊次數的網站區域，在得到分析結果後就可以針對網站內容做更有效的資訊區調整，比如說將比較重要的網站資訊放置在停留時間最久位置，或者將幾乎沒有人造訪的網站區域做文案內容加強修正或者直接刪除，都可以幫助網站更加精進，吸引更多網站訪客停留。接下來跟著鵠學院的腳步，讓我們開始學習吧！
(小提醒：鵠學苑的所有教學均是以 Apple Mac OS X 系統做步驟示範！)

Hotjar 網站熱點地圖
https://www.design-hu.com.tw/wordpress/wordpress-tools/hotjar.htm/

Hotjar網址
https://insights.hotjar.com/

Hotjar 網站熱點地圖設定方式

第一步：在 Hotjar網站 控制台中右方項目欄中點擊 Heatmaps，進入到設定畫面。

第二步：下進入後點擊上方＋New Heatmap 按鈕，接者會有四步驟的設定。

1.為這個熱點地圖命名，通常是以分析的網頁名稱做標示。

第三步：2.選擇方案，如果要使用免費版，請選擇 BASIC 的方案，會紀錄1000個瀏覽人次的網站行為，想要獲取更多的資料就必須升級到付費版，由個人是需求取捨。

第四步：決定分析頁面，visit a specific page 是分析特定頁面，Simple URL match 是直接輸入網站或網頁的固定網址即可，如果說想要分析帶有參數結尾的特定頁面，就要選擇 Exact URL match( 精確網址媒合 )。

另外一個選項是 Visit one of mulitiple similar pages，也就是紀錄一個或多個的單一網頁使用者熱點分佈，下拉式選單中可以選擇網址篩選條件，比如網址開頭的名稱、網址包含的字詞、網址完全等於等等，比如説筆者想要分析鵠學苑所有的文章頁面，就可以選擇 URL contains https://www.design-hu.com.tw/wordpress/ ，意思就是在wordpress這個目錄下的所有網站頁面的使用者分析資料都會被抓取。

第五步：到這一步驟就表示已經全部完成了，點擊 Create Heatmap 的按鈕即可。

Hotjar 網站熱點地圖結果頁面說明

第一步：再次進入到熱點地圖的頁面，在剛剛加入的 home 選項中點擊 View Heatmap。

在熱點地圖的介面中可以看到右上角有螢幕的標示，數字11是表示紀錄了11個網站訪客常用的選項。

點擊後會跳出選擇要顯示哪些裝置使用者的網站熱圖。

第二步：筆者以桌上型電腦來做示意，首先看到下圖中紅色方框標示處，這個畫面是 Click ( 點擊 )的分析，可以看到網站的上方接近 Logo 的部分有紅色漸層向外擴散的熱點，也就是最多瀏覽者點擊的位置，對鵠學苑網站而言就是在網站選單的 WordPress 教學這個項目最多人點擊。

第三步：接者是 Move ，使用者在網站頁面中的移動軌跡，由畫面中可以看出大部分的使用者都是集中在選擇網站導覽選單。

第四步：Scroll 可以分析的是使用者在網站中哪一個區塊停留最久，由下圖可以看到鵠學苑在首頁進入畫面的最上方是訪客停留最久的位置。

結語：

網站建置的過程固然重要，但建置完成後的資料分析與後續維護管理也是不可輕忽的細節，一個網站是否有效，還是就擺在那裡每天賭運氣看會有多少人搜尋造訪，這其中的差別相信不需要筆者解釋了。因此身為網站管理者能做的就是透過像這篇教學所介紹的網站分析工具，以數據統計的方式來改進網站使用者體驗，才能提高網路行銷的效率，hotjar 提供的方式有很多種，後續鵠學苑會不間斷的針對其分析項目做教學文章的建立，因此，不要忘記持續關注鵠學苑的最新文章，想學習超詳細的WordPress攻略嗎？？來鵠學院就對了！我們下次的教學見～