更新時間：2026年6月8號
如果你希望在GTM中追蹤按鈕點擊、會員登入、表單送出、購物車操作等互動事件，dataLayer.push是最推薦、也是最穩定的做法之一。
相較於直接透過CSS Selector或DOM元素判斷事件，dataLayer.push不受網頁版型變動影響，因此更適合大型網站、SPA（單頁式應用程式）以及電商網站。
本篇將一步一步教你如何：
- 了解dataLayer.push的運作原理
- 撰寫dataLayer.push程式碼
- 在GTM建立Data Layer Variable
- 建立自訂事件觸發條件
- 將事件送至GA4
- 在GA4建立自訂定義
完成後，你便能將任何網站互動事件穩定傳送到GA4。
什麼是dataLayer.push？
dataLayer.push是GTM最常使用的資料傳遞方式。
當網站發生某個事件（例如按鈕點擊、登入成功、加入購物車等），網站會透過JavaScript將資料推送到Data Layer（資料層）。
GTM偵測到Data Layer中新增的資料後，就會依照設定的觸發條件，自動執行對應的Tag，例如GA4 Event、Google Ads Conversion或Meta Pixel。
整個流程如下：
使用者操作網站 → JavaScript 執行 dataLayer.push → GTM 接收事件 → 觸發 Tag → 資料送至 GA4
哪些情境適合使用 dataLayer.push？
dataLayer.push 幾乎適用所有事件追蹤，尤其推薦以下情境：
- SPA（Single Page Application，單頁式應用程式）
- PWA（Progressive Web App，漸進式網頁應用）
- 自訂互動事件追蹤
- 電商行為追蹤
- AJAX 動態載入內容
- 前後端分離架構網站
使用dataLayer.push的優點
相較於 Click Element 或 CSS Selector 等追蹤方式，dataLayer.push 有以下優勢：
- 追蹤資料較精準且穩定
- 不受 HTML 或 DOM 結構變動影響
- 可自由傳送多個事件參數
- 易於維護與擴充
- 特別適合 SPA、PWA 與大型網站
使用 dataLayer.push 的缺點
雖然 dataLayer.push 十分穩定，但仍有一些限制：
- 需要網站工程師協助埋設程式碼
- 前後端需先溝通事件規格
- 開發與測試成本較高
不過，若網站有長期經營規劃，仍建議優先採用 dataLayer.push，而不是依賴 DOM 點擊判斷。
dataLayer.push 基本語法
以下是最基本的 dataLayer.push 寫法：：
dataLayer.push({
'event': 'customize',
'color': 'red',
'conversionValue': 50
});各欄位說明如下：
| 參數 | 說明 |
|---|---|
| event | 事件名稱（必要） |
| color | 自訂事件參數（可選） |
| conversionValue | 自訂事件參數（可選） |
其中，event是GTM判斷是否觸發Tag的依據，因此一定要設定。
其餘欄位則可依實際需求自由命名。
實作範例
假設要追蹤使用者點擊某個按鈕。
當使用者點擊按鈕時，網站執行：
dataLayer.push({
'event': 'datalayer_push_method',
'color': 'red',
'clickValue': 1 });參數說明：
| 參數 | 值 |
|---|---|
| event | datalayer_push_method |
| color | red |
| clickValue | 1 |
事件名稱與參數名稱都可以依照需求自行定義。
Step 1：請工程師加入dataLayer.push程式碼
首先，需要由網站工程師在指定互動發生時執行：
dataLayer.push({
'event': 'datalayer_push_method',
'color': 'red',
'clickValue': 1 });
當程式執行後，資料便會推送至 Data Layer，等待 GTM 接收。
Step 1：建立資料層變數（Data Layer Variable）
接著需要在GTM中建立對應的資料層變數。
在GTM中點擊「變數」——「新增」——「請選擇變數類型以開始設定…」——「資料層變數」，命名為 “dlv-color”, 然後做如下設定：
同理設定 dlv-clickValue。
注意：dlv為Data Layer Variable的縮寫，是GTM常見的命名方式，有助於快速辨識變數來源。
Step 3：建立觸發條件
在GTM中點擊「觸發條件」——「新增」——「請選擇觸發類型以開始設定…」——「自訂事件」，命名為 “DataLayer Push”, 然後做如下設定：
當dataLayer.push發送的event名稱符合設定值時，即會觸發標籤。
Step 4：建立GA4事件標籤
在GTM中點擊「代碼」——「新增」——「請選代碼發類型以開始設定…」——「Google Analytics (分析)：GA4 事件」，命名為 “Event Tracking-DataLayer Push (dataLayer.push method)”, 然後做如下設定：
Step 5：預覽與測試
完成設定後，建議先進行測試驗證：
若設定正確，可以看到事件如預期觸發。
Step 6：在GA4建立自訂定義
雖然事件已成功送至GA4，但GA4不會自動將自訂事件參數加入報表。
若希望在探索報表中分析這些資料，還需要建立自訂定義。
這個事件有事件層級自訂維度和事件層級自訂指標：
- color是事件層級自訂維度
- click_value 是事件層級自訂指標
註冊color，在GA4中，點擊「管理」——「自訂定義」——「建立自訂維度」, 然後做如下設定：
接下來註冊click_value，在GA4中，點擊「管理」——「自訂定義」——「自訂指標」——「建立自訂指標」, 然後做如下設定：
完成後，GA4 便能在報表中分析這些事件參數。
提醒： 自訂定義建立後，通常需要等待約 24～48 小時，相關資料才會開始出現在 GA4 標準報表中。
常見問題（FAQ）
dataLayer.push 一定要有 event 嗎？
是。
event 是GTM判斷是否觸發的依據，若未設定event，GTM就無法透過自訂事件觸發對應的Tag。
event 以外的參數可以自由命名嗎？
可以。
除了event外，其餘事件參數（例如 color、clickValue、product_id、member_type 等）都可依專案需求自行命名。
dataLayer.push 適合哪些網站？
幾乎所有網站都適用，尤其推薦SPA、React、Vue、Angular、Next.js、Nuxt、電商網站、前後端分離網站
總結
dataLayer.push是GTM最推薦的事件追蹤方式之一。
透過 網站 → Data Layer → GTM → GA4 的流程，不僅能建立穩定且易於維護的事件追蹤架構，也能避免因網頁版型調整而導致追蹤失效。
若你的網站採用 SPA、PWA、React、Vue 或其他前後端分離架構，建議優先採用 dataLayer.push 搭配GTM與GA4，建立更可靠且可擴充的事件追蹤機制。