--- title: "透過 GTM 客製化實現 GDPR 的同意聲明模式 (Consent Mode)" description: "說明如何透過 GTM 自行實作 GDPR Consent Mode，在用戶按下同意後才觸發 GA4 與 Facebook Pixel 追蹤事件，符合歐盟 DMA 法規要求。" canonical_url: "https://blog.markkulab.net/post/gdpr-consent-mode-implementation-guide" author: "Mark Ku" author_url: "https://blog.markkulab.net/author/mark-ku" site: "Mark Ku's Blog" date_published: "2025-01-17 01:01:02 +0800" category: "Google Analytics" tags: ["gdpr", "consent mode", "gtm", "ga4", "facebook pixel", "dma", "privacy", "ecommerce", "compliance"] language: "zh-TW" license: "CC BY 4.0" license_url: "https://creativecommons.org/licenses/by/4.0/" attribution: "轉載或引用請註明作者並附上原文連結" --- # 透過 GTM 客製化實現 GDPR 的同意聲明模式 (Consent Mode) ## 前言 如果你經營的網站主要服務歐美市場，而且使用了多個第三方追蹤工具，那就必須注意 GDPR（歐盟《通用資料保護法》）的符合規定要求 ，2024 年 3 月 6 日生效的歐盟法律《數位市場法》（Digital Markets Act, DMA）上路後，追蹤使用者數據必須在獲得明確同意後才能進行。 本篇文章+會教你如何用 Google 標籤管理工具（Google Tag Manager, GTM）來設定 **Consent Mode**，讓網站在使用者按下「同意」後，才能傳送 GA4 電子商務事件的參數傳送到 Facebook Pixel，確保追蹤行為符合GDPR規範。 ## 為什麼需要了解 DMA？ 《數位市場法》（Digital Markets Act, DMA）是歐盟為了規範科技巨頭（如 Google、Apple、Meta 等）而推出的法規，2024 年正式生效。 對於在歐美經營的網站來說，這項法規要求網站必須清楚告知用戶如何使用他們的個人資料，並且獲得他們的同意後才能進行數據追蹤。 ## 這對網站有什麼影響？ 如果你的網站服務歐美用戶，例如電商或 SaaS 平台，就需要符合這些規範，否則可能面臨高額罰款。 ## 如何實現 GDPR 符合規定的用戶追蹤？ ### 方法選擇 1. **使用現成的 Cookie 管理工具** 現在市面上有很多工具可以幫助你快速實現符合規定，比如 Cookiebot，這種工具不需要寫程式，價格每年大約 7,000 元新台幣，適合中小型企業。 2. **自行開發** 自行開發的方式雖然需要技術支持，但能更靈活地根據需求設計使用者介面和功能，本篇教學採用這方式，並透過 GTM 和程式實作來實現。 ## 教學步驟 ### 事前準備 1. 確保你的 GA4 電子商務事件已經設定完成。這些事件會用來傳遞資料到 Facebook Pixel。 2. 在 GTM 中新增一個變數，用來保存 Facebook Pixel 的追蹤 ID。 ![Facebook 追蹤 ID 設定](https://blog.markkulab.net/content/markku/posts/gdpr-consent-mode-implementation-guide/images/set-variable.png) 3. 設定 GTM 事件模板，確保事件能正確傳送。 ![追蹤代碼範例](https://blog.markkulab.net/content/markku/posts/gdpr-consent-mode-implementation-guide/images/gtm-tracking-code-template.png) 因為先前有串接GA電子商務事件，因此可以透過 GA 的事件的屬性轉送到 Facebook Pixel。 ![Facebook 追蹤代碼範例 - page view ](https://blog.markkulab.net/content/markku/posts/gdpr-consent-mode-implementation-guide/images/gtm-facebook-template-page-view.png) ![Facebook 追蹤代碼範例 - add cart ](https://blog.markkulab.net/content/markku/posts/gdpr-consent-mode-implementation-guide/images/gtm-facebook-template-add-to-cart.png) ![Facebook 追蹤代碼範例 - begin checkout ](https://blog.markkulab.net/content/markku/posts/gdpr-consent-mode-implementation-guide/images/gtm-facebook-template-begin-checkout.png) ![Facebook 追蹤代碼範例 - purchase ](https://blog.markkulab.net/content/markku/posts/gdpr-consent-mode-implementation-guide/images/gtm-facebook-template-purchase.png) ### 前端實作：傳遞同意事件 當使用者按下「同意」按鈕時，可以用以下程式碼將同意事件和屬性透過 data layer值傳遞到GTM ```typescript export function acceptConsentGranted(isAllow: boolean = false) { if (!window || !window.dataLayer) { return; } window.dataLayer.push({ event: 'consent_update', gdpr_consent: { consentGranted: isAllow, // true 或 false timestamp: new Date().toISOString(), }, }); } ``` P.S. dataLayer 是 gtag.js 的基礎，gtag.js 的運作基於 dataLayer， ### 在 GTM 中完成設定 #### 1. 建立變數 新增一個變數，用來接收 `gdpr_consent` 的值。 ![GDPR 變數設定](https://blog.markkulab.net/content/markku/posts/gdpr-consent-mode-implementation-guide/images/set-variable-for-gdpr.png) #### 2. 修改觸發條件 設定 GTM 中的觸發條件，讓事件僅在 `gdpr_consent.consentGranted` 為 `true` 時執行。以下是幾個範例： - **FB Pixel - Add to Cart** ![Add to Cart 觸發條件](https://blog.markkulab.net/content/markku/posts/gdpr-consent-mode-implementation-guide/images/trigger-1.png) - **FB Pixel - Begin Checkout** ![Begin Checkout 觸發條件](https://blog.markkulab.net/content/markku/posts/gdpr-consent-mode-implementation-guide/images/trigger-2.png) - **FB Pixel - Page View** ![Page View 觸發條件](https://blog.markkulab.net/content/markku/posts/gdpr-consent-mode-implementation-guide/images/trigger-3.png) - **FB Pixel - Purchase** ![Purchase 觸發條件](https://blog.markkulab.net/content/markku/posts/gdpr-consent-mode-implementation-guide/images/trigger-4.png) ### 測試與驗證 完成設定後，可以使用 [Tag Assistant](https://tagassistant.google.com/) 進行測試： 1. **模擬使用者未按下「同意」的狀況** 確認此時沒有觸發任何追蹤行為。 ![未同意測試結果](https://blog.markkulab.net/content/markku/posts/gdpr-consent-mode-implementation-guide/images/test-result-1.png) 2. **模擬使用者按下「同意」的狀況** 確認所有追蹤事件成功觸發並傳送資料。 ![同意後測試結果](https://blog.markkulab.net/content/markku/posts/gdpr-consent-mode-implementation-guide/images/test-result-2.png) ## 結論 GDPR 可能會使廣告投放越來越不精準，但實現 GDPR 符合規定不僅僅是遵守法律，對消費者來說，也是一種保障，通過正確配置 GTM 和實作 **Consent Mode**，你可以在保護用戶隱私的同時，繼續獲取商業所需的數據。 ### 參考資料 - [關於《數位市場法》和已連結的服務](https://support.google.com/accounts/answer/14202510?hl=zh-Hant#:~:text=%E3%80%8A%E6%95%B8%E4%BD%8D%E5%B8%82%E5%A0%B4%E6%B3%95%E3%80%8B(DMA,%E8%A6%81%E9%80%A3%E7%B5%90%E7%89%B9%E5%AE%9AGoogle%20%E6%9C%8D%E5%8B%99%E3%80%82)%E4%B8%8A%E8%B7%AF%E5%BE%8C%EF%BC%8C%E8%BF%BD%E8%B9%A4%E4%BD%BF%E7%94%A8%E8%80%85%E6%95%B8%E6%93%9A%E5%BF%85%E9%A0%88%E5%9C%A8%E7%8D%B2%E5%BE%97%E6%98%8E%E7%A2%BA%E5%90%8C%E6%84%8F%E5%BE%8C%E6%89%8D%E8%83%BD%E9%80%B2%E8%A1%8C%E3%80%82) - [什麼是 Google Consent Mode 同意聲明模式？V2 與 V1 有什麼差異？](https://inboundmarketing.com.tw/google-consent-mode-v2/) --- ## 關於本文與作者 本文出自 [Mark Ku's Blog](https://blog.markkulab.net/post/gdpr-consent-mode-implementation-guide) 授權條款： [CC BY 4.0](https://creativecommons.org/licenses/by/4.0/) — 轉載或引用請註明作者並附上原文連結 ### 關於作者 **[Mark Ku](https://blog.markkulab.net/author/mark-ku)** — Software Solution Provider - 10+ 年資深軟體工程師，現為 AI 應用 Builder - 專注大型平台架構設計，從北美電商到AI SaaS訂閱收費系統 - 結合 AI Agent 與自動化，打造高效可演進的產品技術基礎 ### 作者開發的免費工具 以下工具皆可免費使用： - [免費 PDF 簽名工具](https://blog.markkulab.net/tools/pdf-sign): 線上 PDF 簽名工具，瀏覽器內完成手繪、打字、上傳簽名，可拖曳放置、縮放、下載。所有處理都在你的裝置完成，檔案不會上傳。 - [VS Code Refactory](https://blog.markkulab.net/tools/refactory): Refactory 是一款 VS Code 重構擴充套件：34 個重構動作、37 條 code smell 檢查、Code Health 儀表板、18 種語言、534 支測試。懂你的專案慣例：介面放哪、DI 註冊寫在哪、'use client' 該不該加；還會用 git 修改頻率 × 複雜度排出「該先修哪個檔案」，並一鍵把壞味道交給你自己電腦上的 Claude Code 修。免費使用，原始碼不離開你的機器。 - [DB-Kit 資料庫管理工具](https://blog.markkulab.net/tools/db-kit): DB-Kit 是一個用 Tauri + Rust + React 打造的輕量跨平台資料庫管理工具，用單一一致的介面同時管理 MySQL、MariaDB、PostgreSQL、SQL Server、Oracle、SQLite、MongoDB、Redis、Kafka、Elasticsearch 與 RabbitMQ 十一種資料來源：連線密碼以 OS keychain 加密、SSH Tunnel、完整 CRUD、視覺化查詢建構器、多結果集同時顯示、跨連線資料傳輸與比對同步、Excel / CSV 匯入匯出、執行計畫視覺化、ER 圖、排程備份、SQL 壓力測試（p50～p99 延遲百分位）、15 條規則的 SQL 審查、Kafka 訊息瀏覽與監控告警；繁中 / 英文雙語介面，內建 AI 助手（自然語言生成 SQL、AI 審查與調校建議）與命令列工具 dbk。免費開源（MIT），提供 Windows / macOS / Linux 安裝檔。 - [VS Code Super Mermaid](https://blog.markkulab.net/tools/super-mermaid): Super Mermaid 是一款 VS Code 擴充套件：開箱即用的漂亮 Mermaid 圖表，自動上色、即時預覽、滑鼠平移縮放、PNG / SVG 高解析匯出，內建 21 種範本與多種主題。免費開源（MIT）。 - [React Super Mermaid](https://blog.markkulab.net/tools/react-super-mermaid): react-super-mermaid 是一個開源 React 元件庫：一行 即可渲染漂亮的 Mermaid 圖表，內建 colorful / sketch 主題、平移縮放、圖內搜尋、SVG / PNG 高解析匯出。輕量、SSR 安全、完整 TypeScript 型別。免費開源（MIT）。 - [Jira / Confluence Super Mermaid](https://blog.markkulab.net/tools/jira-super-mermaid): Atlassian Forge app：在 Jira issue 與 Confluence 內文直接寫 Mermaid 語法，畫流程圖、時序圖、狀態機與甘特圖。11 種圖表、SVG / PNG 匯出、明暗主題、完整中日韓文字支援。取得 Runs on Atlassian 資格：圖表存在你自己的站台，app 不呼叫任何第三方服務。免費，即將上架 Atlassian Marketplace。 - [Mermaid 線上預覽](https://blog.markkulab.net/tools/mermaid-preview): 在瀏覽器裡寫 Mermaid、即時看圖，整張圖表壓進網址就能分享。免註冊、不上傳伺服器，相容 mermaid.live 的分享連結。 - [React Intl Phone Number](https://blog.markkulab.net/tools/react-intl-phone-number): react-intl-phone-number 是一個開源 React 元件：framework-agnostic、不依賴 antd，提供 E.164 進出、可搜尋國旗 / 國碼下拉、可配置驗證等級（strict / mobile-strict / loose）、可主題化 CSS 與 i18n，電話邏輯由 google-libphonenumber 驅動。輕量、完整 TypeScript 型別。免費開源（MIT）。 - [Uptime Kuma Cluster](https://blog.markkulab.net/tools/uptime-kuma-cluster): 把單機版 Uptime Kuma 改造成高可用叢集：OpenResty + Lua 智慧負載平衡、MariaDB 共享狀態、健康檢查與自動 Failover，附叢集管理 REST API，一行 Docker Compose 啟動。免費開源（MIT）。 - [特教專案](https://blog.markkulab.net/education): 為特殊教育學生製作的學習教材 ### 每日 Podcast - [科技新鮮事](https://blog.markkulab.net/category/tech-news): 每日精選 AI 與科技趨勢，透過語音摘要快速掌握最新技術動態，涵蓋 AI 應用、軟體架構、DevOps 與工程實戰。 — RSS: https://blog.markkulab.net/feed.xml - [AI股市蝦聊](https://blog.markkulab.net/category/ai-stock-chat): 每個交易日用 AI 分析台股盤勢，以雙人對話聊當天的盤中觀察與隔日預測。 — RSS: https://blog.markkulab.net/ai-stock-chat/feed.xml ### 電子報 [訂閱電子報](https://blog.markkulab.net/subscribe) — 第一時間收到新文章通知，無垃圾信、隨時可取消訂閱。