
重點整理
Hotjar 的 Funnels 用來設定頁面瀏覽路徑(例如首頁 → 教學頁),看多少比例的訪客照著走完;Forms 則分析聯絡表單哪個欄位最常讓人放棄。本文示範兩項功能的設定步驟。Hotjar 介面與功能已大幅改版,舊版 Forms 分析可能已不提供,實際以後台為準。
Hotjar 瀏覽分析 ( Funnels )、聯絡表單(From)設定教學介紹,在之有關 hotjar 的文章鵠學苑分別介紹了 Heatmaps(熱點地圖) 及 Recordings(錄影模式) ,而這篇文章要介紹的是 hotjar 網站行分析上半部中最後兩個工具,分別是 Hotjar Funnels 瀏覽分析 步驟 及 Hotjar From 聯絡表單字串分析,Funnels 可以設定頁面瀏覽順序,來查看使用者在特定網址頁面中跳轉到另一個設定網址頁面的總人數分析百分比資料,舉例來說,當我們在網站首頁中放置了主要銷售商品的資訊連結,透過在 Funnels 中設定後就能在一段時間後看到進入到首頁的訪客去點擊商品資訊連結的人數百分比有多少,如果非常低就能夠試著找出原因,也許是商品位置不夠明顯,或者是以彈跳視窗表現商品資訊讓使用者直接關閉跳出等等,因此 Funnels 可以起到輔助改進網站資訊安排的作用。
另外 Hotjar From 是針對聯絡表單頁面做字段分析,聯絡表單中的詢問欄位對網站訪客來說是一個願不願意填寫的重點,如果説要求填入的訊息太多或者表單設計過於複雜,都會讓使用者放棄完成聯絡表單,損失與網站訪客直接接觸溝通的機會。在這篇教學的步驟會經過一些簡化,因為某些步驟的設定方式與上兩篇 Hotjar 教學文章差不多,筆者就不浪費版面與無意義的文字來描述,接下來就開始今天的教學吧!
(小提醒:鵠學苑的所有教學均是以 Apple Mac OS X 系統 做步驟示範!)
Funnels(瀏覽分析)設定步驟教學
第一步:進入到 Funnels 的分析項目中,這裡可以預先設定不同頁面間的路徑,來觀察使用者頁面使用的轉換率如何,同樣在 Name 的欄位為這個分析方案輸入名稱。

第二步:下圖中筆者示範的頁面路徑是首頁→ WordPress 教學,在 Funnels 中可以指定頁面瀏覽順序,以查看按照網站管理者決定比較重要的頁面使用步驟,是否有比較多的訪客會觀看,筆者以下圖為例,鵠學苑想了解透過自然搜尋到達首頁的網站訪客直接點擊 WordPress 教學 的人數比例有多少,就在下圖標示 1 的位置輸入到達頁面的名稱及網址,標示 2 的位置輸入想要分析訪客造訪百分比的網址,就可以開始分析進入首頁的訪客點擊進入 WordPress 教學 的百分比。而有關 PAGE URL 如何設定網頁網址的選項,必須要先了解網址結構組成,請先參考這篇文章:什麼是 URL 網址 IP ?網域 Domain 中文 意思是什麼?。以下開始做說明:
1. Simple match:簡易匹配,無論是大小寫或帶有參數,只要與輸入網址相符合就會納入 Funnels 統計,只有子目錄的網址不會做匹配。比如説當我輸入 https://www.design-hu.com.tw/,就只會匹配到 https://www.design-hu.com.tw/ 這個頁面; 而當輸入 https://www.design-hu.com.tw/wordpress/,則 https://www.design-hu.com.tw/wordpress 、 https://www.design-hu.com.tw/WORDPRESS/ 、 https://www.design-hu.com.tw/WORDPRESS/?x=1、http://blog.design-hu.com/wordpress/,這些網址的頁面都會納入到匹配範圍,不會納入匹配的就是具有子目錄網址的頁面比如 https://www.design-hu.com.tw/wordpress/wordpress-indro 就不會納入匹配。
2. Exact Match:精確匹配,只會匹配輸入網址的頁面,不像 Simple match 具有範圍性。
3. Starts With:指定起始網址條件,輸入 https://www.design-hu.com.tw/wordpress/ ,網站中頁面網址是以 https://www.design-hu.com.tw/wordpress/ 開頭的結構都會匹配,但要注意的是 http://blog.design-hu.com/wordpress/ 不會納入匹配,因此在設定網址時要看清楚。
4. Ends With :與 Starts With 差別在於是設定子目錄為條件,比如設定 wordpress/ 就只有 https://www.design-hu.com.tw/wordpress/ 會納入匹配。
5. Contains : 包含指定參數或字詞的網址結構將納入匹配,比如當輸入 web-news , 則 https://www.design-hu.com/category/web-news 底下所有具有 web-news 的文章頁面都會匹配。
,如果說有兩頁以上的步驟想要設定可以點擊 add another step 來增加頁面數量,完成後點擊 Create Funnel 。

第三步:在之前筆者已經建立過首頁到文章分類的分析,在此示範畫面給各位同學觀看,點擊 View Funnel。

第三步:可以在下圖的資料分析中看到有 8 名使用者進入到首頁,但只有 3 名使用者進入到文章分類其中之一的頁面中,可以藉由多筆資料做比對,找出網站中最多人觀看的頁面路徑,或者幾乎沒有人拜訪的頁面順序,藉此調整網站重要內容到熱門頁面或區塊中,有效提升網頁轉換率。

From(聯絡表單)資料分析設定
第一步:最後一個From表格的部分,同樣先選擇基本方案,紀錄1000人次的使用行為。

第二步:在下方Details同樣輸入此專案名稱,以及表格所在的網頁網址(PAGE URL)。

第三步:點擊 Load Forms On Page 後會自動抓取網頁表格的字串,如圖二所示,右方會出現表格的預覽圖示,選定正確的表格後,點擊 Create From 。


第四步:回到表格選項的頁面,點擊 View Report 按鈕。

第五步:下圖是鵠學苑的聯絡表單在分析一個星期後的數據,可以看到每個字段使用者停留的時間以及完成度,藉此來判斷表格是否過於冗長複雜導致使用者無法理解字面意思或失去完成表格的耐心,以作為表格樣式內容改進的基準。

沒有表單分析功能,還能怎麼找出表單問題?
- 看錄影:用 Hotjar 錄影篩選造訪過聯絡頁的訪客,觀察他們停在哪個欄位、是否填到一半就離開。
- GA4 表單互動:GA4 加強型評估可記錄開始填表與送出表單事件,但判斷方式較粗略,送出成功與否最好以感謝頁的瀏覽次數為準。
- 減少欄位:必填欄位越多,放棄率通常越高,先只留下聯絡必需的欄位。
- 實際測試:用手機自己填一次,檢查錯誤訊息是否清楚、送出後有沒有明確的完成提示。
常見問題
Hotjar 是什麼?
Hotjar 是網站使用者行為分析工具,可以看熱點圖、訪客操作錄影,並設定漏斗分析訪客在哪一步離開。在網站放入追蹤碼後就會開始收集資料,適合找出頁面設計或流程上讓人卡住的地方。
Hotjar 現在還有 Funnels 和 Forms 嗎?
Hotjar 介面已大幅改版,漏斗分析仍以 Funnels 的形式存在,但設定方式和本文的舊截圖不同;舊版 Forms 表單欄位分析已不在目前主要功能中,實際可用功能請以登入後的後台為準。
Hotjar 可以分析 WooCommerce 購物流程嗎?
可以。在全站放入 Hotjar 追蹤碼後,建立一個依序包含商品頁、購物車、結帳頁與訂單完成頁的漏斗,就能看出顧客最常在哪一步放棄,再搭配該頁的錄影找原因。
結語
筆者在教學中所介紹的都是以免費版本為基礎,如果説各位站長們沒有預算去購買專業版,那麼要記得在進入 Hotjar 查看分析資料時要將不必要或無效的分析數據結果做刪除,因為無論是那一套 Hotjar 工具在免費版中都有紀錄上限,為了保持資料在最新狀態,請務必做好資料管理的部分。到這篇文章 Hotjar 上半部網站分析就已經結束,接下來會針對Hotjar 下半部 — feedback(反饋)的四套工具分別發表教學文章,因此不要忘記持續關注鵠學苑,如果想接收最新教學,請在右邊訂閱電子報,想學習超詳細的WordPress攻略嗎??來 鵠學苑 就對了!我們下次的教學見~
免費網頁空間 架站平台比較 – WordPress,Wix,Weebly,Blogger
WordPress 市佔率再創新高,2019 年成長至 33.4%!
