Usercentrics - Kameleoon Documentation

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 :

Dans l’interface admin d’Usercentrics, cliquez sur Service Settings.
Cliquez sur Add DPS via Database > Kameleoon.

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 :

Configurez Kameleoon en tant que fournisseur (ID : 820) dans Usercentrics.
Dans l’interface admin d’Usercentrics, accédez à Service Settings.
Définissez la version de la CMP sur Version 2.

Cliquez sur Configuration.
Activez Transparency & Consent Framework 2.3 (TCF).

Activez l’intégration IAB TCF dans Kameleoon.

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.

Dans Kameleoon, définissez votre politique de gestion du consentement et choisissez Consent required.
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. Pour en savoir plus sur les états et les modes de consentement, consultez la documentation sur la gestion du consentement.

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 :

Accédez au menu Projects.
Cliquez sur Configuration sur la carte de votre site ou application mobile.

Dépliez la section General.
Copiez et collez l’un des blocs de code ci-dessous, selon le modèle Kameleoon que vous avez choisi.

Web CMP v2
Web CMP v3

Exemple de script personnalisé si l’A/B testing et la personnalisation sont sur le même 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();

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

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

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 :

Cliquez sur Configure > Goals > New goal.
Dans Website Selection, choisissez le site web que vous avez défini lors de la création de votre compte.
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.
Cliquez sur Next.
Saisissez un nom pour votre objectif dans le champ Name your goal.
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 :

Ouvrez le dashboard des expériences.
Cliquez sur New Experiment. Un pop-in s’ouvre vous demandant quel type d’expérience vous souhaitez créer.
Cliquez sur In the code editor > JS/CSS.
Saisissez le Name, le Website et l’URL of the page where you want to launch your experiment.
Cliquez sur Validate. L’éditeur de code s’ouvre.

Cliquez sur Experiment (au-dessus de Variations dans le menu de gauche), puis cliquez sur Test specific code dans le menu de droite.
Ajoutez le code suivant :

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.
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)

Revenez à l’onglet Variations.
Dans Variation 1, ajoutez le code suivant : window.UC_AB_VARIANT = "variant1";
Si vous avez donné un autre nom à votre variation, remplacez variant1 en conséquence.
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.
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.

​Ajouter Kameleoon en tant que Data Processing Service dans Usercentrics

​Configurer l’IAB TCF dans Usercentrics

​Intégration personnalisée Kameleoon Legal Consent

​Exemple de script personnalisé si l’A/B testing et la personnalisation sont sur le même service

​Exemple de script personnalisé si l’A/B testing et la personnalisation sont sur des services différents

​Exécuter un A/B test sur le bandeau de consentement Usercentrics

Ajouter Kameleoon en tant que Data Processing Service dans Usercentrics

Configurer l’IAB TCF dans Usercentrics

Intégration personnalisée Kameleoon Legal Consent

Exemple de script personnalisé si l’A/B testing et la personnalisation sont sur le même service

Exemple de script personnalisé si l’A/B testing et la personnalisation sont sur des services différents

Exécuter un A/B test sur le bandeau de consentement Usercentrics