--- title: "Custom GTM Implementation of GDPR Consent Mode" description: "This article explains how to implement GDPR Consent Mode yourself using GTM, triggering GA4 and Facebook Pixel tracking events only after the user gives consent, to comply with the EU's DMA regulations." canonical_url: "https://blog.markkulab.net/en/post/gdpr-consent-mode-implementation-guide" author: "Mark Ku" author_url: "https://blog.markkulab.net/en/author/mark-ku" site: "Mark Ku's Tech Notes" 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: "en" license: "CC BY 4.0" license_url: "https://creativecommons.org/licenses/by/4.0/" attribution: "when reusing or quoting, credit the author and link back to the original" --- # Custom GTM Implementation of GDPR Consent Mode ## Introduction If you run a website that primarily serves European and American markets and uses multiple third-party tracking tools, you must pay attention to GDPR (General Data Protection Regulation) compliance requirements. With the EU's Digital Markets Act (DMA) going into effect on March 6, 2024, tracking user data now requires explicit consent. This article will teach you how to use Google Tag Manager (GTM) to set up **Consent Mode**. This ensures that GA4 e-commerce event parameters are only sent to the Facebook Pixel after the user clicks "Agree," making your tracking practices GDPR-compliant. ## Why Do You Need to Understand the DMA? The Digital Markets Act (DMA) is a regulation introduced by the EU to regulate tech giants (like Google, Apple, Meta, etc.) that officially went into effect in 2024. For websites operating in Europe and the US, this regulation requires that you clearly inform users how their personal data is used and obtain their consent before tracking any data. ## How Does This Affect Websites? If your website serves users in Europe and the US, such as an e-commerce or SaaS platform, you need to comply with these regulations to avoid potentially hefty fines. ## How to Implement GDPR-Compliant User Tracking? ### Choosing a Method 1. **Use an Off-the-Shelf Cookie Management Tool** There are many tools on the market today, like Cookiebot, that can help you achieve compliance quickly. These tools don't require coding and cost around NT$7,000 per year, making them suitable for small to medium-sized businesses. 2. **Custom Development** Although custom development requires technical support, it offers more flexibility in designing the user interface and functionality to meet specific needs. This tutorial will take this approach, using GTM and custom code for implementation. ## Tutorial Steps ### Prerequisites 1. Ensure your GA4 e-commerce events are already set up. These events will be used to pass data to the Facebook Pixel. 2. In GTM, create a new variable to store your Facebook Pixel tracking ID. ![Facebook Tracking ID Setup](https://blog.markkulab.net/content/markku/posts/gdpr-consent-mode-implementation-guide/images/set-variable.png) 3. Configure the GTM event template to ensure events are sent correctly. ![Tracking Tag Example](https://blog.markkulab.net/content/markku/posts/gdpr-consent-mode-implementation-guide/images/gtm-tracking-code-template.png) Since we've already integrated GA e-commerce events, we can forward the properties of these GA events to the Facebook Pixel. ![Facebook Tracking Tag Example - page view](https://blog.markkulab.net/content/markku/posts/gdpr-consent-mode-implementation-guide/images/gtm-facebook-template-page-view.png) ![Facebook Tracking Tag Example - add to cart](https://blog.markkulab.net/content/markku/posts/gdpr-consent-mode-implementation-guide/images/gtm-facebook-template-add-to-cart.png) ![Facebook Tracking Tag Example - begin checkout](https://blog.markkulab.net/content/markku/posts/gdpr-consent-mode-implementation-guide/images/gtm-facebook-template-begin-checkout.png) ![Facebook Tracking Tag Example - purchase](https://blog.markkulab.net/content/markku/posts/gdpr-consent-mode-implementation-guide/images/gtm-facebook-template-purchase.png) ### Frontend Implementation: Passing the Consent Event When a user clicks the "Agree" button, you can use the following code to pass the consent event and its properties to GTM via the data layer. ```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. The `dataLayer` is the foundation of `gtag.js`; the operation of `gtag.js` is based on the `dataLayer`. ### Finalizing the Setup in GTM #### 1. Create a Variable Create a new variable to receive the value of `gdpr_consent`. ![GDPR Variable Setup](https://blog.markkulab.net/content/markku/posts/gdpr-consent-mode-implementation-guide/images/set-variable-for-gdpr.png) #### 2. Modify Trigger Conditions Set the trigger conditions in GTM so that events only fire when `gdpr_consent.consentGranted` is `true`. Here are a few examples: - **FB Pixel - Add to Cart** ![Add to Cart Trigger Condition](https://blog.markkulab.net/content/markku/posts/gdpr-consent-mode-implementation-guide/images/trigger-1.png) - **FB Pixel - Begin Checkout** ![Begin Checkout Trigger Condition](https://blog.markkulab.net/content/markku/posts/gdpr-consent-mode-implementation-guide/images/trigger-2.png) - **FB Pixel - Page View** ![Page View Trigger Condition](https://blog.markkulab.net/content/markku/posts/gdpr-consent-mode-implementation-guide/images/trigger-3.png) - **FB Pixel - Purchase** ![Purchase Trigger Condition](https://blog.markkulab.net/content/markku/posts/gdpr-consent-mode-implementation-guide/images/trigger-4.png) ### Testing and Verification Once the setup is complete, you can use [Tag Assistant](https://tagassistant.google.com/) to test it: 1. **Simulate a user who has not clicked "Agree"** Confirm that no tracking events are fired. ![Test Result Without Consent](https://blog.markkulab.net/content/markku/posts/gdpr-consent-mode-implementation-guide/images/test-result-1.png) 2. **Simulate a user who has clicked "Agree"** Confirm that all tracking events are successfully fired and data is sent. ![Test Result After Consent](https://blog.markkulab.net/content/markku/posts/gdpr-consent-mode-implementation-guide/images/test-result-2.png) ## Conclusion GDPR might make ad targeting less precise, but achieving GDPR compliance is about more than just following the law; it's also a safeguard for consumers. By correctly configuring GTM and implementing **Consent Mode**, you can continue to acquire the data your business needs while protecting user privacy. ### References - [About the Digital Markets Act and linked services](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) - [What is Google Consent Mode? What's the Difference Between V2 and V1?](https://inboundmarketing.com.tw/google-consent-mode-v2/) --- ## About this article and its author Originally published on [Mark Ku's Tech Notes](https://blog.markkulab.net/en/post/gdpr-consent-mode-implementation-guide) License: [CC BY 4.0](https://creativecommons.org/licenses/by/4.0/) — when reusing or quoting, credit the author and link back to the original ### About the author **[Mark Ku](https://blog.markkulab.net/en/author/mark-ku)** — Software Solution Provider - 10+ years senior software engineer, now an AI Builder - Focused on large-platform architecture — North-American e-commerce, AI SaaS subscription billing - Combining AI Agents and automation to build evolvable product foundations ### Free tools built by the author All of these are free to use: - [Free PDF Sign Tool](https://blog.markkulab.net/en/tools/pdf-sign): Online PDF sign tool — draw, type, or upload a signature, then drag, resize, and download. Everything runs in your browser; nothing is uploaded. - [VS Code Refactory](https://blog.markkulab.net/en/tools/refactory): Refactory is a VS Code refactoring extension: 34 actions plus a 37-rule code-smell inspection layer with a Code Health dashboard, across 18 languages, backed by 534 tests. It learns your repo's conventions: where interfaces live, where DI is registered, whether 'use client' belongs. It ranks files by git churn × complexity so you know what to fix first, and hands any smell to the Claude Code already on your machine. Free to use, and your source never leaves your computer. - [DB-Kit Database Manager](https://blog.markkulab.net/en/tools/db-kit): DB-Kit is a lightweight, cross-platform database manager built with Tauri + Rust + React. Manage MySQL, MariaDB, PostgreSQL, SQL Server, Oracle, SQLite, MongoDB, Redis, Kafka, Elasticsearch and RabbitMQ from one consistent interface: passwords encrypted in the OS keychain, SSH tunnels, full CRUD, a visual query builder, stacked multi-statement result sets, cross-connection data transfer and compare/sync, Excel / CSV import & export, visualized execution plans, ER diagrams, scheduled backups, SQL stress testing with p50–p99 latency percentiles, a 15-rule SQL review engine, Kafka message browsing with monitoring & alerts, a bilingual UI (Traditional Chinese / English), a built-in AI assistant (natural-language SQL, AI review and tuning advice) and the dbk CLI. Free and open source (MIT), with installers for Windows, macOS and Linux. - [VS Code Super Mermaid](https://blog.markkulab.net/en/tools/super-mermaid): Super Mermaid is a VS Code extension for beautiful Mermaid diagrams out of the box: auto-colored live preview, mouse pan & zoom, high-res PNG / SVG export, 21 templates and multiple themes. Free and open source (MIT). - [React Super Mermaid](https://blog.markkulab.net/en/tools/react-super-mermaid): react-super-mermaid is an open-source React component library: render beautiful Mermaid diagrams with a single , with built-in colorful / sketch themes, pan & zoom, in-diagram search, and high-res SVG / PNG export. Lightweight, SSR-safe, fully typed. Free and open source (MIT). - [Jira / Confluence Super Mermaid](https://blog.markkulab.net/en/tools/jira-super-mermaid): An Atlassian Forge app: write Mermaid syntax directly inside a Jira issue or a Confluence page and get flowcharts, sequence diagrams, state machines and Gantt charts. 11 diagram types, SVG / PNG export, light and dark themes, full CJK support. Runs on Atlassian: your diagrams live in your own site and the app calls no third-party service. Free, coming soon to the Atlassian Marketplace. - [Mermaid Live Preview](https://blog.markkulab.net/en/tools/mermaid-preview): Write Mermaid in your browser, see it render instantly, and share the whole diagram as a single link. No sign-up, nothing uploaded to a server, and mermaid.live share links work as-is. - [React Intl Phone Number](https://blog.markkulab.net/en/tools/react-intl-phone-number): react-intl-phone-number is an open-source React component: framework-agnostic and antd-free, with E.164 in/out, a searchable flag / country-code dropdown, configurable validation levels (strict / mobile-strict / loose), themeable CSS, and i18n — phone logic powered by google-libphonenumber. Lightweight and fully typed. Free and open source (MIT). - [Uptime Kuma Cluster](https://blog.markkulab.net/en/tools/uptime-kuma-cluster): Turn single-node Uptime Kuma into a highly available cluster: OpenResty + Lua smart load balancing, shared MariaDB state, health checks and automatic failover, plus cluster-management REST APIs. One Docker Compose command to start. Free and open source (MIT). - [Special Education](https://blog.markkulab.net/en/education): Learning materials crafted for special education students ### Daily podcasts - [Mark's Tech Insights — Daily AI News](https://blog.markkulab.net/en/category/tech-news): Daily curated AI and tech trends. Catch the latest developments via audio summaries — covering AI applications, software architecture, DevOps, and engineering practice. — RSS: https://blog.markkulab.net/feed.xml - [AI股市蝦聊](https://blog.markkulab.net/en/category/ai-stock-chat): Every trading day, an AI-analyzed take on the Taiwan stock market, delivered as a two-host conversation covering the session and the next-day outlook. — RSS: https://blog.markkulab.net/ai-stock-chat/feed.xml - [開源好物週報](https://blog.markkulab.net/en/category/open-source-weekly): A weekly two-host pick of free open-source tools surfaced from real Hacker News, GitHub, and Reddit buzz — what pain they solve and the fastest way to get started. — RSS: https://blog.markkulab.net/open-source-weekly/feed.xml ### Newsletter [Subscribe to the newsletter](https://blog.markkulab.net/en/subscribe) — Be the first to know about new posts. No spam, unsubscribe anytime.