GTM + GA4 事件追蹤設定流程

追蹤目標：區塊曝光（event_a）與項目點擊（event_b）

背景說明

主要是因為工作上有串接過的經驗分享。透過 Google Tag Manager（GTM） 搭配 Google Analytics 4（GA4），追蹤頁面特定區塊的曝光與互動行為。

整體架構：前端在適當時機呼叫 dataLayer.push() 推送事件，GTM 監聽後觸發對應的 GA4 事件代碼，GA4 接收並記錄資料。GTM 作為中間層，工程師只需按規格推送 dataLayer，GA4 串接與參數映射都在 GTM 後台設定。

標準流程概覽

1. 確認追蹤需求（事件名稱、參數規格）
         ↓
2. 建立 GA4 帳號，取得 Measurement ID
         ↓
3. 建立 GTM Container，連接 GA4
   - 建 dataLayer 變數
   - 建觸發條件
   - 建事件代碼
         ↓
4. 工程師依照規格埋碼（dataLayer.push）
         ↓
5. 部署到測試機，GTM Preview 驗證
         ↓
6. GTM 發布，GA4 即時報表確認

Part 1：建立 GA4 帳號

前往 analytics.google.com → 點「開始測量」
填入帳戶名稱、資源名稱，時區與幣別依需求選填
選「網站」→ 填入測試機環境網址 → 建立
取得 Measurement ID（格式：G-XXXXXXXXXX）

建議測試機與正式機各建一個資源，避免測試資料污染正式報表。

Part 2：建立 GTM Container

前往 tagmanager.google.com → 點「建立帳戶」
填入帳戶名稱與國家
容器名稱填網域、目標平台選「網路」→ 建立
取得 Container ID（格式：GTM-XXXXXXX）

Container 建立後會產生一段載入程式碼，需由工程師嵌入網站 <head> 與 <body>。

Part 3：GTM 後台設定

Step 1：建立 GA4 設定代碼

GTM 後台 → 代碼 → 新增 → 類型選「Google Analytics: GA4 設定」，填入 Measurement ID，觸發條件選「All Pages」，命名 GA4 - 設定 → 儲存。

Step 2：建立 dataLayer 變數

GTM 後台 → 變數 → 使用者定義的變數 → 新增，類型選「資料層變數」，選擇版本，共建立 3 個：

GTM 變數名稱	資料層 key
`dlv - param_a`	`param_a`
`dlv - param_b`	`param_b`
`dlv - param_c`	`param_c`

GTM 變數名稱為內部識別用；資料層 key 必須與前端 dataLayer.push() 的欄位名稱完全一致。

Step 3：建立 event_a 事件代碼

代碼 → 新增 → 類型「GA4 事件」→ 設定代碼選「GA4 - 設定」→ 事件名稱填 event_a，加入事件參數：

參數名稱	值
`param_a`	`{{dlv - param_a}}`
`param_b`	`{{dlv - param_b}}`

觸發條件新增「自訂事件」，事件名稱填 event_a，命名 GA4 - event_a → 儲存。

Step 4：建立 event_b 事件代碼

同 Step 3，事件名稱改為 event_b，事件參數：

參數名稱	值
`param_a`	`{{dlv - param_a}}`
`param_c`	`{{dlv - param_c}}`

觸發條件事件名稱填 event_b，命名 GA4 - event_b → 儲存。

Step 5：發布

右上角點「提交」→ 填寫版本說明 → 發布。

Part 4：工程師埋碼規格

// 瀏覽
window.dataLayer?.push({
  event: 'event_a',
  param_a: '<區塊識別名稱>',
  param_b: 1,
});

// 點擊
window.dataLayer?.push({
  event: 'event_b',
  param_a: '<區塊識別名稱>',
  param_c: '<被點擊的項目名稱>',
});

實作要點：使用 IntersectionObserver 偵測曝光，並加上旗標避免重複觸發；僅在測試機環境執行。

Part 5：驗證

GTM Preview：GTM 後台 → 預覽 → 輸入測試機環境網址連線，操作頁面，確認 Tag Assistant 面板中 event_a、event_b 有觸發，並在「資料層」分頁核對參數值。

GA4 即時報表：GTM 發布後，前往 GA4 → 即時 → 事件，操作測試機環境網站，約 1 分鐘內應出現 event_a 和 event_b。

注意事項

目前僅測試機環境推送事件，不影響正式機
dataLayer 為累加機制，前次推送的 key 值可能殘留，屬正常現象，不影響 GA4 接收結果
測試完成後移除 layout 中的暫時性程式碼
若需在 GA4 報表中使用自訂參數進行篩選，需另至 GA4 後台「自訂定義」建立對應的自訂維度