> ## 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

> Integrieren Sie die Usercentrics CMP mit Kameleoon, um die Einwilligung der Besucher automatisch zu verwalten und A/B-Tests auf Ihrem Usercentrics-Einwilligungsbanner durchzuführen.

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:

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

<Frame>
  ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/integrations/as-a-source/cmp/usercentrics/Capture-decran-2023-07-20-a-14.05.13.png)
</Frame>

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

<Frame>
  ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/integrations/as-a-source/cmp/usercentrics/Capture-decran-2023-07-20-a-14.06.43-1920x743.png)
</Frame>

## IAB TCF in Usercentrics einrichten

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

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

<Frame>
  ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/integrations/as-a-source/cmp/usercentrics/Capture-decran-2023-07-20-a-15.18.10.png)
</Frame>

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

<Frame>
  ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/integrations/as-a-source/cmp/usercentrics/image-33.png)
</Frame>

6. [Aktivieren Sie die IAB TCF-Integration in Kameleoon](./iab-transparency-and-consent-framework).

## Benutzerdefinierte Integration Kameleoon Legal Consent

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

<Warning>
  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.
</Warning>

<Note>
  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.
</Note>

1. Definieren Sie in Kameleoon [Ihre Einwilligungsverwaltungsrichtlinie](../../../project-management/consent-management-policy#so-definieren-sie-ihre-richtlinie-zur-einwilligungsverwaltung) und wählen Sie **Consent required**.
2. Integrieren Sie die folgenden Kameleoon-Funktionen:
   * `enableLegalConsent`
   * `disableLegalConsent`

<Note>
  Weitere Informationen zur rechtlichen Einwilligung in Kameleoon finden Sie in der [Legal Consent API-Referenz](../../../../developer-docs/apis/activation-api-js/api-reference/api-reference#enablelegalconsent). Weitere Informationen zu Einwilligungszuständen und -modi finden Sie in der [Dokumentation zur Einwilligungsverwaltung](../../../../developer-docs/privacy-and-compliance/consent-management).
</Note>

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:

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

<Frame>
  ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/integrations/as-a-source/cmp/usercentrics/Capture-decran-2021-05-10-a-14.44.41-1.png)
</Frame>

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

<Tabs>
  <Tab title="Web CMP v2">
    ### Beispiel eines benutzerdefinierten Skripts, wenn A/B-Testing und Personalisierung im selben Service sind

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

    ### 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

    ```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();
    ```
  </Tab>

  <Tab title="Web CMP v3">
    <Tabs>
      <Tab title="Both (H1yDxp7JN) – Global script">
        ```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();
        ```
      </Tab>

      <Tab title="Both (H1yDxp7JN) – kameleoonQueue">
        ```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);
        ```
      </Tab>

      <Tab title="A/B testing + Personalization – Global script">
        ```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();
        ```
      </Tab>

      <Tab title="A/B testing + Personalization – kameleoonQueue">
        ```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();
        });
        ```
      </Tab>
    </Tabs>
  </Tab>
</Tabs>

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

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

<Note>
  Führen Sie pro Website nur ein Einwilligungs-Experiment aus.
</Note>

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

1. Klicken Sie auf **Configure** > **Goals** > **New goal**.
2. Wählen Sie in **Website Selection** die Website aus, die Sie bei der Erstellung Ihres Kontos definiert haben.
3. 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](https://docs.usercentrics.com/#/ab-test?id=available-ui-events).
4. Klicken Sie auf **Next**.
5. Geben Sie im Feld **Name your goal** einen Namen für Ihr Ziel ein.
6. 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.

<Frame>
  ![](https://docs.usercentrics.com/assets/ab-testing/kam6.png)
</Frame>

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

1. Öffnen Sie das [Experiments-Dashboard](https://app.kameleoon.com/experiments/dashboard).
2. Klicken Sie auf **New Experiment**. Ein Pop-in öffnet sich und fragt, welchen Typ von Experiment Sie erstellen möchten.
3. Klicken Sie auf **In the code editor** > **JS/CSS**.
4. Geben Sie den **Name**, die **Website** und die **URL of the page where you want to launch your experiment** ein.
5. Klicken Sie auf **Validate**. Der Code Editor wird geöffnet.

<Frame>
  ![](https://docs.usercentrics.com/assets/ab-testing/kam8.png)
</Frame>

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

```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` 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](https://docs.usercentrics.com/#/ab-test?id=available-ui-events).
* 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)`

8. Gehen Sie zurück zum Tab **Variations**.

9. Fügen Sie in **Variation 1** den folgenden Code hinzu:

   `window.UC_AB_VARIANT = "variant1";`

10. Falls Sie Ihrer Variation einen anderen Namen gegeben haben, ersetzen Sie `variant1` entsprechend.

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

12. 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](https://docs.usercentrics.com/#/ab-test?id=ab-testing-with-third-party-tool).
