Usercentrics

The Usercentrics Consent Management Platform contains all required and up-to-date data privacy information.

With the Usercentrics integration, Kameleoon automatically connects to Usercentrics, accesses the consent policy within the platform, and uses this when displaying experiments and personalizations on your website.

Key benefits:

• Automatic management of user consent through Usercentrics CMP with no additional setup needed.
• Ensures consistency in consent management and enables seamless compliance.
• Reassure your users that their data is being used in a compliant manner.

Add Kameleoon as Data Processing Service in Usercentrics

You need to select a new Data Processing Service in Usercentrics. To do so:

1. Click Service Settings in the Usercentrics' admin interface.
2. Click Add DPS via Database > Kameleoon.

3. Select your category in the Category dropdown.

Kameleoon Template IDs:

• Kameleoon AB Testing&Personalization / Template ID: H1yDxp7JN
• Kameleoon Only AB Testing Module / Template ID: 9FYjH37-J
• Kameleoon Only Personalization Module / Template ID: 2lh8-reEz

Set up IAB TCF in Usercentrics

To enable IAB TCF 2.2 (Usercentrics & Kameleoon), you must complete these steps:

1. Set up Kameleoon as vendor (id:820) in Usercentrics.
2. In Usercentrics' admin interface, navigate to Service Settings.
3. Set the CMP version to Version 2.

4. Click Configuration.
5. Enable Transparency & Consent Framework 2.2 (TCF)

6. Enable the IAB TCF integration in Kameleoon.

A/B test Usercentrics Consent Banner

note

We recommend running only one Consent Experiment per site.

To run an A/B test on a Usercentrics Consent Banner, you first need to create a Goal:

1. Click Configure > Goals > New goal.
2. In Website Selection, choose the website you defined when you created your account.
3. Select Custom Goal in Type.
   • Currently, Usercentrics supports several custom events for custom goals. You can read more about them here.
4. Click Next.
5. Enter a name for your goal in the Name your goal field.
6. Enter Kameleoon.API.Goals.processConversion (and the Unique ID inside) in the Describe your goal.
   • You can find the ID in the New goal pop-in at the end of the function text.

After creating the new goal, you need to create an Experiment:

1. Go to the Experiments dashboard.
2. Click New Experiment. A pop-in opens asking what type of experiment you want to create.
3. Click In the code editor > JS/CSS.
4. Enter the Name, Website, and URL of the page where you want to launch your experiment.
5. Click Validate. The Code Editor will open.

6. Click Experiment (just above Variations in the left menu) and click Test specific code in the menu on the right.
7. Add the following code:

window.UC_AB_VARIANT = "variant0";
 window.addEventListener('UC_UI_CMP_EVENT', function (data) {
      console.log("TEST: source =>", data.detail.source);
      console.log("TEST: type =>", data.detail.type);
      console.log("TEST: Variant =>", data.detail.abTestVariant);
      //These are our custom events for each basic action
      //in our Consent Management Platform
      if (data.detail.type === "CMP_SHOWN") Kameleoon.API.Goals.processConversion(Your Unique ID);
      if (data.detail.type === "ACCEPT_ALL") Kameleoon.API.Goals.processConversion(Your Unique ID);
      if (data.detail.type === "DENY_ALL") Kameleoon.API.Goals.processConversion(Your Unique ID);
      if (data.detail.type === "SAVE") Kameleoon.API.Goals.processConversion(Your Unique ID);
      if (data.detail.type === "MORE_INFORMATION_LINK") Kameleoon.API.Goals.processConversion(Your Unique ID);
      if (data.detail.type === "IMPRINT_LINK") Kameleoon.API.Goals.processConversion(Your Unique ID);
      if (data.detail.type === "PRIVACY_POLICY_LINK") Kameleoon.API.Goals.processConversion(Your Unique ID);
  });

• variant0 is the default variant that we've defined as the empty variant, meaning that it doesn't make any changes to the Consent Management Platform. If your default variant has another name, change it accordingly. Use window.UC_AB_VARIANT=”variant0” to go to your default variant.
• The Event Listener will be triggered every time you fire one of our Custom Events. Find extra information regarding Custom Events for A/B Testing here
• The three console.logs will return important information regarding your event. For example, to track ACCEPT_ALL as the code shows, you will be presented with these logs:

 TEST: source => FIRST_LAYER
 TEST: type => ACCEPT_ALL
 TEST: Variant => variant1

You can add more goals to this Experiment if needed.

To add a new Goal just add the following code underneath the last "if" statement.

if (data.detail.type === "Consent Management Platform event here") Kameleoon.API.Goals.processConversion(goalID)

8. Go back to the Variations tab.

9. In Variation 1, add the following code:

   window.UC_AB_VARIANT = "variant1";

10. Replace variant1 if you gave your variant another name.

11. In the Finalize tab, select your traffic distribution, targeting, tracking, and goals.

    • Here, you will add the goal that you've created. You can search for goal's unique ID. If you have any issues searching, try using only the first digits of the goal ID.

12. Click Publish to finalize the Experiment setup.

This guide walks you through Usercentrics Internal A/B Testing.

Custom Integration Kameleoon Legal Consent

If you cannot enable TCF 2.2 in Usercentrics, you can use a custom script setup.

caution

Do not block Kameleoon if the consent's status is unknown (first visit). Otherwise, this setup is obsolete.

note

This setup is optimized to show users campaigns at an unknown consent status without tracking. You can also show changes for A/B Testing on your project's entry pages.

1. In Kameleoon, define your consent management policy and choose Consent required.
2. Integrate the following Kameleoon functions:
   • enableLegalConsent
   • disableLegalConsent

note

To learn more about legal consent in Kameleoon, read this documentation. For more technical information about states and modes, read this documentation.

You can use custom script directly in a page, Google Tag Manager, or Global custom script in the Kameleoon app.

If you want to use custom scripts in the Global custom script, follow these steps:

1. Go to the Projects menu.
2. Click Configuration on the card for your site or mobile app.

3. Unfold the General section.
4. Copy and paste one of the code blocks below, depending on the Kameleoon Template you chose.

Example of custom script if A/B testing and Personalization are on the same service

Kameleoon AB Testing&Personalization / Template ID: H1yDxp7JN

function setConsentStatus(type, status, action) {
        if (status) {
            window.kameleoonQueue.push(function() {
                Kameleoon.API.Core.enableLegalConsent(type);
                console.log('enableLegalConsent ' + type)
            });
        } else if (!status) {
            window.kameleoonQueue.push(function() {
                Kameleoon.API.Core.disableLegalConsent(type);
                console.log('disableLegalConsent ' + type)
            });
        }
    }

    function initKameleoonLegalConsent(type) {
        window.kameleoonQueue = window.kameleoonQueue || [];
        window.kameleoonQueue.push(function() {
            Kameleoon.API.Core.runWhenConditionTrue(() => typeof UC_UI !== 'undefined' 
            && UC_UI.isInitialized() === true
            && window.localStorage.getItem('uc_user_interaction') === 'true', () => {
                const abtesting = UC_UI.getServicesBaseInfo().filter((service) => service && service.id === 'H1yDxp7JN');
                if (abtesting.length > 0) {
                    setConsentStatus('BOTH', abtesting[0].consent.status);
                }
            }, 200);
        });
    }
    initKameleoonLegalConsent();

Example of custom script if A/B testing and Personalization are on different services

• Kameleoon Only AB Testing Module = Template ID: 9FYjH37-J
• Kameleoon Only Personalization Module = Template ID: 2lh8-reEz

function setConsentStatus(type, status, action) {
        if (status) {
            window.kameleoonQueue.push(function() {
                Kameleoon.API.Core.enableLegalConsent(type);
                console.log('enableLegalConsent ' + type)
            });
        } else if (!status) {
            window.kameleoonQueue.push(function() {
                Kameleoon.API.Core.disableLegalConsent(type);
                console.log('disableLegalConsent ' + type)
            });
        }
    }

    function initKameleoonLegalConsent(type) {
        window.kameleoonQueue = window.kameleoonQueue || [];
        window.kameleoonQueue.push(function() {
            Kameleoon.API.Core.runWhenConditionTrue(() => typeof UC_UI !== 'undefined' 
            && UC_UI.isInitialized() === true
            && window.localStorage.getItem('uc_user_interaction') === 'true', () => {
                const abtesting = UC_UI.getServicesBaseInfo().filter((service) => service && service.id === '9FYjH37-J');
                if (abtesting.length > 0) {
                    setConsentStatus('AB_TESTING', abtesting[0].consent.status);
                }
                const perso = UC_UI.getServicesBaseInfo().filter((service) => service && service.id === '2lh8-reEz');
                if (perso.length > 0) {
                    setConsentStatus('PERSONALIZATION',perso[0].consent.status);
                }
            }, 200);
        });
    }
    initKameleoonLegalConsent();

If you have any questions, feel free to contact your Kameleoon Custom Success Manager.