跨部門必備｜用GTM追蹤Core Web Vitals，Looker Studio一鍵可視化

網站性能的 Core Web Vitals（LCP、FID、CLS）是影響 SEO 排名的重要指標。透過本次的 GTM 設定，你可以即時監測網站效能並在 Looker Studio 中呈現，方便跨部門協作與報告。如果對SEO性能不太熟悉的行銷人也不必太擔心，懶萌編將逐步引導你完成設定，只要跟著操作就沒問題，如果有問題的話，也可以至IG詢問我！

情境與限制

• 情境：需要追蹤網站效能指標，並即時在 Looker Studio 中呈現數據，方便跨部門合作或匯報。
• 限制：涉及 GTM 的自定義代碼與 GA4 的自訂維度，設定相對複雜。如果只需檢測網站性能，建議使用 LightHouse 等工具。(畫重點！)

在 GTM 安裝 Core Web Vitals 追蹤代碼

這個步驟是幫助我們透過現有的社區範本，追蹤網站上的Core Web Vitals

步驟 1：新增 GTM 樣板

1. 進入 GTM → 「樣板（Templates）」→ 搜尋 Core Web Vitals。
2. 選擇 Core Web Vitals - Simo Ahava，點擊「新增至工作區」。(如果有警告訊息純屬正常現象，可忽略)

步驟 2：設定樣板參數

• Namespace Objects：是否簡潔顯示在 GA 的名稱，建議關閉。
• Collect all web vitals metrics：是否收集所有指標（LCP、FID、CLS、INP），建議開啟。
• Send attribution data：是否提供優化建議（如是哪個元素導致效能問題），建議開啟。

可以自己選擇要勾選的項目，不過這部分的設定(尤其是Namespace Objects)會影響到後面的資料層變數設置，建議可以先跟著文章操作即可喲！

步驟 3：設定觸發條件

• 觸發條件：選擇「All Pages」，確保每個頁面都能被測量。

設定 GTM 資料層變數

什麼是資料層變數？為什麼需要設定？

其實不難，想像網站是學校，GTM 是班導師，而 GA4 是校長。

Data Layer、GTM與GA的關係

1. 資料層（Data Layer）
   就像班導師桌上的「通知籃」，學生們會把成績單、請假單、作業放進去，。
2. 資料層變數（Data Layer Variable）
   就是班導師用來辨認這些通知的「標籤」，例如：
   • 「學生名字」（對應 webVitalsMeasurement.name）
   • 「成績」（對應 webVitalsMeasurement.value）
   • 「變化」（對應 webVitalsMeasurement.delta）
3. GTM 的工作
   班導師會根據標籤（資料層變數）挑選需要的資料，然後把它們送到校長辦公室（GA4）。
4. GA4 的工作
   校長（GA4）收到這些通知後，記錄學生的表現（LCP、FID、CLS 數據），方便隨時查詢或匯報。

簡單地說，過程是 網站>Data layer>GTM>GA4

接著我們來看看如何在GTM設定變數：

在GTM新增資料層變數

1. 進入 GTM → 「變數（Variables）」→ 「新增」。
2. 設定以下變數：
   • webVitalsMeasurement.name
   • webVitalsMeasurement.id
   • webVitalsMeasurement.value
   • webVitalsMeasurement.delta
3. 儲存並發佈 GTM。

建立 GA4 事件標籤，傳送 Core Web Vitals 數據

這麼做的目的是讓GTM的數據能被推送到GA4，如果前面設置無誤，這邊一樣照抄就可以了喔！

步驟 1：新增 GA4 事件標籤

1. 進入 GTM → 點擊「標籤（Tags）」→「新增」。
2. 選擇「Google Analytics：GA4 事件」，設定事件名稱為 coreWebVitals。
3. 設定以下事件參數：
   • web_vitals_measurement_name → {{DLV - webVitalsMeasurement.name}}
   • web_vitals_measurement_id → {{DLV - webVitalsMeasurement.id}}
   • web_vitals_measurement_value → {{DLV - webVitalsMeasurement.value}}
   • value → {{DLV - webVitalsMeasurement.delta}}
4. 觸發條件：選擇「coreWebVitals」（下一階段會提到如何設定）。
5. 儲存並發佈 GTM。

步驟 2：建立自訂事件觸發條件

1. 進入 GTM → 點擊「觸發條件（Triggers）」→「新增」。
2. 選擇「自訂事件（Custom Event）」，事件名稱填入 coreWebVitals。
3. 選擇「所有的自訂事件」，儲存並發佈。

在 GA4 設定自訂維度，讀取 Core Web Vitals 數據

GA4 預設不會儲存 web_vitals_measurement_name 和 web_vitals_measurement_value，因此，需要手動新增。

1. 進入 GA4 → 「管理」→「自訂定義（Custom Definitions）」。
2. 點擊「建立自訂維度」，新增以下維度：
   • 維度名稱： web_vitals_measurement_name（範圍：事件）
   • 事件參數： web_vitals_measurement_name
   • 維度名稱： web_vitals_measurement_value（範圍：事件）
   • 事件參數： web_vitals_measurement_value
3. 儲存，等待 GA4 收集數據（可能需 24 小時）。

免費版自訂維度有50個的上限！行銷人們可多多斟酌喲

在 Looker Studio 建立 Core Web Vitals 報表

1. 進入 Looker Studio（https://lookerstudio.google.com/）。
2. 在”維度”中，拉進網頁路徑
3. 接著要顯示FCP指標：在維度欄位，點選”新增計算結果欄位”

1️⃣ 建立「FCP 數值」欄位

plaintext複製編輯CASE 
  WHEN web_vitals_measurement_name = "FCP" THEN SAFE_CAST(web_vitals_measurement_value AS NUMBER)
  ELSE NULL
END

📌 這個欄位會顯示 FCP 數值，其他行則為 NULL。

2️⃣ 建立「LCP 數值」欄位

plaintext複製編輯CASE 
  WHEN web_vitals_measurement_name = "LCP" THEN SAFE_CAST(web_vitals_measurement_value AS NUMBER)
  ELSE NULL
END

3️⃣ 建立「FID 數值」欄位

plaintext複製編輯CASE 
  WHEN web_vitals_measurement_name = "FID" THEN SAFE_CAST(web_vitals_measurement_value AS NUMBER)
  ELSE NULL
END

📌 這個欄位會顯示 FID 數值，其他行則為 NULL。

4. 接著，我們還要設定一個維度，標示這些數值是否超標：

CASE
WHEN web_vitals_measurement_name = "LCP"
AND SAFE_CAST(web_vitals_measurement_value AS NUMBER) IS NOT NULL
AND SAFE_CAST(web_vitals_measurement_value AS NUMBER) > 2500 THEN "⚠️ LCP 異常"

WHEN web_vitals_measurement_name = "FID"
AND SAFE_CAST(web_vitals_measurement_value AS NUMBER) IS NOT NULL
AND SAFE_CAST(web_vitals_measurement_value AS NUMBER) > 100 THEN "⚠️ FID 異常"

WHEN web_vitals_measurement_name = "CLS"
AND SAFE_CAST(web_vitals_measurement_value AS NUMBER) IS NOT NULL
AND SAFE_CAST(web_vitals_measurement_value AS NUMBER) > 0.1 THEN "⚠️ CLS 異常"

ELSE "✅ 正常"
END

完成後，會變成這樣：

🔹 總結

懶萌編在這篇文章中，循序漸進地介紹了如何利用 GTM、GA4 和 Looker Studio 完成網站效能的追蹤與呈現，從安裝 GTM 範本、設定資料層變數、傳送數據到 GA4，再到建立 Looker Studio 報表，讓核心指標（LCP、FID、CLS）透過自動化報表即時更新，便於跨部門協作，例如讓工程師馬上得知問題根源，或是讓專案經理立刻知道現在網站的健康狀況。

✅ 設定 GTM 追蹤 Core Web Vitals，確保每個頁面數據被精準收集。
✅ 在 GA4 中手動新增自訂維度，成功讀取與分析效能數據。
✅ 通過 Looker Studio 創建直觀報表，讓異常數據自動標示，便於優化。