Google Analytics 進階:怎麼用GA4追蹤Core Web Vitals?

文章目錄

分享給更多人知道

什麼是Core Web Vitals?

Core Web Vitals是Google在2020年時提出,用來評估網頁體驗的量化指標,包含LCP (Largest Contentful Paint)、FID (First Input Delay)、CLS (Cumulative Layout Shift)。

簡單來說,LCP是用來計算,一個網頁需要多久的時間來讀取出該網頁中最大的元素 。這個網頁元素可能是圖片、文字,甚至也可能是一個JavaScript所驅動的視窗 (Pop-up Window),不過大多數都是Banner (Hero Image),主視覺圖片。

FID指的是,當使用者與某網頁進行第一次互動時,該網頁需要花多久時間反應。舉例來說,當你在一個網頁中點擊下拉式選單,這個選單需要花多少時間能展開。

而CLS就是網頁視覺的穩定度,當在載入一個網頁時,瀏覽器會需要載入HTMLCSSJavaScript等代碼,來呈現網頁的視覺效果。而CSS就會扮演一個非常重要的角色,它可以決定這些視覺元素的顏色、字型、位置等等。如果在寫CSS時,沒有特別注意視覺穩定度,在讀取網頁時,很多網頁元素就非常有可能會移動(Shifting),造成網站訪客的不便。

為什麼要追蹤Core Web Vitals?

隨著Web 2.0技術的發達及穩定,越來越多的SaaS公司,持續以不同的形式,提供不同的網路服務。讓網路購物、網路新聞、網路廣告,甚至是網路電影,變得喜以為常。為了迎合不同的產品需求,網頁的呈現方式,也變得非常的華麗。不過在強大的功能背後,意味著需要耗費更多的網路資源,因此讓使用者體驗有所減損,讀取網頁開始變得很慢,點擊按鈕後,等很久也沒有反應,甚至想要點A按鈕時,反而點到B按鈕。

為了在強大的功能和使用者體驗間取得平衡。優化網頁逐漸變得更受重視。Google身為網路產業的龍頭,為了確保使用自家的Google搜尋的用戶,都能夠享有最佳的使用者體驗,因此制定了一系列能夠量化的指標Core Web Vitals,作為搜尋引擎演算法之一,鼓勵網站擁有者在開發網頁時,能夠根據客觀的數據來優化網頁表現。

5種評估Core Web Vitals的方式

理解Core Web Vitals的重要性後,讓人不禁擔心,究竟該怎麼評估Core Web Vitals呢?量化這些數字會不會很難?別擔心!以下我會和你分享,5種能夠分析網頁表現的免費工具。

Page Speed Insight/ Lighthouse

Page Speed Insight是一款由Google所推出的免費工具,只要簡單輸入需要檢測的網頁URL,就能得到該網頁在手機和桌機上的表現。由於Google主要都以手機爬蟲來搜集網路資訊,建議還是參考手機版的數字為主。

在這份報告中,你會得到LCP和CLS數值,但並不會看到FID,因為這個工具沒辦法像真人一樣與網頁互動 (例如:點擊按鈕)。儘管如此,這款工具已經提供非常完整的資訊了,並且也告訴我們該如何優化的方向。

Page Speed Insight報表
Page Speed Insight報表

跟Page Speed Insight的功能非常類似,也同樣是由Google所開發的Lighthouse,可以透過Google Chrome開發者工具或下載Chrome Extension來啟用。

以下就一起實際操作,由Google Chrome來開啟Lighthouse。

在想要測試的網頁點擊右鍵或選單,開啟開發者工具(Dev Tool)
在想要測試的網頁點擊右鍵或選單,開啟開發者工具(Dev Tool)
在上方選單選擇Lighthouse
在上方選單選擇Lighthouse
將Device設定為Mobile
將Device設定為Mobile
獲得完整Lighthouse報表
獲得完整Lighthouse報表

GTmetrix

GTmetrix也是一款廣為人知的測試網頁表現的工具,它提供非常完整的測試數據,包括Core Web Vitals,所有HTML、JavaScript、CSS的讀取狀況(Waterfall),並且提出相對應的優化建議。不過比較可惜的是它必須升級到付費版本,才可以看到手機測試結果,如果想要以優化SEO為目標,建議還是能了解,網頁在手機版的表現如何。

GTmetrix報表範例
GTmetrix報表範例

WebPageTest

WebPageTest是一款我非常頻繁在使用的測試工具,除了最基本的測試數據外,同時還可以設定想要測試的參數,像是手機或桌機、國家、網路速度等等,最棒的是,它的優化建議可以說是所有工具當中最為詳細的。之後我也會詳細介紹該如何使用這個強大的工具,敬請期待!

WebPageTest報表範例
WebPageTest報表範例
WebPageTest報表範例
WebPageTest報表範例
WebPageTest優化建議
WebPageTest優化建議

Looker Studio CrUX報表

想不到Looker Studio也可以追蹤Core Web Vitals吧!Looker Studio CrUX Dashboard是Google使用自家開發的Chrome所搜集的使用者數據所產出的報表,所以使用這個報表前,必須確保Chrome在你想要觀測的網站上,已經搜集足夠的數據樣本。也就是說,你的網站訪客必須要有一定的數量,而且他們都必須是Google Chrome的使用者。

如下圖所示,只要簡單輸入想要測試的網站URL,就能獲得非常完整的真實使用者數據,不同於前面幾個工具,這個報表比較特別的是,它提供的是整個網站的平均數據,而不是單一網頁的表現。

製作Chrome CrUX報表
製作Chrome CrUX報表
CrUX搜集數據樣本不足
CrUX搜集數據樣本不足

Google Analytics 4

最後要分享的是大家非常熟悉的Google Analytics 4,一般我們都拿它來追蹤事件、訪客旅程、客群分析等等。在之前的文章中也有分享到,GA4可以追蹤網頁載入速度,但它卻還是一款能夠追蹤Core Web Vitals的工具,而且這些追蹤到的數據也是實際使用者的體感分數。非常好奇GA4是怎麼辦到的對吧?別著急!以下我們就一步一步解析該如何使用GTM在GA4追蹤LCP、CLS、FID數據。

用GA4追蹤Core Web Vitals
用GA4追蹤Core Web Vitals

該怎麼用GA4追蹤Core Web Vitals?

匯入Core Web Vtials代碼範本

先前往Google Tag Manager建立一個新代碼,並匯入Core Web Vitals代碼範本(請一定要給予代碼權限)。

前往社群範本庫
前往社群範本庫
搜尋Core Web Vitals
搜尋Core Web Vitals

設定CWV範本觸發條件

完成匯入後,為Core Web Vitals代碼範本,建立一個觸發條件。因為我們需要追蹤每一個網頁的LCP、CLS、FID,所以需要將觸發條件設為All Page網頁瀏覽,同時把代碼觸發選項,選成”每個網頁一次”。

設定為每頁觸發一次
設定為每頁觸發一次
設定網頁瀏覽為觸發條件
設定網頁瀏覽為觸發條件

設定Core Web Vitals變數

請分別為下列六個變數建立資料層變數(每個英文字母大小寫必須和下方所示一模一樣):

webVitalsMeasurement.id

此變數代表每次測試Core Web Vitals的測試代號

webVitalsMeasurement.name

此變數代表LCP、CLS或FID

webVitalsMeasurement.value

此變數代表未四捨五入的測試結果(單位為毫秒),可以用來量測LCP、FID的分數

webVitalsMeasurement.valueRounded

此變數代表已四捨五入的測試結果(單位為毫秒),可以用來量測LCP、FID的分數

webVitalsMeasurement.delta

此變數代表為四捨五入的測試結果,可以用來量測CLS的分數

webVitalsMeasurement.deltaRounded

此變數代表為四捨五入的測試結果,可以用來量測CLS的分數

 

設定資料層變數
設定資料層變數
設定所有資料層變數
設定所有資料層變數

建立GA4事件及設定參數

設定完所有資料層變數後,前往新增一個GA4事件,並為各個變數命名 (Event Parameter事件參數),事件參數必須和下方所列的英文字母一模一樣。

  1. web_vitals_value_id
  2. web_vitals_value
  3. web_vitals_value_rounded
  4. web_vitals_value_detla
  5. web_vitals_delta_rounded

最後建立一個自定義

設定GA4事件名稱及參數
設定GA4事件名稱及參數
建立GA4事件觸發條件
建立GA4事件觸發條件

測試標籤並提交

GA4事件代碼設定完成後,就可以使用GTM中的”預覽”功能。接下來前往Tag Assistant後,就可以開始在coreWebVitals事件中確認是否事件標籤和參數有成功觸發。如果你所看到的測試結果和下圖相似,即可返回GTM提交所有代碼。

檢查LCP事件參數
檢查LCP事件參數
檢查CLS事件參數
檢查CLS事件參數

建立GA4自訂指標及維度

類似於上一個步驟,在設定GTM設定事件參數一樣,請前往GA4中的自訂定義 (在選單中的管理),為各個事件參數設定相對應的指標或維度,這樣做的用意是為了讓在GTM所設定的數據,能在GA4中顯示。

建立自訂指標
建立自訂指標

這邊請注意,維度名稱指標名稱會在GA4事件報表中顯示的名稱,所以可以自行定義,但使用者屬性/參數參數名稱為資料欄位名稱,所以必須和下方所提供的英文字一模一樣。

web_vitals_value_id

  1. 自訂義維度
  2. 範圍:事件

web_vitals_value

  1. 自訂義指標
  2. 範圍:事件
  3. 測量單位:毫秒

web_vitals_value_rounded

  1. 自訂義指標
  2. 範圍:事件
  3. 測量單位:毫秒

web_vitals_value_detla

  1. 自訂義指標
  2. 範圍:事件
  3. 測量單位:標準

web_vitals_delta_rounded

  1. 自訂義指標
  2. 範圍:事件
  3. 測量單位:標準
檢查CWV事件
檢查CWV事件

建立Google Looker Studio儀表板

雖然我們已經蒐集完數據了,但這還不算完成。最後還需要使用Looker Studio製作Core Web Vitals儀表板,幫助我們一眼就能看出所有網頁的使用者體驗如何。你可以利用這些搜集來的數據,設計一個專屬於你的使用者體驗報表,也歡迎點擊下方按鈕複製我的報表。

Lewis Ko
Lewis Ko
Hi 我是Lewis,曾任職in-house行銷人員,現職某跨國企業的SEO Specialist。熱愛學習最新的科技和知識,努力透過簡單易懂的方式,分享我學習的過程和心得。如果你/妳剛好也在學習SEO、GA、GTM、Looker Studio的道路上,希望我的內容對你有幫助!

延伸閱讀