Hotjar 是一個網頁的追蹤工具,用途跟 Google Analytics 類似,用來記錄顧客在你的網站究竟瀏覽了哪些頁面、點擊了哪些按鈕、目光焦點都在什麼地方,但 Hotjar 的呈現方式相當直覺,看圖形,不用看報表,設定的步驟也比較簡單,非常適合初學者用來觀察自己的網站。

下圖是一張 Hotjar 後台的實際截圖,這是其中一個功能 Heatmap(熱點圖),透過顏色來表示顧客瀏覽的熱門區與冷門區,紅色表示 Hot,藍紫色表示 Cold,一眼就可以看出使用者關注的焦點都在哪。

藉由 Heatmap 進一步推敲:
「商品A的關注程度很高,但商品B賣出的量卻比較多,是不是價格太高?」
「某些區域停留的時間很少,或是沒被拜訪過,是不是文案/照片不夠吸引人?」
然後回來修改版面,驗證自己的猜測對不對,持續優化,提高轉換率。

(圖片來源:Hotjar)

再來我們一步一步來說明如何設定:

Step 1: 先到 https://hotjar.com 網站註冊會員

Step 2: 註冊後,進到 Site Dashboard,可以看到 Site ID,將 ID 複製起來

 

Step 3: 回到 TinyBot 後台 > 系統設定 > 行銷代碼,將 ID 貼到 Hotjar ID 那個欄位,並且按右上角的「更新」鈕

 

Step 4: 回到 Hotjar 後台,選擇左側 Heatmaps,按 New Heatmap 來新增

 

Step 5: 輸入資料

  1. Name: 商店首頁
  2. Number of Pageviews: 選擇 1000 (Basic方案只能記錄 1000 個瀏覽人次)
  3. Page Targeting: 選擇 Visit a specific page
    Enter Page Url: 這邊要輸入您自己的商店網址

最後按下 Create Heatmap

 

Step 6: 剛新增的 Heatmap 還沒有資料,沒辦法觀看,我們要自己先用「電腦」以及「手機」,開啟自己的商店,讓 Hotjar 產生網頁抓圖 (snapshot) 以及第一筆資料

 

Step 7: 資料產生後,就可以點選 View Heatmap 觀看資料

 

Step8: 觀察顧客點擊區域。
RWD 的網站設計,在不同裝置上版面呈現方式也不同,所以 Hotjar 在電腦與手機也是分開來計算的,可以看到顧客點擊過的區域會被標示

 

Step 9: 觀察頁面瀏覽的百分比。
倘若大部分的使用者都只瀏覽了50%,那就該思考一下是不是版面過長,資訊量太多?或是前半段內容不吸引人,以至於瀏覽到一半就跳離開了。
紅色區域表示每一個進來網站的顧客都會瀏覽到,往下黃色區域約 75% 的人會看到這邊,綠色區域約 50% (一半的人) 會看到這邊。

 

Step 10: 電腦版面額外多記錄一種資料:滑鼠移動軌跡
因為人在電腦上瀏覽網頁的習慣是滑鼠會跟著移動,所以這項數據可以我們了解 “非按鈕點擊區"(如文字、圖片),顧客是把目光放在哪邊。舉例來說:
「某款包包的圖片,顧客是關注背帶、logo、還是 model 本人?」
「並排陳列的商品,究竟顧客都關注哪一款?」

從下面的圖片解讀,在四項產品中,顧客對於中間兩樣比較有興趣。

 

以上就是 Hotjar 的 Heatmap 基本介紹。

Hotjar 用直覺的方式來呈現顧客如何瀏覽我們網站,透過這些紀錄,我們更清楚顧客對什麼商品有興趣,在意的是特色還是價格,然後回來調整版面/價格,調整後再次觀察,透過這樣的正向循環來提高轉單率/客單價。

下一篇我們將繼續探討 Hotjar 的另一項工具:Recording 是如何忠實呈現顧客行為