How to implement Google’s Consent Mode on your website
This article is based on our firsthand experience implementing Consent Mode on our blog site. As a Content Delivery Network (CDN) company, ensuring compliance with privacy regulations while optimizing our website for audience engagement is crucial. Through our experience, we’ve gathered insights that we’re excited to share with other website owners looking to implement Consent Mode on their websites. By following the steps outlined in this guide, you can leverage our expertise to effectively navigate the implementation process and ensure a seamless integration of Consent Mode on your website.
What is Consent Mode?
It is a tool provided by Google that enables website owners to communicate user consent required on Google’s advertising platforms while respecting user choices and privacy preferences. By implementing Consent Mode, website owners can ensure compliance with data protection regulations such as GDPR and CCPA, while maintaining audience features like ads personalization.
Do I need it?
As a rule of thumb, if you’re using Google Adwords and you’re running conversion-oriented or remarketing campaigns then it’s necessary to integrate Consent Mode on your website otherwise your Adwords campaigns will not run properly.
Our Setup: Leveraging Google gtag.js and CookieConsent
Google gtag.js versus Tag Manager
As part of our website infrastructure, we utilize gtag.js for tracking and analytics purposes, rather than Google Tag Manager. Please check the official Google documentation for any further clarification or differences.
Cookie banner
Additionally, we have integrated CookieConsent v3. It is a lightweight, versatile GDPR compliant Consent Management plugin written in vanilla JS. You can search GitHub for other cookie consent solutions but the following guide is based on CookieConsent plugin.
How to Implement Consent Mode
To implement Consent Mode on your WordPress blog, follow the following steps.
Modify wp-content/themes/your-theme/header.php:
Locate the following Google Analytics snippet in your header.php code.
<!-- Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-ID"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-ID');
</script>
And change it to the following snippet.
<!-- Google Analytics -->
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('consent', 'default', {
'ad_storage': 'denied',
'ad_user_data': 'denied',
'ad_personalization': 'denied',
'analytics_storage': 'denied'
});
</script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-ID"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-ID');
</script>
<!-- CookieConsent CSS + CSS customization
<link href="https://449894326.r.cdnsun.net/scripts/cookieconsent/3/dist/cookieconsent.css" rel="stylesheet">
<link href="https://449894326.r.cdnsun.net/scripts/cookieconsent/cookieconsent-cdnsun.css" rel="stylesheet">
The above snippet will add the default consent settings. It’s crucial to ensure that this is the first Google code that runs on your website. If your existing code includes elements like the Adwords remarketing tag (as ours did), it’s necessary to remove it, as it conflicts with Consent Mode and triggers the error “a tag read consent state before a default was set”. You will need to replace G-ID with your own Google Analytics ID. The snippet also loads CSS for the CookieConsent banner, along with our own customizations to it. You can use the same URLs hosted on our CDN (Content Delivery Network) or you can host CookieConsent on your own.
Modify wp-content/themes/your-theme/footer.php:
Add the following snippet to your footer.php code.
<!-- COOKIECONSENT --> <script type="module" src="https://449894326.r.cdnsun.net/scripts/cookieconsent/cookieconsent-config.js"></script>
The above snippet loads the CookieConsent banner along with its configuration. In our case, the file content is the following.
import './3/dist/cookieconsent.umd.js';
CookieConsent.run({
categories: {
necessary: {
enabled: true,
readOnly: true
},
analytics: {},
marketing: {},
},
onConsent: ({cookie}) => {
if (cookie.categories.includes('analytics') && cookie.categories.includes('marketing'))
{
gtag('consent', 'update', {
'ad_storage': 'granted',
'ad_user_data': 'granted',
'ad_personalization': 'granted',
'analytics_storage': 'granted'
});
}
else if (cookie.categories.includes('analytics') && !cookie.categories.includes('marketing'))
{
gtag('consent', 'update', {
'analytics_storage': 'granted'
});
}
else if (!cookie.categories.includes('analytics') && cookie.categories.includes('marketing'))
{
gtag('consent', 'update', {
'ad_storage': 'granted',
'ad_user_data': 'granted',
'ad_personalization': 'granted'
});
}
},
language: {
default: 'en',
translations: {
en: {
consentModal: {
title: 'We use cookies',
description: 'Cookies help us to improve and personalise your browsing experience.',
acceptAllBtn: 'Accept all',
acceptNecessaryBtn: 'Reject all',
showPreferencesBtn: 'Manage Individual preferences'
},
preferencesModal: {
title: 'Manage cookie preferences',
acceptAllBtn: 'Accept all',
acceptNecessaryBtn: 'Reject all',
savePreferencesBtn: 'Accept current selection',
closeIconLabel: 'Close modal',
sections: [
{
title: 'Necessary',
description: 'These cookies are essential for the proper functioning of our website and cannot be disabled.',
linkedCategory: 'necessary'
},
{
title: 'Analytics',
description: 'These cookies help us to understand how you use our website. All of the data is anonymized and cannot be used to identify you.',
linkedCategory: 'analytics'
},
{
title: 'Marketing',
description: 'These cookies are used to track visitors across websites. The intention is to display ads that are relevant to you.',
linkedCategory: 'marketing'
},
{
title: 'More information',
description: 'We use cookies to give you a better, more personalized website experience, and to give us important performance and analytics data to keep things r
unning smoothly.'
}
]
}
}
}
},
guiOptions: {
consentModal: {
layout: 'box',
position: 'bottom left',
flipButtons: false,
equalWeightButtons: true
},
preferencesModal: {
layout: 'box',
flipButtons: false,
equalWeightButtons: true
}
}
});
As before, you can either use the same CDN URL or host the snippet on your own server or CDN with your own customization.
Customization
For example if you want the cookie banner to be on the right side of your webpages then change the guiOptions.consentModal.position parameter above to ‘bottom, right’.
Also, please take note of the onConsent function. This function is responsible for the actual action, which involves sending the consent update to Google.
For more information and more examples please visit the CookieConsent webiste.
A note on custom Google Analytics events
If you wish to trigger a custom Google Analytics event, such as a “login” event on your page, you can use the following snippet. This ensures that the event is sent to Google after you have set consent, because if you send the event before consent then your event will not work properly.
<!-- Event snippet for Analytics login event -->
<script>
function handleGtagEvents() {
gtag('event', 'login');
}
document.addEventListener('DOMContentLoaded', function() {
handleGtagEvents();
});
</script>
That’s all! You’ve successfully integrated Consent Mode into your website! Now, your website is equipped to handle user consent in compliance with privacy regulations while maintaining a seamless browsing experience. Congratulations!
How to Test Consent Mode
Use the official Google Tag Assistant tool. Tag Assistant helps you make sure that your Google tags are working correctly. Connect your website and if everything works correctly on your website you will see the following when you click the user_engagement event and the Consent tab.
Consent Mode Successfully Implemented
Few More Tips
- Ensure that you set the default consent settings at the very beginning of your pages.
- Ensure that there are no other Google snippets, such as the Adwords remarketing tags, present in your code. These snippets can interfere with Consent Mode and may result in seeing the error message “a tag read consent state before a default was set”.
- Ensure that you set default consent and update its settings based on the viewer’s choices on every page of your website. In our example the consent update is done by the onConsent event which triggers on every subsequent page load.
- Check the official Google official documentation.