Guide

Google Consent Mode v2 Setup

Google now requires Consent Mode v2 for sites using Google Ads, Analytics, or Tag Manager in the EEA. Without it, you lose conversion modeling data and may see warnings in your Google Ads dashboard. Here's how to set it up with SafeBanner in under 5 minutes.

What Google requires

Since March 2024, Google requires websites serving ads or using analytics in the European Economic Area (EEA) to implement Consent Mode v2. This means:

Default denied signals must be sent before any Google tags load.
Consent update signals must be sent after the user makes a choice.
Google tags must respect analytics_storage, ad_storage, ad_user_data, and ad_personalization signals.

If these signals are missing, Google Ads may stop conversion modeling for EEA traffic, and Google Analytics may show a warning banner in your dashboard.

How SafeBanner handles Consent Mode v2

SafeBanner sends all four Google Consent Mode v2 signals automatically. No configuration needed beyond adding the script tag.

SafeBanner category	Google signal	Default
Analytics	`analytics_storage`	denied
Marketing	`ad_storage`	denied
Marketing	`ad_user_data`	denied
Marketing	`ad_personalization`	denied

SafeBanner calls gtag('consent', 'default', ...) immediately in the constructor (before DOM ready), and gtag('consent', 'update', ...) after the visitor makes a choice.

Step 1: Add SafeBanner before Google tags

Load order matters. SafeBanner must load before any Google tags so the default denied signals are in place before Google's scripts initialize.

In your <head>, SafeBanner first:

<head>
  <!-- 1. SafeBanner FIRST -->
  <script src="https://www.safebanner.com/safebanner.js"></script>

  <!-- 2. Google tag AFTER -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXX"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'G-XXXXXXXX');
  </script>
</head>

That's it for the Free tier. SafeBanner will show a consent banner, send default denied signals to Google, and update them after the visitor chooses. Google tags will fire with analytics_storage: denied until consent is granted.

Advanced vs Basic mode: By default, SafeBanner uses advanced mode, which lets Google tags fire with redacted data for conversion modeling. Set data-google-consent="basic" to prevent tags from firing entirely when denied.

Step 2: Understand the enforcement gap

The Free tier handles Consent Mode signaling correctly. But there's a gap: Google tags still load and execute regardless of consent.

In advanced mode, this is by design — Google uses the denied signal to send cookieless pings for conversion modeling. But if you want scripts to not run at all until consent, you need to block them.

This matters for:

Sites using basic mode where tags should not fire at all when denied
Third-party marketing scripts (Meta Pixel, LinkedIn, TikTok) that don't respect Consent Mode
Strict interpretations of GDPR where any script execution before consent is a concern

Step 3: Block scripts until consent (Pro)

Pro adds a consent enforcement layer. Mark any script with type="text/safebanner" and it won't load until the matching consent category is granted.

Block Google Analytics until analytics consent:

<!-- SafeBanner with Pro license -->
<script
  src="https://www.safebanner.com/safebanner.js"
  data-project-key="your-pro-key"
></script>

<!-- This script is BLOCKED until analytics consent -->
<script
  type="text/safebanner"
  data-consent="analytics"
  data-src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXX"
></script>

<!-- Inline config is also blocked until analytics consent -->
<script type="text/safebanner" data-consent="analytics">
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXX');
</script>

Block Meta Pixel until marketing consent:

<script type="text/safebanner" data-consent="marketing">
  !function(f,b,e,v,n,t,s)
  {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
  n.callMethod.apply(n,arguments):n.queue.push(arguments)};
  if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
  n.queue=[];t=b.createElement(e);t.async=!0;
  t.src=v;s=b.getElementsByTagName(e)[0];
  s.parentNode.insertBefore(t,s)}(window, document,'script',
  'https://connect.facebook.net/en_US/fbevents.js');
  fbq('init', 'YOUR_PIXEL_ID');
  fbq('track', 'PageView');
</script>

When the visitor grants consent, SafeBanner replaces the placeholder with a real <script> tag and the code executes. If consent is never granted, the script never runs.

Step 4: Re-prompt after consent expires (Pro)

GDPR guidance recommends re-obtaining consent periodically. Pro supports automatic re-prompting:

<script
  src="https://www.safebanner.com/safebanner.js"
  data-project-key="your-pro-key"
  data-consent-expiry-days="180"
></script>

After 180 days, SafeBanner clears the stored consent and re-shows the banner. No server needed — it checks the timestamp in localStorage.

Verify it works

Open your browser DevTools console and check:

// Check consent state
window.safeBanner.getConsent()
// → { necessary: true, analytics: false, marketing: false, timestamp: ... }

// Check a specific category
window.safeBanner.hasConsentFor('analytics')
// → false (before consent)

// After clicking "Accept All", check again
window.safeBanner.hasConsentFor('analytics')
// → true

To verify Google Consent Mode signals, open the Network tab and look for requests to google-analytics.com or googletagmanager.com. In Advanced mode, you'll see cookieless pings with gcs=G100 (denied) before consent and gcs=G111 (granted) after.

React and Next.js

SafeBanner is a plain script tag — it works in any framework. For Next.js, add it to your root layout:

app/layout.tsx

import Script from 'next/script';

export default function RootLayout({ children }) {
  return (
    <html>
      <head>
        {/* SafeBanner must load before Google tags */}
        <Script
          src="https://www.safebanner.com/safebanner.js"
          strategy="beforeInteractive"
        />
      </head>
      <body>{children}</body>
    </html>
  );
}

Use strategy="beforeInteractive" to ensure SafeBanner loads in <head> before any Google tags.

Summary

1.Free: Add one script tag before your Google tags. SafeBanner sends Consent Mode v2 signals automatically. Done.

2.Pro: Mark scripts with type="text/safebanner" to block them until consent. Add data-consent-expiry-days to re-prompt periodically.

Full documentation Try the demo Upgrade to Pro