GDPR component for Joomla integrate the Google Consent Mode CMP

Does the GDPR component for Joomla integrate the Google Consent Mode CMP?

Created on:Tuesday, 22 August 2023 23:06

Yes, the GDPR component integrates the Google Consent Mode (CMP) v2 that will be in effect starting from March 2024 for Google services.

It's possible to integrate the Google Consent Mode (CMP) for Google AdSense, Google Analytics and storage consents. Such consents can be granted or denied based on user preferences of the GDPR categories and transferred to the Google Consent Mode platform.

IMPORTANT: Before going on with the configuration, in the case that the GDPR tool is configured to block the domain 'googletagmanager.com', be sure to allow it and remove all instances of this domain and of the Google Tag Manager script in the component configuration. This domain must be deleted from all lists (up to 5) of blocked domains under component settings, otherwise the Google Consent Mode will not work!
So the first step is to look for the domain 'googletagmanager.com' in your GDPR configuration and delete it.

WHY THIS? Before the Google Consent Mode or if someone does not use the Google Consent Mode, then the adopted approach was to totally block the script from googletagmanager.com With Google Consent Mode in place, it's Google that chooses to pass data through based on the given consent, and it's no longer needed to totally block the script. If you are still entirely blocking the script from googletagmanager.com, then Google script will not be loaded and the Google Consent Mode will not run at all.

In order to enable the integration with Google Consent Mode, the GDPR component just requires to include the Google Tag Manager script (gtm.js e.g. https://www.googletagmanager.com/gtm.js?id... or gtag.js e.g. https://www.googletagmanager.com/gtag/js?id...) and enable the following settings for the 'Statistics' and 'Marketing' categories, then the GDPR component will communicate any consent for ads and analytics to Google, including Google consent mode v2 for the EU user policy. Optionally it's possible to activate the CMP integration also for the 'Preferences' category to communicate consents for functionality, personalization and security storage.

If you want to use 'Google Tag Manager' the final snippet of code to place in your pages is the following, obviously replace the 'GTM-XXXXXX' with your real Google Tag Manager ID:
<script>
// Define dataLayer and the gtag function.
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}

// Set default consent to 'denied' as a placeholder
// Determine actual values based on your own requirements
gtag('consent', 'default', {
'ad_storage': 'denied',
'ad_user_data': 'denied',
'ad_personalization': 'denied',
'analytics_storage': 'denied',
'functionality_storage': 'denied',
'personalization_storage': 'denied',
'security_storage': 'denied',
'wait_for_update': 500 });
</script>


<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');</script>


If instead you want to use 'gtag.js' the final snippet of code to place in your pages is the following, obviously replace the 'TAG_ID' with your real Google tag ID:

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

// Set default consent to 'denied' as a placeholder
// Determine actual values based on your own requirements
gtag('consent', 'default', {
'ad_storage': 'denied',
'ad_user_data': 'denied',
'ad_personalization': 'denied',
'analytics_storage': 'denied',
'functionality_storage': 'denied',
'personalization_storage': 'denied',
'security_storage': 'denied',
'wait_for_update': 500 });
</script>


<script async src="https://www.googletagmanager.com/gtag/js?id=TAG_ID"> </script>
<script> window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}

gtag('js', new Date());
gtag('config', 'TAG_ID');
</script>

With 'gtag.js' you may want to include multiple lines gtag('config', 'TAG_ID'); to load different tags such as Analytics, AdSense, AdWords, etc

It's recommended to define the default consents status to 'denied' to block services used on your website before consents, but if you experience issues such as Google Analytics not tracking, ads not appearing, consents not propagated across different page loads, etc you can increase the value of 'wait_for_update' for example to 1000/1500ms or omit the following code:

// Set default consent to 'denied' as a placeholder
// Determine actual values based on your own requirements
gtag('consent', 'default', {
'ad_storage': 'denied',
'ad_user_data': 'denied',
'ad_personalization': 'denied',
'analytics_storage': 'denied',
'functionality_storage': 'denied',
'personalization_storage': 'denied',
'security_storage': 'denied',
'wait_for_update': 1500 });
</script>

For more detailed informations about the snippets of code required for the integration either using gtag or Tag Manager, refer to this page: https://developers.google.com/tag-platform/security/guides/consent

Furthermore it's also possible to activate the Google CMP theme for a seamless integration with the Google Consent Mode v2 by enabling the option below:

Optionally you can test consents sent to Google by using the Google Tag Manager assistant. This way you can check whether the granted/denied consents are correctly sent to Google based on the accepted or rejected CMP categories:

As an alternative to the Google Tag Manager assistant you can install and use the official InfoTrust extension for Google Chrome that will detect and show in realtime each Google consent state managed by the GDPR on your website:

You can also download a sample configuration of GDPR for the Google CMP v2 as used on the demo site https://demo.storejextensions.org/gdpr.

GDPR categories map to Google CMP consents in the following way:

Preferences (category 2): functionality_storage, personalization_storage, security_storage

Statistics (category 3): analytics_storage

Marketing (category 4): ad_storage, ad_user_data, ad_personalization

If instead you don't either use Google Tag Manager and Google Analytics but just include the code for Google AdSense, you can still integrate Google Consent Mode CMP by loading the Google Tag Manager script with the Google Ads conversion tracking ID 'AW-XXXXXXXXXX' before the code used for the direct integration with Google AdSense:

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

// Set default consent to 'denied' as a placeholder
// Determine actual values based on your own requirements
gtag('consent', 'default', {
'ad_storage': 'denied',
'ad_user_data': 'denied',
'ad_personalization': 'denied',
'analytics_storage': 'denied',
'functionality_storage': 'denied',
'personalization_storage': 'denied',
'security_storage': 'denied',
'wait_for_update': 500 });
</script>


<script async src="https://www.googletagmanager.com/gtag/js?id=AW-XXXXXXXXXX"> </script>
<script> window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}

gtag('js', new Date());
gtag('config', 'AW-XXXXXXXXXX');
</script>

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
data-ad-slot="xxxxxxxxxx"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>