Crazy Egg教學,優化頁面體驗UX工具超推薦!

Crazy Egg是國外一大熱門的網站頁面分析工具,幫助你了解不同顧客」在「不同頁面」下的不同互動行為,不再只是依靠經驗、美感來優化網頁,而是真正使用數據、視覺化報告找出有價值的洞察並提升網站體驗以及整體轉換率,Crazy Egg提供五大功能報表,後面會依序詳細介紹:

  • Heatmap 熱點圖
  • Scrollmap 滾動圖
  • Confetti Report紙屑圖
  • Overlay Report覆蓋報告 
  • List  Report列表報告

Crazy Egg Heatmaps – 熱點圖報告

熱點圖可以非常直觀的看出訪客在不同區域的「點擊熱度」,找出頁面上最受關注、常被忽略的元素,亮度越高表示點擊熱度越高。

熱點分析

該功能對於轉換導向為主的頁面非常重要,幫助監測頁面的CTA按鈕、表單註冊、活動報名…等事件是不是真的對顧客來說是有吸引力且會進一步點擊的,還是大部分的顧客都被頁面上太多的其他非主要元素分心了呢?

熱點分析圖

Crazy Egg Confetti – 紙屑報告

熱點圖是在觀察用戶點擊行為,而紙屑報告(Confetti)最大價值在於可以辨認「不同客群」各自的點擊行為,Crazy Egg根據內建指標(新客、舊客、流量來源…等),再用不同的顏色顯示不同客群各自的點擊。

網站分析工具

如果你看到大部分重要元素被點擊(購買、報名…等CTA)都來自同一個顏色,就可以知道這個流量來源為你創造最多的有價值潛在顧客。

heatmap
Crazy Egg內建分眾指標

Crazy Egg Scrollmap -頁面滾動報告

Scrollmap滾動圖可以了解顧客們會停留下來查看的段落、或其實顧客都跳過你精心設計的頁面,計算方法是基於用戶瀏覽頁面時,是否停止該畫面,有停止便會計算為一個曝光,該報告就是不同段落的曝光百分比,所以會有後面的段落曝光百分比相較於前面幾個段落來得高的情況,原因就在於前幾個段落吸引力太低都被快速滑過。

大多數頁面的頂部附近會有一個白色的帶,因為這是用戶一著陸就會看到的。他們無需採取行動即可查看此內容,行銷人常用「跳出率」和「頁面停留時間」頁面分析指標,雖然可以大致了解參與程度,但無法顯示造訪者「如何與網頁互動」,將該頁面的重要元素,移置曝光百分比較高的段落也是網站優化常用的方法。

*除了找出訪客有興趣的地方外,了解讓訪客失去興趣的地方也很重要。

scrollmap

Crazy Egg Overlay -覆蓋報告

覆蓋報告可以計算點擊次數、百分比,與熱點圖的差異在於他會區分頁面上「可點擊元素」、「不可被點擊元素」,並呈現實際點擊次數與佔多少所有被點擊的百分比。

  1. 可點擊元素:按鈕、連結
  2. 不可被點擊元素:文字、段落

這個點擊也可以近一步區分不同訪客的數據差異,例如新訪客與回訪者、作業系統、瀏覽器、國家/地區…等。

 

網頁點擊分析
CrazyEgg幫你區分「可點擊」、「不可點擊」的元素

 

網頁點擊分析
每個元素被點擊狀況(可分眾查看)

*如果大多數訪客都在點擊不可點擊的元素,也代表用戶對設計感到困惑。

Crazy Egg List Report -列表報告

與覆蓋功能幾乎依樣,用明確的數字幫你列出所有元素的「點擊次數」、「點擊百分比」,一樣可分為「可點擊元素」、「不可被點擊元素」去查看,主要在挖掘每個頁面上最大比例點擊的確切元素,也許訪問者更喜歡按鈕而不是單純的連結、或者特定的CTA比其他形式的CTA產生更多點擊次數。

Crazyegg教學
用數據詳細列出整體狀況

找出頁面問題了嗎,那就開始你的A / B測試吧!

Crazy Egg提供線上編輯不同版本的頁面並進行AB測試,該功能會先有一個對照組的頁面,你可以創建許多其他不同版本的頁面,並觀察消費者在每個版本的頁面互動行為上的差異在哪,找出真正有效的那一個版面設計,再複製相同作法至其他網頁!

Crazy Egg 使用流程教學

Step 1 安裝基礎碼到網站內

CrazyEgg提供很多不同的方法安裝,我建議用GTM安裝,只需簡單複製程式碼貼上,五分鐘就可安裝完畢。

完整GTM安裝教學 :https://marketlytics.com/analytics-faq/install-crazy-egg-via-google-tag-manager

Crazy egg安裝教學

Step 2 建立你要測試的頁面

首先根據你想追蹤的特定頁面,建立snapshot,建立方式非常簡單,只要輸入網址就可以了,讓系統累積一定的訪客瀏覽數據後(通常需要一週以上),就可以針對頁面進行優化。

網站分析工具教學
可以觀察「單一頁面」或是一次分析「多種頁面」
設定追蹤不同版的數據:「手機版」、「電腦版」

Step 3 分析累積的數據,找出需要優化的地方

有了足夠數據後,就可以查看上面提到的五種報告,找出頁面需要調整之處。

Step 4 A/B Testing,進行頁面優化

如果你發現頁面的按鈕不夠吸引人,你可以透過A/B 測試,一次設計多款不同按鈕的版面,讓系統去跑出最容易造成轉換的按鈕。

AB Testing

Step 5 將測試成果套用至其他頁面

將先前測試、優化後的結果套用至其他頁面,例如頁面所有按鈕統一調整。

資料、圖片來源: https://www.crazyegg.com/blog/crazy-egg-features/