Using Google Gtag with Cookiebot

What is gtag (Global Site Tag) and do I need to use it?

In short, gtag.js is a convenient way to embed all the Google tools and products in use on your website (such as Google Analytics, Google Ads etc.) using a single tag.

If you currently utilize Google Tag Manager (GTM) you do not need to use the gtag.js - you can continue using GTM just as before (see our general GTM installation guide here: https://support.cookiebot.com/hc/en-us/articles/360003793854-Google-Tag-Manager-deployment).

How do I connect gtag with Cookiebot?

As of September 3rd, 2020, gtag supports Google Consent Mode. Cookiebot integrates to this Google API, so that gtag's behavior automatically changes in accordance with a visitor's consent. All you need to do is to add an additional code snippet before your current gtag snippet:

<script data-cookieconsent="ignore">
    window.dataLayer = window.dataLayer || [];
    function gtag() {
        dataLayer.push(arguments);
    }
    gtag("consent", "default", {
        ad_storage: "denied",
        analytics_storage: "denied",
        functionality_storage: "denied",
        personalization_storage: "denied",
        security_storage: "granted",
        wait_for_update: 500,
    });
    gtag("set", "ads_data_redaction", true);
</script>

<script
  src="https://www.googletagmanager.com/gtag/js?id=UA-00000000-0"
  data-cookieconsent="ignore"
  async 
></script>

<script data-cookieconsent="ignore">
  gtag('js', new Date());
  gtag('config', 'UA-00000000-0');
</script>

When you embed your Cookiebot tag on the site as well, Cookiebot will automatically send consent data to gtag through the Consent Mode API. 

If you have enabled auto-blocking in Cookiebot, you also need to apply the tag attribute data-cookieconsent="ignore" to all three script tags as above.

You may change the default values of ad_storage and analytics_storage to 'granted' and set ads_data_redaction to 'false' if you want to default to an opt-in before the end user has submitted consent, for example allowing for a default opt-in under CCPA.

How do I disable Consent Mode?

As mentioned above, Cookiebot will by default send consent data using the Consent Mode API. If you for any reason prefer not making use of the Consent Mode API, you have the option to disable it.

To disable Consent Mode, add the following attribute to the Cookiebot script tag:

data-consentmode="disabled"

This could look similar to this:

<script
  id="Cookiebot"
  type="text/javascript"
  src="https://consent.cookiebot.com/uc.js"
  data-cbid="12345678-90ab-cdef-1234-567890abcdef"
  data-blockingmode="auto"
  data-consentmode="disabled"
></script>

Alternatively, you can also choose to add this setting as a query parameter:

<script
  id="Cookiebot"
  type="text/javascript"
  src="https://consent.cookiebot.com/uc.js?consentmode=disabled"
  data-cbid="12345678-90ab-cdef-1234-567890abcdef"
  data-blockingmode="auto"
></script>

Important! If you disable Consent Mode, please ensure that the gtag scripts are not marked up with the data-cookieconsent="ignore" attribute. Having this attribute without also having Consent Mode enabled allows cookies to be set without prior consent.