Integrate Kameleoon with Usercentrics

The Usercentrics Consent Management Platform contains all required data privacy information automatically and up to date. In combination with IAB TCF integration the setup will be best-suited for your Consent setup.

Usercentics: Add Kameleoon as Data Processing Service

You need to select a new Data Processing Service in Usercentrics. To do so, click on Service Settings in the admin interface of Usercentrics.

Then, click on Add DPS via Database and select Kameleoon.

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

Usercentrics: Setup for IAB TCF

To enable IAB TCF 2.0 (Usercentrics & Kameleoon), you need to complete these steps.

First, set up Kameleoon as vendor (id:820) in Usercentrics.

Then, enable Transparency & Consent Framework 2.0 (TCF):

• In the admin interface of Usercentrics go to Service Settings and set the CMP version to Version 2.

• In Configuration, activate the Transparency & Consent Framework 2.0 (TCF) option.

Finally, enable the IAB TCF integration in Kameleoon.

A/B test Usercentrics Consent Banner

Important: We recommend to run only one Consent Experiment per site.

First, you need to create a new goal in the Kameleoon App. Go to Configure in the left menu and then click Goals.

Click New goal in the top right corner.

In Website Selection, choose the website that you defined when you created the account.

In Type of Goal, choose Custom Goal. Currently, Usercentrics supports several custom events for custom goals. You can read more about them here.

Click Next, and a new popup will appear with the fields Goal name and Description. Give it an appropriate name and copy the aforementioned function on the text underneath the Description field → Kameleoon.API.Goals.processConversion (and the Unique ID inside).

Find this ID on the New goal popup at the end of the function text. 

After creating the new Goal, you will need to create an Experiment.

To create a new Experiment, go to the Experiments dashboard and click New Experiment in the top right corner.

A new popup will appear asking what type of experiment you want to create. For testing purposes, create a Classic A/B Experiment by clicking on In the code editor and then JS/CSS.

A popup with the text fields “Name”, “Website”, and “URL of the page where you want to launch your experiment” will appear. Complete them with the correct information and click Validate to create your experiment.

The Code Editor will open.

Before adding the Variations, go to Experiment (just above Variations on the left menu) and click Test specific code in the menu on the right.

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);
  });

• The “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. By using window.UC_AB_VARIANT=”variant0”, you will 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.log 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)

Go back to the Variations tab and inside Variation 1 add the following code:

window.UC_AB_VARIANT = "variant1";

Replace “variant1” if you gave your variant another name.

In the Finalize tab, select your traffic distribution, your targeting, and your tracking and goals. Here you will add the goal that you have created and you can search for goal’s unique ID. If you have any issues searching, try using only the first digits of the goal ID.

After completing these three steps, click Publish to finalize the Experiment setup.

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

Custom Integration Kameleoon Legal Consent

If you can not enable TCF 2.0 in Usercentrics, you can use a custom script setup.

Important: Please do not block Kameleoon if the status is unknown (first visit). Otherwise these setup is obsolete.

Note: This setup is optimized to show users campaigns at an unknown consent status, without tracking. You will be able to show changes for A/B Testing also on entry pages of your project.

In the Kameleoon App, define your consent management policy and choose Consent required.

Then integrate the following Kameleoon functions:

• enableLegalConsent
• disableLegalConsent

Note: To learn more on legal consent with Kameleoon, please read this documentation. And for more technical informations about the states and modes, you can read this documentation.

The custom script can be used directly in page, in Google Tag Manager or in Global custom script in the App.

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

Go to the Projects menu.

On the card for your site or mobile app, click on Configuration.

Unfold the General section.

Any JavaScript code you add in the Global custom script insert will be executed every time the page is loaded. This feature is usually used to add complex tracking code or integration to other solutions.

Copy and paste one of the the codes below, depending on the Kameleoon Template you chose.

Example of custom script if A/B testing and Personalization are on 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 having 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 question, feel free to contact your Kameleoon Custom Success Manager.