ORON
回科技觀點
轉換優化10 分鐘閱讀

網站熱點圖:看出訪客在官網哪一步放棄

GA4 只說哪一頁跳離率高,熱點圖與錄影回放補上為什麼。三種圖怎麼讀、錄影怎麼篩、隱私怎麼設定。

網站熱點圖:看出訪客在官網哪一步放棄

多數中小企業的官網數據,停在這個地方:GA4 告訴你產品頁上個月有 2,400 次瀏覽、跳出率 78%、平均停留 41 秒。數字很完整,但沒有一個數字回答得了老闆真正想問的那句話——「那他們到底卡在哪?」

流量分析工具擅長統計「發生了什麼」,不擅長描述「怎麼發生的」。要補上後面那一段,靠的是另一類工具:熱點圖與工作階段錄影回放。它們不產生排名、不帶來流量,但能讓你第一次用訪客的視角,看完整段從進站到離開的過程。

沙地上佈滿密密麻麻深淺不一的腳印,有些路徑清晰延伸、有些走到一半就中斷,象徵訪客在官網上留下的行為軌跡與停下的位置

Photo by CHUTTERSNAP on Unsplash

熱點圖不是一張圖,是三張

很多人聽到「熱點圖」會直接想到那種紅橘漸層的圖,其實常用的至少有三種,各自回答不同的問題,混著看反而會下錯結論。

點擊圖記錄訪客在頁面上點了哪裡。最有價值的往往不是「哪個按鈕被點最多」,而是那些被點了卻沒有反應的位置:一張沒有連結的產品圖、一段看起來像按鈕的粗體色塊、一個以為可以展開的標題。訪客的手指已經告訴你他想做什麼,只是你的網站沒接住。

捲動深度圖顯示有多少比例的人看到了頁面的第幾段。這張圖通常最刺眼:精心寫的服務說明在第三屏,但只有兩成的人捲到那裡;或是某一段之後曲線斷崖式下墜,那個位置通常就是版面出現了「看起來已經結束」的視覺錯覺——一條分隔線、一塊大留白、一個像頁尾的深色區塊。

滑鼠移動圖記錄游標停留的軌跡。要特別說明的是,這張圖經常被過度解讀:游標位置與視線位置只有部分相關,桌機上的參考價值比手機高,手機版更該看的是捲動與點擊。把它當成輔助線索,不要當成「訪客在看這裡」的證據。

四個訊號,和它們通常代表的意思

工具會自動標記一些行為模式,以下四種在中小企業官網上最常出現,也最容易修。

一、憤怒點擊。同一個位置在短時間內被連續快速點好幾下。幾乎都是「我以為會有反應但沒有」。常見元凶:載入中沒有任何提示的送出按鈕、要等兩秒才展開的手風琴選單、在手機上被遮住一半的下拉式選單。

二、無效點擊。點了完全沒有互動的元素。這通常是設計語彙的問題:某段文字用了和連結一樣的顏色、圖片下方的說明文字被誤認成連結、「了解更多」四個字其實沒掛網址。這類問題修起來成本極低,但在熱點圖出現之前,沒有人會知道。

三、捲動曲線的斷點。把捲動圖和頁面長度對齊,找出下降最陡的那一段。把關鍵資訊(價格區間、聯絡表單、案例)從斷點之後搬到斷點之前,往往比重寫一整頁文案有效。

四、快速回退。進站不到幾秒就按上一頁回到搜尋結果。如果集中在某個關鍵字帶進來的落地頁,多半代表搜尋意圖和頁面內容對不上,這是內容的問題,不是版面的問題。

修剪整齊的樹籬夾出一條通往石階的步道,途中橫著一條繩索把路攔住,象徵訪客在官網上走到一半被某個看不見的阻礙擋下來

Photo by T on Unsplash

錄影回放:重點是「不要全部看」

工作階段錄影是最容易被放棄的功能,原因很單純——一天收到三百段影片,看兩天就累了,第三天再也不會打開。會持續用下去的人,共通點是懂得篩選。

比較實際的做法是只看三種:有送出表單的(看成功路徑長什麼樣,哪些欄位他改了又改)、在關鍵頁停留超過三十秒卻沒有下一步的(有興趣但被什麼擋住)、系統標記有憤怒點擊或無效點擊的(直接看現場)。這三類加起來,一週通常不超過十幾支。

看的時候用兩倍速,只記一件事:他卡住的那一秒,畫面上是什麼。不要在看的當下想解法,先把觀察一條一條寫下來,例如「三支影片都在規格表那裡反覆左右拖曳」。累積十條觀察之後再一起排序,會比看一支改一次有效率得多。

也要提醒一個常見的誤判:單一一支影片不是證據。訪客可能只是接了通電話、切去別的分頁、或單純在閒逛。同一個行為至少在三到五支影片重複出現,才值得當成假設。

工具與安裝:免費方案就夠起步

這個領域目前最容易入門的是 Microsoft Clarity,提供熱點圖與錄影回放,免費使用且可與 GA4 串接;Hotjar 則是另一個常見選擇,免費方案有工作階段額度限制。兩者的方案內容都可能調整,實際額度與功能以官方說明頁為準。

安裝方式通常是在網站所有頁面加一段追蹤碼。如果已經在用 Google Tag Manager,透過容器新增一個代碼即可,不必每次都找工程師改版型檔案。裝好之後有三件事值得一併處理:

排除內部流量。公司同仁每天自己點官網的次數可能比客戶還多,不排除掉,熱點圖會變成你們內部的操作紀錄。多數工具支援用 IP 或自訂參數排除。

確認手機版收得到資料。台灣中小企業官網的行動裝置流量比重經常過半,但熱點圖常常只被拿來看桌機版,因為桌機版比較好讀。請刻意把裝置切到手機再看一次,兩邊的結論往往不同。

先累積樣本再下判斷。一個頁面只有二、三十個工作階段時,熱點圖的顏色分布隨機性很高。等累積到數百個工作階段再看趨勢,誤判會少很多。

一整排毛玻璃隔間,後方的人影與物件只剩模糊輪廓無法辨識,象徵錄影回放工具對表單欄位與個人資料所做的遮罩處理

Photo by Declan Sun on Unsplash

隱私:這一節不能跳過

「錄影」兩個字很容易引起誤會。這類工具錄的並不是訪客的螢幕畫面,而是記錄頁面結構與操作事件,再在後台重新播放一次。即使如此,表單欄位裡被打進去的內容仍有可能被一併收走,姓名、電話、電子郵件、統編都在風險範圍內。

實務上至少要做到三件事。第一,確認遮罩設定:主流工具預設會遮蔽輸入內容,但預設不等於已驗證,請自己送出一次測試表單,再回頭看那支錄影,確定看到的是黑條而不是真實資料。第二,對敏感欄位加上強制遮罩的標記,特別是信用卡、身分證字號、病歷這類欄位所在的頁面,必要時整頁排除錄製。第三,更新隱私權政策與 Cookie 同意設定:在政策中說明使用了哪些分析工具、收集什麼類型的資料、資料存放在哪裡,並把這類追蹤碼歸類在「分析型」而非「必要型」,在訪客同意之前不要載入。

台灣的個人資料保護法要求蒐集個資時應告知蒐集目的與利用方式,若資料會傳輸到境外伺服器,告知義務同樣存在。有外銷或歐盟訪客的企業,還需要留意當地對同意機制更嚴格的規範。這一段的成本只是幾段文字和一次設定,但出事時的代價不成比例。

怎麼讓它變成習慣,而不是裝完就忘

這類工具最大的風險不是不準,是裝了沒人看。比較能撐下去的節奏,是把它縮小成一個每月一次、半小時就能做完的動作:

月初挑一個頁面——通常是詢問單來源最多、或是廣告花最多錢導過去的那一頁。先看捲動圖,確認關鍵資訊在不在多數人看得到的範圍;再看點擊圖,找出有被點卻沒反應的元素;最後挑五到十支錄影,補上「為什麼」。把結果寫成一句話的假設,例如「表單放在第三屏,是詢問單少的主因」,然後只改這一個地方。

下個月回來看同一張捲動圖和同一組數字,確認方向對不對。一次只動一個變因,你才分得出來是哪個改動有效;一次改五個地方,數字變好了也不知道該保留哪一個。

熱點圖和錄影回放不會直接帶來訂單,它們提供的是一種以前拿不到的東西:讓你停止猜測訪客在想什麼。對多數預算有限的中小企業來說,先把現有流量的流失點補起來,通常比再加預算買新流量划算得多。

這週可以先做的三件事

一、挑一個免費工具,透過 GTM 裝上追蹤碼,並排除公司內部流量。

二、等資料累積約兩週後,打開詢問單最重要的那一頁,先看捲動圖和點擊圖各一次,桌機與手機版分開看。

三、在動手改版之前,先確認表單遮罩有效、隱私權政策已更新、同意機制已把分析工具歸類正確。

想把這些做到你的網站上?

不論是快速上線的模板建站、客製官網或後台系統,留個訊息,我們會回你「能做+報價+時程」。

加 LINE 詢問