Usercentrics - Kameleoon Documentation

Die Usercentrics Consent Management Platform (CMP) enthält alle erforderlichen und aktuellen Datenschutzinformationen. Mit der Usercentrics-Integration verbindet sich Kameleoon automatisch mit Usercentrics, liest die Einwilligungsrichtlinie aus und wendet diese bei der Anzeige von Experimenten und Personalisierungen auf Ihrer Website an. Die Integration bietet die folgenden Vorteile:

Automatische Verwaltung der Nutzereinwilligung über die Usercentrics CMP ohne zusätzliche Einrichtung.
Sorgt für eine konsistente Einwilligungsverwaltung und nahtlose Compliance.
Gibt Nutzern die Gewissheit, dass Kameleoon ihre Daten konform verarbeitet.

Kameleoon als Data Processing Service in Usercentrics hinzufügen

Um Kameleoon als Data Processing Service hinzuzufügen, gehen Sie wie folgt vor:

Klicken Sie in der Admin-Oberfläche von Usercentrics auf Service Settings.
Klicken Sie auf Add DPS via Database > Kameleoon.

Wählen Sie Ihre Kategorie im Dropdown Category aus.

Kameleoon stellt die folgenden Template-IDs bereit:

Kameleoon AB Testing & Personalization / Template ID: H1yDxp7JN
Kameleoon Only AB Testing Module / Template ID: 9FYjH37-J
Kameleoon Only Personalization Module / Template ID: 2lh8-reEz

IAB TCF in Usercentrics einrichten

Um IAB TCF 2.3 in Usercentrics und Kameleoon zu aktivieren, gehen Sie wie folgt vor:

Richten Sie Kameleoon als Anbieter (ID: 820) in Usercentrics ein.
Navigieren Sie in der Admin-Oberfläche von Usercentrics zu Service Settings.
Setzen Sie die CMP-Version auf Version 2.

Klicken Sie auf Configuration.
Aktivieren Sie Transparency & Consent Framework 2.3 (TCF).

Aktivieren Sie die IAB TCF-Integration in Kameleoon.

Wenn Sie TCF 2.3 in Usercentrics nicht aktivieren können, können Sie eine benutzerdefinierte Skript-Einrichtung verwenden.

Blockieren Sie Kameleoon nicht, wenn der Einwilligungsstatus unbekannt ist (beim ersten Besuch eines Besuchers). Wenn Sie Kameleoon bei einem unbekannten Einwilligungsstatus blockieren, wird die benutzerdefinierte Skript-Einrichtung wirkungslos.

Das benutzerdefinierte Skript zeigt Nutzern Kampagnen an, wenn der Einwilligungsstatus unbekannt ist, ohne sie zu tracken. Sie können auch A/B-Testing-Änderungen auf den Einstiegsseiten Ihres Projekts anzeigen.

Definieren Sie in Kameleoon Ihre Einwilligungsverwaltungsrichtlinie und wählen Sie Consent required.
Integrieren Sie die folgenden Kameleoon-Funktionen:
- enableLegalConsent
- disableLegalConsent

Weitere Informationen zur rechtlichen Einwilligung in Kameleoon finden Sie in der Legal Consent API-Referenz. Weitere Informationen zu Einwilligungszuständen und -modi finden Sie in der Dokumentation zur Einwilligungsverwaltung.

Sie können ein benutzerdefiniertes Skript direkt auf einer Seite, in Google Tag Manager oder im Global custom script in der Kameleoon-App hinzufügen. Um ein benutzerdefiniertes Skript im Global custom script zu verwenden, gehen Sie wie folgt vor:

Gehen Sie zum Menü Projects.
Klicken Sie auf Configuration auf der Karte für Ihre Website oder mobile App.

Öffnen Sie den Abschnitt General.
Kopieren Sie einen der untenstehenden Codeblöcke und fügen Sie ihn ein, je nach dem von Ihnen gewählten Kameleoon-Template.

Web CMP v2
Web CMP v3

Beispiel eines benutzerdefinierten Skripts, wenn A/B-Testing und Personalisierung im selben Service sind

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

Beispiel eines benutzerdefinierten Skripts, wenn A/B-Testing und Personalisierung in verschiedenen Services sind

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

Falls Sie Fragen haben, wenden Sie sich gerne an Ihren Kameleoon Custom Success Manager.

A/B-Test auf dem Usercentrics-Einwilligungsbanner durchführen

Führen Sie pro Website nur ein Einwilligungs-Experiment aus.

Um einen A/B-Test auf dem Usercentrics-Einwilligungsbanner durchzuführen, erstellen Sie zunächst ein Ziel:

Klicken Sie auf Configure > Goals > New goal.
Wählen Sie in Website Selection die Website aus, die Sie bei der Erstellung Ihres Kontos definiert haben.
Wählen Sie Custom Goal in Type.
- Usercentrics unterstützt mehrere benutzerdefinierte Ereignisse für benutzerdefinierte Ziele. Die vollständige Liste der verfügbaren Ereignisse finden Sie unter available UI events in der Usercentrics-Dokumentation.
Klicken Sie auf Next.
Geben Sie im Feld Name your goal einen Namen für Ihr Ziel ein.
Geben Sie im Feld Describe your goal Kameleoon.API.Goals.processConversion gefolgt von der eindeutigen ID ein.
- Sie finden die ID im Pop-in New goal am Ende des Funktionstexts.

Nachdem Sie das Ziel erstellt haben, erstellen Sie ein Experiment:

Öffnen Sie das Experiments-Dashboard.
Klicken Sie auf New Experiment. Ein Pop-in öffnet sich und fragt, welchen Typ von Experiment Sie erstellen möchten.
Klicken Sie auf In the code editor > JS/CSS.
Geben Sie den Name, die Website und die URL of the page where you want to launch your experiment ein.
Klicken Sie auf Validate. Der Code Editor wird geöffnet.

Klicken Sie auf Experiment (über Variations im linken Menü) und klicken Sie dann im rechten Menü auf Test specific code.
Fügen Sie den folgenden Code hinzu:

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 ist die standardmäßige, leere Variation. Sie nimmt keine Änderungen an der Consent Management Platform vor. Wenn Ihre Standard-Variation einen anderen Namen hat, passen Sie window.UC_AB_VARIANT entsprechend an.
Der Event Listener wird jedes Mal ausgelöst, wenn ein benutzerdefiniertes Ereignis eintritt. Die vollständige Liste der benutzerdefinierten Ereignisse für A/B-Testing finden Sie unter available UI events in der Usercentrics-Dokumentation.
Die drei console.log-Anweisungen geben Informationen zum Ereignis aus. Beispielsweise erzeugt das Tracking von ACCEPT_ALL diese Logs:

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

Sie können dem Experiment weitere Ziele hinzufügen. Um ein Ziel hinzuzufügen, fügen Sie den folgenden Code nach der letzten if-Anweisung ein: if (data.detail.type === "Consent Management Platform event here") Kameleoon.API.Goals.processConversion(goalID)

Gehen Sie zurück zum Tab Variations.
Fügen Sie in Variation 1 den folgenden Code hinzu: window.UC_AB_VARIANT = "variant1";
Falls Sie Ihrer Variation einen anderen Namen gegeben haben, ersetzen Sie variant1 entsprechend.
Wählen Sie im Tab Finalize Ihre Traffic-Verteilung, Ihr Targeting, Tracking und Ihre Ziele aus.
- Fügen Sie das von Ihnen erstellte Ziel hinzu. Sie können nach der eindeutigen ID des Ziels suchen. Falls die Suche keine Ergebnisse liefert, versuchen Sie es nur mit den ersten Ziffern der Ziel-ID.
Klicken Sie auf Publish, um die Einrichtung des Experiments abzuschließen.

Eine Schritt-für-Schritt-Anleitung zum internen A/B-Testing von Usercentrics finden Sie im Usercentrics A/B-Testing-Leitfaden.

​Kameleoon als Data Processing Service in Usercentrics hinzufügen

​IAB TCF in Usercentrics einrichten

​Benutzerdefinierte Integration Kameleoon Legal Consent

​Beispiel eines benutzerdefinierten Skripts, wenn A/B-Testing und Personalisierung im selben Service sind

​Beispiel eines benutzerdefinierten Skripts, wenn A/B-Testing und Personalisierung in verschiedenen Services sind

​A/B-Test auf dem Usercentrics-Einwilligungsbanner durchführen

Kameleoon als Data Processing Service in Usercentrics hinzufügen

IAB TCF in Usercentrics einrichten

Benutzerdefinierte Integration Kameleoon Legal Consent

Beispiel eines benutzerdefinierten Skripts, wenn A/B-Testing und Personalisierung im selben Service sind

Beispiel eines benutzerdefinierten Skripts, wenn A/B-Testing und Personalisierung in verschiedenen Services sind

A/B-Test auf dem Usercentrics-Einwilligungsbanner durchführen