Sending User Consent to Umbrella Widget

Introduction

The Umbrella Widget provides the ability to do tracking with Google Analytics 4. To ensure compliance with the European data privacy laws it is essential to receive user consent. We have provided an easy way for you to communicate the consent already collected on your website so you can seamlessly integrate your current Consent Management Provider (CMP).

Command: `sendConsent`

The sendConsent command is used to send user consent data from your cookie banner to the Umbrella Widget. This command should be called after you obtain user consent (be it granted or denied), and it accepts several options (arguments) to specify different types of user consent.

Arguments

The sendConsent command accepts the following optional arguments:

ad_storage?: ConsentString;
ad_user_data?: ConsentString;
ad_personalization?: ConsentString;
analytics_storage?: ConsentString;

ConsentString Type

The ConsentString type represents the user consent status and has the following values:

'granted'
'denied'

By default, all consent options are set to 'denied'.

Implementation

General Implementation

Below is a general example of how to implement the sendConsent command using a custom function to send user consent:

// Function to send user consent to the UW function sendUserConsent(consentData) { // Call the DatHuis method with the sendConsent command and user consent status DatHuis('sendConsent', consentData); } // Example of calling the function with custom consent data const consentData = { ad_storage: 'granted', ad_user_data: 'denied', ad_personalization: 'granted', analytics_storage: 'granted' }; sendUserConsent(consentData);

Example Usage with Cookiebot

If you use Cookiebot (or any Consent Management Platform) script directly in your HTML:
Below is an example of how to implement the sendConsent command within your system using the Cookiebot (or any other tool you use to obtain the consent) banner:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Consent HTML Example</title> </head> <body> <!-- Cookiebot (other CMP) goes first --> <script id="Cookiebot" src="https://consent.cookiebot.com/uc.js" data-cbid="your-id" type="text/javascript"></script> <!-- Dathuis Umbrella Widget scrip --> <script> (function(d,a,t,h,u,i,s){d["DatHuisObject"]=u;d[u]=d[u]||function(){(d[u].q=d[u].q||[]).push(arguments)};d[u].l=1*new Date;se=a.createElement(t);fs=a.getElementsByTagName(t)[0];se["async"]=1;se.src=h;fs.parentNode.insertBefore(se,fs)})(window,document,"script","https://btstrp.dathuis.nl/assets/widget.js","dhuw"); dhuw('init', { accountId: 'your-account-id' }); </script> <!-- Send consent script always goes after the CMP script --> <script type="text/javascript"> console.info('sendUserConsent loaded'); function sendUserConsent() { // Define a mapping from Cookiebot var userConsent = { ad_storage: Cookiebot.consent.marketing ? 'granted' : 'denied', ad_user_data: Cookiebot.consent.marketing ? 'granted' : 'denied', ad_personalization: Cookiebot.consent.marketing ? 'granted' : 'denied', analytics_storage: Cookiebot.consent.statistics ? 'granted' : 'denied' }; if (typeof dhuw !== 'undefined') { // Call the DatHuis `dhuw` method with the sendConsent command and user consent status dhuw('sendConsent', userConsent); } } // Add event listener for when Cookiebot consent is updated window.addEventListener('CookiebotOnAccept', sendUserConsent); function withdrawConsent() { var withdrawnConsent = { ad_storage: 'denied', ad_user_data: 'denied', ad_personalization: 'denied', analytics_storage: 'denied' }; if (typeof dhuw !== 'undefined') { dhuw('sendConsent', withdrawnConsent); } } // Handle user withdrawing consent window.addEventListener('CookiebotOnDecline', withdrawConsent); // Send consent immediately if it has already been obtained if (Cookiebot.hasResponse) { sendUserConsent(); } </script> </body> </html>

2. If you insert scripts with Google Tag Manager:

Step 1: Add Consent Listener script as a Custom HTML Tag:

<script type="text/javascript"> console.info('sendUserConsent loaded'); function sendUserConsent() { // Define a mapping from Cookiebot var userConsent = { ad_storage: Cookiebot.consent.marketing ? 'granted' : 'denied', ad_user_data: Cookiebot.consent.marketing ? 'granted' : 'denied', ad_personalization: Cookiebot.consent.marketing ? 'granted' : 'denied', analytics_storage: Cookiebot.consent.statistics ? 'granted' : 'denied' }; if (typeof dhuw !== 'undefined') { // Call the DatHuis `dhuw` method with the sendConsent command and user consent status dhuw('sendConsent', userConsent); } } // Add event listener for when Cookiebot consent is updated window.addEventListener('CookiebotOnAccept', sendUserConsent); function withdrawConsent() { var withdrawnConsent = { ad_storage: 'denied', ad_user_data: 'denied', ad_personalization: 'denied', analytics_storage: 'denied' }; if (typeof dhuw !== 'undefined') { dhuw('sendConsent', withdrawnConsent); } } // Handle user withdrawing consent window.addEventListener('CookiebotOnDecline', withdrawConsent); // Send consent immediately if it has already been obtained if (Cookiebot.hasResponse) { sendUserConsent(); } </script>

Don't add any triggers just yet.

Step 2: In your Cookiebot script, go to the Advanced settings -> Tag Sequencing and add the Consent Listener script to fire after the Cookiebot fires (as shown in the screenshot below):

Default Values

If no consent status is provided for a particular option, it will default to 'denied'. It is important to explicitly specify the consent status for each option to ensure compliance with user preferences.

Processing Consent Options in Umbrella Widget

In the Umbrella Widget, the consent options sent via the sendConsent command are captured and sent to the GA4 ID provided to us. If no consent is sent, all consent options will remain set to 'denied' by default.

Summary

By integrating the sendUserConsent function into your webpage, you can effectively communicate user consent from your cookie banner to the Umbrella Widget. This ensures that any analytics tracking and other data processing activities performed by the widget comply with user preferences and data privacy regulations.

If you have any questions or need further assistance, please contact our support team.

For more information on UW installation and integration, please refer to the DatHuis Widget Installation and Integration Guide.