Google Consent Mode

UPDATE 13 Mar 2024:
‍
- Updated custom code

UPDATE 11 Mar 2024:
‍
- Added ad_user_data and ad_personalization in line with Google Consent Mode V2.
- Changed buttons to use the custom element

How to add it to your site?

Here is a simple implementation to integrate a fully customisable Google Consent Mode solution in your Webflow site.

1. Add the following code at the end of the <head> tag

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

  // Set default consent to 'denied' as a placeholder
  if(localStorage.getItem('consentMode') === null){
    gtag('consent', 'default', {
      'ad_storage': 'denied',
      'ad_user_data': 'denied',
      'ad_personalization': 'denied',
      'analytics_storage': 'denied',
      'personalization_storage': 'denied',
      'security_storage': 'denied',
      'functionality_storage': 'denied',
    });
    // To further redact your ads data when ad_storage is denied, set ads_data_redaction to true
    gtag('set', 'ads_data_redaction', false);
  } else {
    gtag('consent', 'default', JSON.parse(localStorage.getItem('consentMode')));
  }
</script>

This needs to be before the Google Tag Manager script.

You can adjust the default values from 'denied' to 'granted'. To be GDPR complied keep them as 'denied'.

2. Copy the Cookie Consent component from this template

You can fully customise the look and feel of the cookie consent in Webflow and change any class names.
Add the component to all of your pages.
Don't change the IDs of the 'cookie-banner' and 'cookie-icon' unless you change them in the custom code.

3. In Google Tag Manager enable the Consent Mode

1. Log into Google Tag Manager.
2. Go to Admin > Container Settings > tick 'Enable Consent Overview'
3. In Workspace > Tags you now see a shield appeared on the top right. Clicking on it you can set the consent for each tag.

4. Test

You can test the implementation with Google Tag Assistant.

Why use Google Consent Mode for GA4?

Google Consent Mode is an important tool in the context of navigating data privacy regulations and user consent. Here are some key benefits:

Reduced Data Loss

Minimises data loss from users who block cookies, by using alternative methods to gather essential analytics and ad performance data. With traditional cookie consents, if the user rejects cookies, the analytic scripts will not load and therefore cannot track all of the visitors on your page.

With Google Consent Mode, GA4 will still be informed of how many people are visiting your website without gathering additional information if they reject the cookie. This allows for more complete data and better insights of your site.

Integration with Google Services

Seamlessly integrates with Google's suite of marketing and analytics services, like Google Analytics and Google Ads, optimising data collection and ad targeting within the consent parameters set by users.

Data Collection Flexibility

Offers a flexible framework to handle consent. When consent is not given, it adjusts the way Google's tools operate, ensuring that essential website data can still be collected in a privacy-compliant manner.

Ad Personalisation Control

Provides granular control over ad personalization. Users can opt-in or opt-out, allowing for personalized advertising only when consent is given.

User Trust and Transparency

By respecting user choices regarding data collection, it builds trust and transparency with your audience, which is essential in today's privacy-conscious environment.

Compliance with Privacy Laws

It helps ensure compliance with data privacy regulations like the GDPR and CCPA by managing user consent for cookies and similar technologies.

Global Solution

Suitable for a global audience, accommodating different consent requirements and preferences across regions, crucial for businesses with a wide geographical reach.

Code & Wander