Usercentrics - Kameleoon Documentation

The Usercentrics Consent Management Platform (CMP) provides all required and up-to-date data privacy information. With the Usercentrics integration, Kameleoon automatically connects to Usercentrics, reads the consent policy, and applies the policy when displaying experiments and personalizations on your website. The integration provides the following benefits:

Automatically manages user consent through Usercentrics CMP with no additional setup.
Ensures consistent consent management and compliance.
Reassures users that Kameleoon handles their data compliantly.

Add Kameleoon as a Data Processing Service in Usercentrics

To add Kameleoon as a Data Processing Service, complete the following steps:

In the Usercentrics admin interface, click Service Settings.
Click Add DPS via Database > Kameleoon.

Select your category in the Category dropdown.

Kameleoon provides the following 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.3 in Usercentrics and Kameleoon, complete the following steps:

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

Click Configuration.
Enable Transparency & Consent Framework 2.3 (TCF).

Enable the IAB TCF integration in Kameleoon.

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

Do not block Kameleoon when consent status is unknown (on a visitor’s first visit). Blocking Kameleoon on an unknown consent status makes the custom script setup ineffective.

The custom script shows users campaigns when consent status is unknown, without tracking. You can also show A/B testing changes on your project’s entry pages.

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

For more information about legal consent in Kameleoon, see the legal consent API reference. For more information about consent states and modes, see the consent management documentation.

You can add a custom script directly in a page, in Google Tag Manager, or in the Global custom script in the Kameleoon app. To use a custom script in the Global custom script, follow these steps:

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

Expand the General section.
Copy and paste one of the code blocks below, depending on the Kameleoon template you chose.

Web CMP v2
Web CMP v3

Custom script for A/B testing and Personalization 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();

Custom script for A/B testing and Personalization 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();

Both (H1yDxp7JN) – Global script
Both (H1yDxp7JN) – kameleoonQueue
A/B testing + Personalization – Global script
A/B testing + Personalization – kameleoonQueue

const UcConsent = () => {
    const serviceID = 'H1yDxp7JN';

    function setConsentStatus(type, status) {
        if (status === true) {
            Kameleoon.API.Core.enableLegalConsent(type);
        } else if (status === false) {
            Kameleoon.API.Core.disableLegalConsent(type);
        }
    }

    function checkConsentStatus() {
        if (window.__ucCmp?.getConsentDetails === undefined) return;
        window.__ucCmp.getConsentDetails().then((details) => {
            const consent = details.services?.[serviceID]?.consent?.given;
            if (consent === undefined) return;
            setConsentStatus('BOTH', consent);
        });
    }

    const checkConsentInteraction = (event) => {
        if (window.__ucCmp?.isConsentRequired === undefined) return;
        window.__ucCmp.isConsentRequired().then((isRequired) => {
            if (isRequired) return;
            const consentStatus = event?.detail?.consent?.status;
            if (consentStatus === 'ALL_ACCEPTED') {
                setConsentStatus('BOTH', true);
            } else if (consentStatus === 'ALL_DENIED') {
                setConsentStatus('BOTH', false);
            } else {
                checkConsentStatus();
            }
        });
    };

    checkConsentInteraction();

    Kameleoon.API.Utils.addEventListener(window, 'UC_CONSENT', checkConsentInteraction);
};

UcConsent();

const UcConsent = () => {
    const serviceID = 'H1yDxp7JN';

    function setConsentStatus(type, status) {
        if (status === true) {
            Kameleoon.API.Core.enableLegalConsent(type);
        } else if (status === false) {
            Kameleoon.API.Core.disableLegalConsent(type);
        }
    }

    function checkConsentStatus() {
        if (window.__ucCmp?.getConsentDetails === undefined) return;
        window.__ucCmp.getConsentDetails().then((details) => {
            const consent = details.services?.[serviceID]?.consent?.given;
            if (consent === undefined) return;
            setConsentStatus('BOTH', consent);
        });
    }

    const checkConsentInteraction = (event) => {
        if (window.__ucCmp?.isConsentRequired === undefined) return;
        window.__ucCmp.isConsentRequired().then((isRequired) => {
            if (isRequired) return;
            const consentStatus = event?.detail?.consent?.status;
            if (consentStatus === 'ALL_ACCEPTED') {
                setConsentStatus('BOTH', true);
            } else if (consentStatus === 'ALL_DENIED') {
                setConsentStatus('BOTH', false);
            } else {
                checkConsentStatus();
            }
        });
    };

    checkConsentInteraction();

    Kameleoon.API.Utils.addEventListener(window, 'UC_CONSENT', checkConsentInteraction);
};

window.kameleoonQueue = window.kameleoonQueue || [];
window.kameleoonQueue.push(UcConsent);

function setConsentStatus(type, status) {
  if (status === true) {
    Kameleoon.API.Core.enableLegalConsent(type);
  } else if (status === false) {
    Kameleoon.API.Core.disableLegalConsent(type);
  }
}

function initKameleoonLegalConsent() {
  Kameleoon.API.Core.runWhenConditionTrue(
    () => typeof window.UC_UI !== 'undefined' && window.UC_UI.isInitialized() === true,
    () => {
      window.UC_UI.getServicesBaseInfo()
        .then((services) => {
          const abtestingService = services.find((service) => service?.id === '9FYjH37-J');
          if (abtestingService?.consent && typeof abtestingService.consent.status === 'boolean') {
            setConsentStatus('AB_TESTING', abtestingService.consent.status);
          }

          const persoService = services.find((service) => service?.id === '2lh8-reEz');
          if (persoService?.consent && typeof persoService.consent.status === 'boolean') {
            setConsentStatus('PERSONALIZATION', persoService.consent.status);
          }
        })
        .catch(console.error);
    },
    200
  );
}

initKameleoonLegalConsent();

window.kameleoonQueue = window.kameleoonQueue || [];
window.kameleoonQueue.push(() => {

  function setConsentStatus(type, status) {
    if (status === true) {
      Kameleoon.API.Core.enableLegalConsent(type);
    } else if (status === false) {
      Kameleoon.API.Core.disableLegalConsent(type);
    }
  }

  function initKameleoonLegalConsent() {
    Kameleoon.API.Core.runWhenConditionTrue(
      () => typeof window.UC_UI !== 'undefined' && window.UC_UI.isInitialized() === true,
      () => {
        window.UC_UI.getServicesBaseInfo()
          .then((services) => {
            const abtestingService = services.find((service) => service?.id === '9FYjH37-J');
            if (abtestingService?.consent && typeof abtestingService.consent.status === 'boolean') {
              setConsentStatus('AB_TESTING', abtestingService.consent.status);
            }

            const persoService = services.find((service) => service?.id === '2lh8-reEz');
            if (persoService?.consent && typeof persoService.consent.status === 'boolean') {
              setConsentStatus('PERSONALIZATION', persoService.consent.status);
            }
          })
          .catch(console.error);
      },
      200
    );
  }

  initKameleoonLegalConsent();
});

Contact your Kameleoon Customer Success Manager if you have questions.

Run only one consent experiment per site.

To run an A/B test on the Usercentrics consent banner, first create a goal:

Click Configure > Goals > New goal.
In Website Selection, choose the website you defined when you created your account.
Select Custom Goal in Type.
- Usercentrics supports several custom events for custom goals. For the full list of available events, see available UI events in the Usercentrics documentation.
Click Next.
Enter a name for your goal in the Name your goal field.
In the Describe your goal field, enter Kameleoon.API.Goals.processConversion followed by the unique ID.
- You can find the ID in the New goal pop-in at the end of the function text.

After you create the goal, create an experiment:

Open the Experiments dashboard.
Click New Experiment. A pop-in opens asking what type of experiment you want to create.
Click In the code editor > JS/CSS.
Enter the Name, Website, and URL of the page where you want to launch your experiment.
Click Validate. The code editor opens.

Click Experiment (above Variations in the left menu), then click Test specific code in the right menu.
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, empty variant. It makes no changes to the consent management platform. If your default variant has a different name, update window.UC_AB_VARIANT accordingly.
The event listener fires each time a custom event occurs. For the full list of custom events for A/B testing, see available UI events in the Usercentrics documentation.
The three console.log statements output information about the event. For example, tracking ACCEPT_ALL produces these logs:

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

You can add more goals to the experiment. To add a goal, insert the following code after the last if statement: if (data.detail.type === "Consent Management Platform event here") Kameleoon.API.Goals.processConversion(goalID)

Go back to the Variations tab.
In Variation 1, add the following code: window.UC_AB_VARIANT = "variant1";
If you named your variant something else, replace variant1 accordingly.
In the Finalize tab, select your traffic distribution, targeting, tracking, and goals.
- Add the goal you created. You can search by the goal’s unique ID. If search returns no results, try entering only the first digits of the goal ID.
Click Publish to finalize the experiment setup.

For a walkthrough of Usercentrics internal A/B testing, see the Usercentrics A/B testing guide.

​Add Kameleoon as a Data Processing Service in Usercentrics

​Set up IAB TCF in Usercentrics

​Custom Kameleoon legal consent integration

​Custom script for A/B testing and Personalization on the same service

​Custom script for A/B testing and Personalization on different services

​Run an A/B test on the Usercentrics consent banner

Add Kameleoon as a Data Processing Service in Usercentrics

Set up IAB TCF in Usercentrics

Custom Kameleoon legal consent integration

Custom script for A/B testing and Personalization on the same service

Custom script for A/B testing and Personalization on different services

Run an A/B test on the Usercentrics consent banner