Google Consent Mode v2: Implementation via GTM and Vanilla JS

If you are operating within the European Economic Area (EEA) or handling data from European users, Google Consent Mode v2 is no longer a “nice-to-have” feature—it is a strict requirement as of March 2024. Driven by the Digital Markets Act (DMA), Google has fundamentally changed how its advertising and analytics platforms process data.

Failing to implement Consent Mode v2 means bidding farewell to remarketing capabilities and watching your conversion tracking severely degrade. As data architects, our goal is to maintain data fidelity while strictly adhering to privacy protocols. Here is a deep dive into why Consent Mode v2 matters, how it impacts your GMP stack, and how to implement it correctly.

Why is Consent Mode v2 So Crucial?

At its core, Consent Mode bridges the gap between user privacy choices and your data collection systems. When a user interacts with your cookie banner, Consent Mode communicates their choices (granted or denied) to Google’s tags.

The introduction of v2 brought two critical new parameters specifically targeting advertising:

1. ad_user_data: Sets consent for sending user data to Google for advertising purposes.
2. ad_personalization: Sets consent for personalized advertising (remarketing).

What It Does for Google Tags (Ads, Floodlights, SA360, GA4)

When properly configured in Advanced Consent Mode, tags load before the user makes a choice, but they drastically change their behavior based on the consent state:

• Google Analytics 4 (GA4): If analytics_storage is denied, GA4 stops reading or writing cookies. Instead, it sends cookieless “pings.” GA4 then uses machine learning to bridge the gap through Behavioral Modeling, allowing you to see estimated user journeys without compromising privacy.
• Google Ads & SA360: If ad_storage or ad_user_data is denied, advertising tags send cookieless conversion pings. Google’s engine then utilizes Conversion Modeling to recover lost conversions, ensuring your ROAS calculations and automated bidding algorithms don’t collapse.
• Floodlights (Campaign Manager 360): Similar to Google Ads, Floodlight tags respect the consent state, utilizing aggregate data and modeling to attribute conversions accurately across display and video campaigns without relying on third-party cookies.

Without v2, Google will simply drop unconsented data, crippling your measurement and audience building.

Method 1: Implementing via Google Tag Manager (GTM)

For most setups, GTM is the cleanest way to manage consent. It acts as the central nervous system for your tracking architecture.

Step 1: Enable Consent Overview

1. Go to your GTM Workspace.
2. Navigate to Admin > Container Settings.
3. Check the box for Enable consent overview. This unlocks a shield icon in your Tags view, allowing you to easily manage consent settings across all tags.

Step 2: Use a Consent Management Platform (CMP) Template or a Consent Mode Template

Instead of building a custom logic, utilize a certified CMP (like Cookiebot, OneTrust, or CookieYes) from the GTM Community Template Gallery.

1. Add the CMP template to your workspace.
2. Configure it with your CMP ID.
3. Set the trigger to Consent Initialization – All Pages. This is a special trigger that fires before standard Page Views, ensuring consent defaults are set before any Google Tags fire.

If your CMP is implemented directly into your website, I recommend using the Template “gtm-templates-simo-ahava” from Simo Ahava as it is always up to date and brings the best functionality.

For Consent Mode to work, add two instances of the Template as Tags.

1. Default Tag: Fire on Consent Initialization – All Pages and set up everything to “Denied”.
2. Update Tag: Fire on Consent Update from your CMP. Set the Parameters accoring the user’s choices.

Step 3: Configure Tag Consent Settings

Google Tags (GA4, Google Ads) have built-in consent checks. You don’t need to block them from firing. Instead:

1. Open your GA4 or Google Ads tag.
2. Go to Advanced Settings > Consent Settings.
3. Ensure it requires ad_storage and/or analytics_storage.
4. The tag will handle the rest—firing normally if granted, or sending cookieless pings if denied.

Method 2: Implementing via Vanilla JavaScript (Directly)

If you are building a custom, highly optimized frontend or a Single Page Application (SPA) where GTM is too heavy, implementing Consent Mode directly via vanilla JS is the way to go.

This requires two distinct steps: setting the Default state before tags load, and sending an Update state when the user interacts with your banner.

1. The Default State (Place in <head>)

This script must execute before your global site tag (gtag.js). It tells Google to assume everything is denied by default (for EEA users).

JavaScript

<script>
  // Initialize the dataLayer
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}

  // Set default consent to 'denied' for all parameters
  gtag('consent', 'default', {
    'ad_storage': 'denied',
    'ad_user_data': 'denied',
    'ad_personalization': 'denied',
    'analytics_storage': 'denied',
    'wait_for_update': 500 // Gives the CMP 500ms to load before tags fire
  });
</script>

<!-- Now load your standard gtag.js script below this -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

2. The Update State (Triggered by User Action)

When the user clicks “Accept” (or customizes their choices) on your cookie banner, you must capture that event and push an update to the dataLayer.

Here is an example of an event listener you would attach to your custom banner’s “Accept All” button:

JavaScript

document.getElementById('btn-accept-all').addEventListener('click', function() {
  
  // Push the updated consent state to Google
  gtag('consent', 'update', {
    'ad_storage': 'granted',
    'ad_user_data': 'granted',
    'ad_personalization': 'granted',
    'analytics_storage': 'granted'
  });

  // Hide the banner and save the preference in your own local cookie
  document.getElementById('cookie-banner').style.display = 'none';
  setCookie('user_consent_saved', 'true', 365);
});

If necessary, adjust the ID of the Button “btn-accept-all”.

Summary

Implementing Google Consent Mode v2 is the definitive way to future-proof your digital analytics and advertising infrastructure. Whether deploying through GTM’s streamlined interface or hardcoding it via vanilla JavaScript for maximum performance, setting proper default and update states ensures you remain legally compliant while empowering Google’s machine learning to recover lost data.