Set up consent mode on websites

This page is for developers who maintain their own consent solution on their website and want to integrate consent mode. For an introduction to consent mode, read Consent mode overview. If you use a Consent Management Platform (CMP) to obtain user consent, learn more about how to set up consent mode with a CMP.

You can implement consent mode in a basic or advanced way. Check your company's guidelines to pick an implementation method and which defaults to set. Learn more about basic versus advanced consent mode.

Before you begin

Take the following into consideration before implementing consent mode:

If you use Tag Manager and want to maintain your own banner, the recommended approach is loading your banner through the Tag Manager container. To do so, you need to create a consent mode template. Alternatively, you can use a consent mode template from the Community Template Gallery.
If you use gtag.js, make sure you have installed the Google tag on every page of your website. The consent mode code gets added to each page of your website.

Set up consent mode

With a basic consent mode implementation, you are blocking the Google tag from loading until a user has granted consent. To implement basic consent mode:

Before a user grants consent, block Analytics collection and set the default consent state.
After a user grants consent, enable Analytics collection.

gtag.js

In a web page's <head> tag, set up the dataLayer object before your consent banner code. Establish your consent defaults in the data layer.

This doesn't trigger your Google tag, since you haven't loaded the Google tag library yet.

For example:

  <script>
  window.dataLayer = window.dataLayer || [];
  function gtag() { dataLayer.push(arguments); }
  gtag('consent', 'default', {
    'ad_user_data': 'denied',
    'ad_personalization': 'denied',
    'ad_storage': 'denied',
    'analytics_storage': 'denied',
    'wait_for_update': 500,
  });
  gtag('js', new Date());
  gtag('config', 'Google tag ID');
  </script>

Add a function that monitors interactions with your consent buttons and save the interaction using localStorage or cookies. Tip: Make sure to have identifiers for all buttons in your consent banner.
Load the consent banner.
Push the consent banner interaction to the data layer.
Load the Google tag when the user grants consent.

  grantButton.addEventListener("click", function() {
    localStorage.setItem("consentGranted", "true");
    function gtag() { dataLayer.push(arguments); }

    gtag('consent', 'update', {
      ad_user_data: 'granted',
      ad_personalization: 'granted',
      ad_storage: 'granted',
      analytics_storage: 'granted'
    });
  });

  // Load gtag.js script.
  var gtagScript = document.createElement('script');
  gtagScript.async = true;
  gtagScript.src = 'https://www.googletagmanager.com/gtag/js?id=Google tag ID';

  var firstScript = document.getElementsByTagName('script')[0];
  firstScript.parentNode.insertBefore(gtagScript,firstScript);

Tag Manager

In a web page's <head> tag, set up the dataLayer object before you load your consent banner code. Establish your consent defaults in the data layer.

This doesn't trigger your Tag Manager container, since you haven't loaded the Google Manager library yet.

For example:

  <script>
  window.dataLayer = window.dataLayer || [];
  function gtag() { dataLayer.push(arguments); }
  gtag('consent', 'default', {
    'ad_user_data': 'denied',
    'ad_personalization': 'denied',
    'ad_storage': 'denied',
    'analytics_storage': 'denied',
    'wait_for_update': 500,
  });
  dataLayer.push({'gtm.start': new Date().getTime(), 'event': 'gtm.js'});
  </script>
  ```

Add a function that monitors interactions with your consent buttons and save the interaction using localStorage or cookies. Tip: Make sure to have identifiers for all buttons in your consent banner.
Load the consent banner. Don't load the consent banner through your Tag Manager container, since you are blocking it until a user grants consent.
Push the consent banner interaction to the data layer.
Load the Tag Manager container when the user grants consent.

  grantButton.addEventListener("click", function() {
    localStorage.setItem("consentGranted", "true");
    function gtag() { dataLayer.push(arguments); }

    gtag('consent', 'update', {
      ad_user_data: 'granted',
      ad_personalization: 'granted',
      ad_storage: 'granted',
      analytics_storage: 'granted'
    });
  });

  // Load Tag Manager script.
  var gtmScript = document.createElement('script');
  gtmScript.async = true;
  gtmScript.src = 'https://www.googletagmanager.com/gtm.js?id=Container ID';

  var firstScript = document.getElementsByTagName('script')[0];
  firstScript.parentNode.insertBefore(gtmScript,firstScript);

As a part of Google's ongoing commitment to a privacy-centric digital advertising ecosystem, we are strengthening the enforcement of our EU user consent policy.

Learn more about Google's Updates to consent mode for traffic in European Economic Area (EEA).

Consent mode users need to send two new parameters in addition to ad_storage and analytics_storage:

Field Name	Allowed Values	Description
`ad_user_data`	`'granted' \| 'denied'`	Sets consent for sending user data related to advertising to Google.
`ad_personalization`	`'granted' \| 'denied'`	Sets consent for personalized advertising.

Next steps

Verify consent mode works

Legacy tag controls

If you use legacy tags, such as ga.js, analytics.js, or conversion.js, update to gtag.js or Google Tag Manager.

To learn more about other legacy tag's privacy controls, see the following documentation: