> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kameleoon.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Usercentrics
> Integrate Usercentrics CMP with Kameleoon to automatically manage visitor consent and run A/B tests on your Usercentrics consent banner.
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 for seamless compliance.
* Reassures users that Kameleoon handles their data in a compliant manner.
## Add Kameleoon as a Data Processing Service in Usercentrics
To add Kameleoon as a Data Processing Service, complete the following steps:
1. In the Usercentrics admin interface, click **Service Settings**.
2. Click **Add DPS via Database** > **Kameleoon**.
3. 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:
1. Set up Kameleoon as a vendor (ID: 820) in Usercentrics.
2. In the Usercentrics admin interface, navigate to **Service Settings**.
3. Set the CMP version to **Version 2**.
4. Click **Configuration**.
5. Enable **Transparency & Consent Framework 2.3 (TCF)**.
6. [Enable the IAB TCF integration in Kameleoon](./iab-transparency-and-consent-framework).
## Custom Kameleoon legal consent integration
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.
1. In Kameleoon, [define your consent management policy](../../../project-management/consent-management-policy#how-to-define-your-consent-management-policy) and choose **Consent required**.
2. Integrate the following Kameleoon functions:
* `enableLegalConsent`
* `disableLegalConsent`
For more information about legal consent in Kameleoon, see the [legal consent API reference](../../../../developer-docs/apis/activation-api-js/api-reference/api-reference#enablelegalconsent). For more information about consent states and modes, see the [consent management documentation](../../../../developer-docs/privacy-and-compliance/consent-management).
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:
1. Go to the **Projects** menu.
2. Click **Configuration** on the card for your site or mobile app.
3. Expand 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
```javascript theme={null}
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
```javascript theme={null}
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();
```
```javascript theme={null}
function setConsentStatus(type, status) {
if (status) {
Kameleoon.API.Core.enableLegalConsent(type);
} else if (!status) {
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 kameleoonService = services.find((service) => service?.id === 'H1yDxp7JN');
if (kameleoonService?.consent && typeof kameleoonService.consent.status === 'boolean') {
setConsentStatus('BOTH', kameleoonService.consent.status);
}
}).catch(console.error);
}, 200);
}
initKameleoonLegalConsent();
```
```javascript theme={null}
window.kameleoonQueue = window.kameleoonQueue || [];
window.kameleoonQueue.push(() => {
function setConsentStatus(type, status) {
if (status) {
Kameleoon.API.Core.enableLegalConsent(type);
} else if (!status) {
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 kameleoonService = services.find((service) => service?.id === 'H1yDxp7JN');
if (kameleoonService?.consent && typeof kameleoonService.consent.status === 'boolean') {
setConsentStatus('BOTH', kameleoonService.consent.status);
}
}).catch(console.error);
}, 200);
}
initKameleoonLegalConsent();
});
```
```javascript theme={null}
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();
```
```javascript theme={null}
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();
});
```
If you have any questions, feel free to contact your Kameleoon Custom Success Manager.
## Run an A/B test on the Usercentrics consent banner
Run only one consent experiment per site.
To run an A/B test on the Usercentrics consent banner, first 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**.
* Usercentrics supports several custom events for custom goals. For the full list of available events, see [available UI events in the Usercentrics documentation](https://docs.usercentrics.com/#/ab-test?id=available-ui-events).
4. Click **Next**.
5. Enter a name for your goal in the **Name your goal** field.
6. 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 creating the goal, create an experiment:
1. Open the [Experiments dashboard](https://app.kameleoon.com/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 opens.
6. Click **Experiment** (above **Variations** in the left menu), then click **Test specific code** in the right menu.
7. Add the following code:
```javascript theme={null}
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](https://docs.usercentrics.com/#/ab-test?id=available-ui-events).
* 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)`
8. Go back to the **Variations** tab.
9. In **Variation 1**, add the following code:
`window.UC_AB_VARIANT = "variant1";`
10. If you named your variant something else, replace `variant1` accordingly.
11. 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.
12. Click **Publish** to finalize the experiment setup.
For a walkthrough of Usercentrics internal A/B testing, see the [Usercentrics A/B testing guide](https://docs.usercentrics.com/#/ab-test?id=ab-testing-with-third-party-tool).