Set up Consent Mode V2 with any cookiebanner in GTM

Introduction

This tutorial provides a step-by-step guide to manually set up Consent Mode V2 in Google Tag Manager (GTM) using any cookie banner. Consent Mode V2 helps ensure compliance with regulations regarding user consent for cookies, making it essential for any website that tracks user data. Whether you're using a specific cookie management platform or a custom-made cookie banner, this guide will help you implement Consent Mode effectively.

Step 1: Verify if Consent Mode is Already Set Up

Before making changes, check if Consent Mode is already configured elsewhere on your website.

• Inspect your GTM setup for any existing Consent Mode tags.
• Use browser developer tools to check if Consent Mode is being triggered on your site.

Step 2: Research How Your CMP Stores Consent

Understand how your Cookie Management Platform (CMP) stores user consent. This knowledge is crucial as it determines how you will retrieve consent later.

• Review the documentation of your CMP to identify where and how consent is stored (e.g., cookies or local storage).
• Note the specific keys or values used to represent consent states (e.g., accepted, rejected).

Step 3: Set Up Consent Mode V2 Default Command

Configure the default command for Consent Mode V2 in GTM.

• Go to GTM and create a new tag.
• Select the tag type as "Custom HTML."
• Add the following code snippet to set the default consent state:

<script>
  window.dataLayer = window.dataLayer || [];
  window.dataLayer.push({'event': 'consent', 'default': true});
</script>

• Set the trigger for this tag to "All Pages."

Step 4: Retrieve Consent from Cookie or Local Storage

Now, create a mechanism to retrieve consent status when users visit your site.

• Create another Custom HTML tag in GTM.
• Use the following code snippet to check for consent in local storage or cookies:

<script>
  var consent = localStorage.getItem('yourConsentKey') || document.cookie.split('; ').find(row => row.startsWith('yourConsentKey='));
  if (consent) {
    window.dataLayer.push({'event': 'consent', 'status': consent});
  }
</script>

• Replace yourConsentKey with the actual key used by your CMP.

Step 5: Set Consent Mode Update Command

After retrieving the consent, update the Consent Mode accordingly.

• Create another Custom HTML tag to push the consent status to the dataLayer:

<script>
  function updateConsent(status) {
    window.dataLayer.push({'event': 'consentUpdate', 'status': status});
  }
  
  // Call this function with the retrieved consent status
  updateConsent(consent);
</script>

• Trigger this tag to run on the same pages as the previous tags.

Step 6: Test if Consent Mode V2 is Working Properly

Testing is crucial to ensure everything is set up correctly.

• Use the GTM Preview mode to see if the consent events are firing as expected.
• Check the browser console for consent events in the dataLayer.
• Verify that the consent status is correctly reflected in the dataLayer.

Step 7: Apply Consent Settings to Every Tag

Finally, ensure all relevant tags respect the user's consent settings.

• For each tag in GTM that involves tracking or analytics, add triggers based on the consent status.
• For example, set a trigger that only fires the tag if the user has given consent.

Conclusion

Setting up Consent Mode V2 in Google Tag Manager is essential for compliance with data protection laws and user privacy. By following these steps, you can ensure a smooth setup that respects user consent. For further learning, consider exploring additional resources on cookie management and GTM strategies. You can also check out the Consent Mode Blueprint for a comprehensive guide to managing consent on your site.