Advanced Guide: how to manage Iubenda Granular Category Consent with Google Tag Manager (GDPR)

Such as Cookiebot or OneTrust, Iubenda has adapted to the category management of Cookies too.

The recent official European Data Protection Board guideline explicitly declare that the GDPR is not compliant with legal standards, if the consent is NOT granular and/or if the scroll is used as acceptance.

So since May 2020, it’s possible to manage granular category consent with Iubenda.

That’s good news! But this involves further configurations in GTM.

Iubenda categories

Iubenda has 5 categories in its standard version.

Strictly necessary (id 1)

Purposes included:

• Saving and managing backups
• Hosting and backend infrastructure
• Management of landing pages and invitation pages
• Platform and hosting services SPAM protection
• Traffic optimization and distribution
• Infrastructure monitoring
• Payment management

Basic interactions & functionalities (id 2)

Purposes included:

• Contact the user
• Interaction with live chat platforms
• Management of web conferences and online telephony
• Management of support and contact requests
• Interaction with support and feedback platforms
• Tag management
• Registration and authentication

Experience enhancement (id 3).

Purposes included:

• Content comment
• Interaction with data collection platforms and other third parties
• Display of content from external platforms
• Interaction with external social networks and platforms
• Interaction with online survey platforms
• Management of RSS feeds
• Social features

Measurement (id 4).

Purposes included:

• Analytics
• Beta testing
• Content performance and features testing (A/B testing)
• Heat mapping and session recording
• Management of data collection and online surveys

Targeting & advertising (id 5).

Purposes included:

• Advertising
• Infrastructure to the advertising service
• Commercial affiliation
• Contact management and sending messages
• Remarketing and behavioral targeting

It really developed a clear list to avoid bad interpretations. So a similar thing will appear in the banner:

Let’s go with GTM configuration now!

Step 1 – Get Iubenda script

Go to your Iubenda account and generate the script by using “Cookie Solution” item.

You should find a text area where you’re able to copy the code just like the image below:

In detail the code will be something like this:

<script type="text/javascript">
var _iub = _iub || [];
_iub.csConfiguration = {
      "consentOnContinuedBrowsing":false,
      "whitelabel":false,
      "lang":"it",
      "siteId":XXXXXXXX,
      "countryDetection":true,
      "perPurposeConsent":true,
      "cookiePolicyId":YYYYYYYYY,
      "cookiePolicyUrl":"demo.tagmanageitalia.it/esempio/", 
      "banner":{ 
             "acceptButtonDisplay":true,
             "customizeButtonDisplay":true,
             "position":"float-top-center",
             "rejectButtonDisplay":true 
             }
      };
</script>
<script type="text/javascript" src="//cdn.iubenda.com/cs/iubenda_cs.js" charset="UTF-8" async></script>

The parameters in red color are dynamic. They change depending on how you implement the cookie solution on Iubenda and the site destination (in my case demo.tagmanageritalia.it).

In my case, the cookiePolicyId code is 20508754 (you’ll see it later) in the screenshots below.

Here’s an example:

<script type="text/javascript">
var _iub = _iub || [];
_iub.csConfiguration = {
     "lang": "it",
     "siteId": XXXXXX, 
     "cookiePolicyId": YYYYYY,
     "banner": {
               "position": "float-top-center",
               "acceptButtonDisplay": true,
               "customizeButtonDisplay": true
               },
     };
</script>
<script type="text/javascript" src="//cdn.iubenda.com/cs/iubenda_cs.js" charset="UTF-8" async></script>

As you can see the values in red remain 🙂

STEP 2 – Modify the script to instruct Google Tag Manager

Now that you get the script you will need to add a piece of code to instruct Google Tag Manager when the user accepts one of the five categories or not.

This instruction will be sent with a dataLayer push by using a custom event.

You have to add blue values to the code. The code will be something like this:

<script type="text/javascript">
var _iub = _iub || [];
_iub.csConfiguration = {
      "consentOnContinuedBrowsing":false,
      "whitelabel":false,
      "lang":"it",
      "siteId":XXXXXXXX,
      "countryDetection":true,
      "perPurposeConsent":true,
      "cookiePolicyId":YYYYYYYYY,
      "cookiePolicyUrl":"demo.tagmanageitalia.it/esempio/", 
      "banner":{ 
             "acceptButtonDisplay":true,
             "customizeButtonDisplay":true,
             "position":"float-top-center",
             "rejectButtonDisplay":true 
             }

              ,
      callback: {
            onPreferenceExpressedOrNotNeeded: function(preference) {
                dataLayer.push({
                    iubenda_ccpa_opted_out: _iub.cs.api.isCcpaOptedOut()
                });
                if (!preference) {
                    dataLayer.push({
                        event: "iubenda_preference_not_needed"
                    });
                } else {
                    if (preference.consent === true) {
                        dataLayer.push({
                            event: "iubenda_consent_given"
                        });
                    } else if (preference.consent === false) {
                        dataLayer.push({
                            event: "iubenda_consent_rejected"
                        });
                    } else if (preference.purposes) {
                        for (var purposeId in preference.purposes) {
                            if (preference.purposes[purposeId] && ({{cookie iubenda}} === undefined || {{cookie iubenda}}.indexOf('"' + purposeId + '":true') < 0)){
                                dataLayer.push({
                                    event: "iubenda_consent_given_purpose_" + purposeId
                                });
                            }
                        }
                    }
                }
            }
        }
      
      };
</script>
<script type="text/javascript" src="//cdn.iubenda.com/cs/iubenda_cs.js" charset="UTF-8" async></script>

Let’s insert this code in a custom HTML tag.

Step 3 – Create a custom HTML tag

• Tag > New > Tag Configuration.
• Tag Type: Custom HTML Tag.
• Past Iubenda snippet.
• Advanced Settings > Tag firing priority > 99999
• Tag firing options > Once per page
• Triggering: All pages
• Name: Iubenda

Here’s an example:

Step 4 – Create a Cookie variable

To understand if the user has accepted several categories of profiling you can use a smart trick.

A Iubenda cookie saves the consents and the cookie bar will no longer appear during page changes.

It’s possible to catch Iubenda cookie with Google Tag Manager. It will appear link this:

_iub_cs-XXX

 

XXX stands for Iubenda cookiePolicyId. In my case, it will be: 20508754

Let’s create the variable:

• Variables > New > Variable Configuration.
• Variable Type: 1st-Party Cookie.
• Cookie Name: _iub_cs-XXX
• Check URI-decode cookie.
• Rename Variable: “cookie iubenda”.

Use Preview and Debug Mode to check the Iubenda cookies bar appears.

In my example, you can see also a Google Analytics tag unlocked.

If the user accepts all cookies, you will see a series of custom events in the left and Iubenda cookie triggered.

Custom events are called:

• iubenda_consent_given_purpose_1
• iubenda_consent_given_purpose_2
• iubenda_consent_given_purpose_3
• iubenda_consent_given_purpose_4
• iubenda_consent_given_purpose_5

Iubenda cookie has a value like this:

{"timestamp":"2020-06-11T12:46:23.993Z","version":"1.20.6","purposes":{"1":true,"2":true,"3":true,"4":true,"5":true},"id":20508754}

You can find items that you must to focus on in blue.

• timestamp = time the user accepted
• version = Iubenda script version
• purposes = accepted categories (true as value) and not accepted categories (false as value)
• id = it’s the cookiePolicyId 🙂

Next steps:

• Create 5 triggers, one for each 5 Iubenda custom events
• Create 5 variables to extrapolate the value of the accepted category that now resides within the cookie
• Create 5 universal negative triggers that are useful to simplify implementations.

Step 5 – Create 5 custom event triggers

You will have to repeat this step 5 times, changing the event name.

The number identifies the category:

1. Strictly necessary
2. Basic interactions & functionalities
3. Experience enhancement
4. Measurement
5. Targeting & advertising

Let’s configure iubenda_consent_given_purpose_1

• Trigger > New > Trigger Configuration
• Trigger Type: Custom Event
• Event Name: iubenda_consent_given_purpose_1
• This trigger fires on: All Custom Events
• Rename Trigger: “Iubenda 1 – Strictly necessary”

Do the same for:

• iubenda_consent_given_purpose_2 with this name “Iubenda 2 – Interactions”
• iubenda_consent_given_purpose_3 with this name “Iubenda 3 – Experience”
• iubenda_consent_given_purpose_4 with this name “Iubenda 4 – Measurement”
• iubenda_consent_given_purpose_5 with this name “Iubenda 5 –  Targeting”

Great, now let’s create the 5 variables that will allow you to understand from the Iubenda cookie if the user has accepted one of the specific categories or not.

This step is necessary to create universal negative triggers 🙂

Step 6 – Create 5 consents variables for each category

At this point, you have a variable containing the Cookie of preferences. Now you can create 5 variables to manage all categories of consents. To do this you have to use regular expressions.

• Variables > User-Defined Variables > New.
• Variable Type: RegEx Table
• Input Variable: {{cookie iubenda}}
• Pattern: "1":true ► Output: true
• Pattern: "1":false ► Output: false
• Advanced Settings: Check Ignore Case
• Variable Name: cookie.purpose 1 – Strictly necessary
• Save

Do the same for the other 4 variables by changing the value within the pattern: enter the appropriate number and name.

The second one:

• Pattern: "2":true ► Output: true
• Pattern: "2":false ► Output: false
• Variable Name: cookie.purpose 2 – Interactions

The third one:

• Pattern: "3":true ► Output: true
• Pattern: "3":false ► Output: false
• Variable Name: cookie.purpose 3 – Experience

The fourth one:

• Pattern: "4":true ► Output: true
• Pattern: "4":false ► Output: false
• Variable Name: cookie.purpose 4 – Measurement

The fifth one:

• Pattern: "5":true ► Output: true
• Pattern: "5":false ► Output: false
• Variable Name: cookie.purpose 5 – Targeting

Here’s the final result:

BUT WHAT ARE THESE VARIABLES FOR?

Now I tell you.

The user’s preference value will appear before DOM Ready.

In other words, there will be no more problems in the management of Google Tag Manager’s Built-In Events (such as the Page View which is called Container Loaded since 10 June 2020).

Yuppieeeeeeee!

Almost there, let’s create universal negative triggers and configure tag 🙂

STEP 7 – Create universal negative triggers

This trigger type has the particularity of adapting to any event type. So it doesn’t matter if Google Analytics tag or Facebook will be fired on click, scroll, and so on.

You will have to create 5 triggers, one for each category.

Universal negative trigger blocks any tag firing if it’s configured as “trigger in exception”.

So if the user doesn’t accept a specific Iubenda category, you have to create a trigger.

Nothing complicated: now I’ll explain it 🙂

• Triggers > New.
• Trigger Type: Custom Event
• Event Name: .*
• Check Use regex matching
• This trigger fires on: cookie.purpose 1 – Strictly necessary does not equal true
• Rename: “cookie.purpose 1 – Strictly necessary – Not Accepted”

Do the same for the remaining 4 triggers.

The second one:

• This trigger fires on: cookie.purpose 2 – Interactions does not equal true
• Rename: “cookie.purpose 2 – Interactions – Not Accepted”

The third one:

• This trigger fires on: cookie.purpose 3 – Experience does not equal true
• Rename: “cookie.purpose 3 – Experience – Not Accepted”

The fourth one:

• This trigger fires on: cookie.purpose 4 – Measurement does not equal true
• Rename: “cookie.purpose 4 – Measurement – Not Accepted”

The fifth one:

• This trigger fires on: cookie.purpose 5 – Targeting does not equal true
• Rename: “cookie.purpose 5 – Targeting – Not Accepted”

Yeah! You did it, now you just have to configure all the tags based on the category.

STEP 8 – Update triggers and tag

Thanks to the combination of Custom Event Triggers and Universal Negative Triggers you can implement any tag type, for example Google Analytics pageview tag (you can set it as Measurement).

At this point, you have to add 2 triggers to be in compliance with the GDPR:

• Iubenda 4 – Measurement as trigger
• cookie.purpose 4 – Measurement – Not Accepted (as trigger in exception)

Before publishing any changes, check the correct tag functioning by activating the Preview and Debug Mode.

You can see that Universal Negative Trigger blocks anything 🙂

Great! Thanks to Google Tag Manager you can correctly implement category consent with Iubenda.

What do you think about this guide? Do you think it is helpful? Let me know in the comments below.

Buon Tag 😉

Links:

• Iubenda official guide with Google Tag Manager
• 10% discount for Iubenda activation