Google Consent Mode v2 setup, step by step

#The four signals of Consent Mode v2

Consent Mode is a small protocol between your page and Google tags. Before a tag reads or writes cookies, it checks a set of consent types, each either granted or denied. Version 2, introduced for the Digital Markets Act, added two signals to the original two, and all four are now expected for traffic from the European Economic Area:

• ad_storage: cookies and identifiers for advertising.
• ad_user_data: sending user data to Google for advertising.
• ad_personalization: personalized advertising and remarketing.
• analytics_storage: cookies for analytics, such as the Google Analytics client id.

There are also functionality_storage, personalization_storage and security_storage. cookieowl maps them all to categories: the three ad signals follow marketing, analytics follows analytics, functionality and personalization follow preferences and security is always granted.

#Order matters: default, then update

The default command must run before any Google tag, and the update must follow every choice. Getting the order wrong is the most common Consent Mode bug: if gtag.js reads the dataLayer before the default exists, the first hit goes out as if consent were granted. That is why cookieowl must be the first script in the head. It writes this before anything else can run:

gtag('consent', 'default', {
  ad_storage: 'denied',
  ad_user_data: 'denied',
  ad_personalization: 'denied',
  analytics_storage: 'denied',
  functionality_storage: 'denied',
  personalization_storage: 'denied',
  security_storage: 'granted',
  wait_for_update: 500,
});
gtag('set', 'ads_data_redaction', true);

// later, when the visitor accepts analytics only
gtag('consent', 'update', { analytics_storage: 'granted', ad_storage: 'denied' });

wait_for_update tells tags that load before the visitor's stored choice is applied to wait that many milliseconds for an update. Returning visitors get their update in the same tick as the default, so tags never see a wrong state.

#Setup with gtag.js

Turn Consent Mode on with one attribute. Keep your gtag snippet as it is, but mark it so it waits for analytics (basic mode):

<head>
  <script src="https://cdn.jsdelivr.net/npm/cookieowl@0.1.0/dist/cookieowl.js"
    data-policy-url="/privacy" data-consent-mode></script>

  <script type="text/plain" data-cookieowl="analytics" async
    src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX"></script>
  <script type="text/plain" data-cookieowl="analytics">
    window.dataLayer = window.dataLayer || [];
    function gtag() { dataLayer.push(arguments); }
    gtag('js', new Date());
    gtag('config', 'G-XXXXXXX');
  </script>
</head>

For advanced mode, load the Google tags normally (no text/plain) and set data-consent-mode="advanced". The auto blocker then leaves gtag.js and Tag Manager alone, while still holding the Meta Pixel, Hotjar and the rest.

#Setup with Google Tag Manager

With Tag Manager you have two choices. In basic mode, hold the whole container until analytics is accepted: mark the GTM snippet with type="text/plain" data-cookieowl="analytics", or let data-auto-block catch gtm.js. Nothing inside the container runs before consent, which is the simplest setup to audit.

If you prefer to let the container load and decide per tag, use data-consent-mode="advanced". Tags with built in consent checks (Google Analytics, Google Ads, Floodlight) read the consent state themselves. For other tags, turn on Require additional consent in their settings, or fire them from the cookieowl_consent event that cookieowl pushes to the dataLayer on every choice, reading the categories from the cookieowl variable it carries.

{
  event: 'cookieowl_consent',
  cookieowl: { necessary: true, preferences: false, analytics: true, marketing: false }
}

#Region specific defaults

If you serve visitors outside the EEA and want different defaults there, list regions with ISO 3166-2 codes. Region commands are sent before the global default, and the most specific region wins:

cookieowl.init({
  consentMode: {
    waitForUpdate: 500,
    regions: [
      { region: ['US-CA', 'US-CO'], analytics_storage: 'denied', ad_storage: 'denied' },
      { region: ['US'], analytics_storage: 'granted' },
    ],
    urlPassthrough: true,
  },
});

#Questions

#Keep reading

Chapter VHow to block Google Analytics until consentHow to block Google Analytics 4 until cookie consent: hold gtag.js and the config as text/plain, catch injected tags with auto mode, and verify it in DevTools.7 min readChapter IIIWhat makes a cookie banner GDPR compliantWhat makes a cookie banner GDPR compliant: prior blocking, Reject on the first layer, no pre-ticked boxes, easy withdrawal and proof. With a free, open source setup.9 min readChapter VIICookie consent in Next.js, App Router and Pages RouterAdd a cookie consent banner to Next.js: load cookieowl with next/script beforeInteractive, gate Google Analytics and embeds, and read consent in client components.8 min read