> ## 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
> Intégrez la CMP Usercentrics à Kameleoon pour gérer automatiquement le consentement des visiteurs et exécuter des A/B tests sur votre bandeau de consentement Usercentrics.
La Consent Management Platform (CMP) d'Usercentrics fournit toutes les informations de confidentialité requises et à jour.
Avec l'intégration Usercentrics, Kameleoon se connecte automatiquement à Usercentrics, lit la politique de consentement et l'applique lors de l'affichage des expériences et personnalisations sur votre site web.
Cette intégration offre les avantages suivants :
* Gère automatiquement le consentement des utilisateurs via la CMP Usercentrics, sans configuration supplémentaire.
* Assure une gestion cohérente du consentement pour une conformité fluide.
* Rassure les utilisateurs sur le fait que Kameleoon traite leurs données de manière conforme.
## Ajouter Kameleoon en tant que Data Processing Service dans Usercentrics
Pour ajouter Kameleoon en tant que Data Processing Service, suivez les étapes ci-dessous :
1. Dans l'interface admin d'Usercentrics, cliquez sur **Service Settings**.
2. Cliquez sur **Add DPS via Database** > **Kameleoon**.
3. Sélectionnez votre catégorie dans la liste déroulante **Category**.
Kameleoon fournit les Template ID suivants :
* Kameleoon AB Testing & Personalization / Template ID : H1yDxp7JN
* Kameleoon Only AB Testing Module / Template ID : 9FYjH37-J
* Kameleoon Only Personalization Module / Template ID : 2lh8-reEz
## Configurer l'IAB TCF dans Usercentrics
Pour activer l'IAB TCF 2.3 dans Usercentrics et Kameleoon, suivez les étapes ci-dessous :
1. Configurez Kameleoon en tant que fournisseur (ID : 820) dans Usercentrics.
2. Dans l'interface admin d'Usercentrics, accédez à **Service Settings**.
3. Définissez la version de la CMP sur **Version 2**.
4. Cliquez sur **Configuration**.
5. Activez **Transparency & Consent Framework 2.3 (TCF)**.
6. [Activez l'intégration IAB TCF dans Kameleoon](./iab-transparency-and-consent-framework).
## Intégration personnalisée Kameleoon Legal Consent
Si vous ne pouvez pas activer TCF 2.3 dans Usercentrics, vous pouvez utiliser une configuration par script personnalisé.
Ne bloquez pas Kameleoon lorsque le statut du consentement est inconnu (lors de la première visite). Bloquer Kameleoon dans cet état rend la configuration par script personnalisé inopérante.
Le script personnalisé affiche aux utilisateurs les campagnes lorsque le statut du consentement est inconnu, sans tracking. Vous pouvez également afficher les modifications d'A/B testing sur les pages d'entrée de votre projet.
1. Dans Kameleoon, [définissez votre politique de gestion du consentement](../../../project-management/consent-management-policy#comment-définir-votre-politique-de-gestion-du-consentement) et choisissez **Consent required**.
2. Intégrez les fonctions Kameleoon suivantes :
* `enableLegalConsent`
* `disableLegalConsent`
Pour en savoir plus sur le consentement légal dans Kameleoon, consultez la [référence de l'API legal consent](../../../../developer-docs/apis/activation-api-js/api-reference/api-reference#enablelegalconsent). Pour en savoir plus sur les états et les modes de consentement, consultez la [documentation sur la gestion du consentement](../../../../developer-docs/privacy-and-compliance/consent-management).
Vous pouvez ajouter un script personnalisé directement dans une page, dans Google Tag Manager, ou dans le **Global custom script** de l'application Kameleoon.
Pour utiliser un script personnalisé dans le **Global custom script**, suivez ces étapes :
1. Accédez au menu **Projects**.
2. Cliquez sur **Configuration** sur la carte de votre site ou application mobile.
3. Dépliez la section **General**.
4. Copiez et collez l'un des blocs de code ci-dessous, selon le modèle Kameleoon que vous avez choisi.
### Exemple de script personnalisé si l'A/B testing et la personnalisation sont sur le même 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();
```
### Exemple de script personnalisé si l'A/B testing et la personnalisation sont sur des services différents
* 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}
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();
```
```javascript theme={null}
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);
```
```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();
});
```
Si vous avez des questions, n'hésitez pas à contacter votre Custom Success Manager Kameleoon.
## Exécuter un A/B test sur le bandeau de consentement Usercentrics
N'exécutez qu'une seule consent experiment par site.
Pour exécuter un A/B test sur le bandeau de consentement Usercentrics, créez d'abord un objectif :
1. Cliquez sur **Configure** > **Goals** > **New goal**.
2. Dans **Website Selection**, choisissez le site web que vous avez défini lors de la création de votre compte.
3. Sélectionnez **Custom Goal** dans **Type**.
* Usercentrics prend en charge plusieurs événements personnalisés pour les objectifs personnalisés. Pour la liste complète des événements disponibles, consultez les [événements UI disponibles dans la documentation Usercentrics](https://docs.usercentrics.com/#/ab-test?id=available-ui-events).
4. Cliquez sur **Next**.
5. Saisissez un nom pour votre objectif dans le champ **Name your goal**.
6. Dans le champ **Describe your goal**, saisissez `Kameleoon.API.Goals.processConversion` suivi de l'Unique ID.
* Vous trouverez cet ID dans le pop-in **New goal**, à la fin du texte de la fonction.
Après avoir créé l'objectif, créez une expérience :
1. Ouvrez le [dashboard des expériences](https://app.kameleoon.com/experiments/dashboard).
2. Cliquez sur **New Experiment**. Un pop-in s'ouvre vous demandant quel type d'expérience vous souhaitez créer.
3. Cliquez sur **In the code editor** > **JS/CSS**.
4. Saisissez le **Name**, le **Website** et l'**URL of the page where you want to launch your experiment**.
5. Cliquez sur **Validate**. L'éditeur de code s'ouvre.
6. Cliquez sur **Experiment** (au-dessus de **Variations** dans le menu de gauche), puis cliquez sur **Test specific code** dans le menu de droite.
7. Ajoutez le code suivant :
```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` est la variation par défaut, vide. Elle n'apporte aucune modification à la consent management platform. Si votre variation par défaut porte un autre nom, mettez à jour `window.UC_AB_VARIANT` en conséquence.
* L'event listener se déclenche à chaque fois qu'un événement personnalisé survient. Pour la liste complète des événements personnalisés pour l'A/B testing, consultez les [événements UI disponibles dans la documentation Usercentrics](https://docs.usercentrics.com/#/ab-test?id=available-ui-events).
* Les trois instructions `console.log` affichent des informations sur l'événement. Par exemple, le suivi d'`ACCEPT_ALL` produit ces logs :
```
TEST: source => FIRST_LAYER
TEST: type => ACCEPT_ALL
TEST: Variant => variant1
```
Vous pouvez ajouter d'autres objectifs à l'expérience.
Pour ajouter un objectif, insérez le code suivant après la dernière instruction `if` :
`if (data.detail.type === "Consent Management Platform event here") Kameleoon.API.Goals.processConversion(goalID)`
8. Revenez à l'onglet **Variations**.
9. Dans **Variation 1**, ajoutez le code suivant :
`window.UC_AB_VARIANT = "variant1";`
10. Si vous avez donné un autre nom à votre variation, remplacez `variant1` en conséquence.
11. Dans l'onglet **Finalize**, sélectionnez votre distribution de trafic, votre ciblage, votre tracking et vos objectifs.
* Ajoutez l'objectif que vous avez créé. Vous pouvez le rechercher par son Unique ID. Si la recherche ne renvoie aucun résultat, essayez de saisir uniquement les premiers chiffres de l'ID de l'objectif.
12. Cliquez sur **Publish** pour finaliser la configuration de l'expérience.
Pour une présentation pas à pas de l'A/B testing interne d'Usercentrics, consultez le [guide A/B testing Usercentrics](https://docs.usercentrics.com/#/ab-test?id=ab-testing-with-third-party-tool).