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

> Usercentrics CMP と Kameleoon を統合して、訪問者の同意を自動的に管理し、Usercentrics の同意バナーで A/B テストを実行します。

Usercentrics 同意管理プラットフォーム (CMP) には、必要かつ最新のデータプライバシー情報がすべて含まれています。

Usercentrics 統合により、Kameleoon は Usercentrics に自動的に接続し、同意ポリシーを読み取り、Web サイトで実験やパーソナライゼーションを表示する際にそのポリシーを適用します。

この統合には以下のメリットがあります:

* 追加のセットアップなしで、Usercentrics CMP を通じてユーザーの同意を自動的に管理します。
* 一貫した同意管理を実現し、シームレスなコンプライアンスを確保します。
* Kameleoon がユーザーのデータを準拠した方法で取り扱っていることを、ユーザーに安心して感じていただけます。

## Usercentrics に Kameleoon を Data Processing Service として追加する

Kameleoon を Data Processing Service として追加するには、以下の手順を実行します:

1. Usercentrics の管理インターフェースで **Service Settings** をクリックします。
2. **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. **Category** ドロップダウンでカテゴリを選択します。

Kameleoon は以下のテンプレート ID を提供しています:

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

## Usercentrics で IAB TCF をセットアップする

Usercentrics と Kameleoon で IAB TCF 2.3 を有効化するには、以下の手順を実行します:

1. Usercentrics で Kameleoon をベンダー (ID: 820) としてセットアップします。
2. Usercentrics の管理インターフェースで **Service Settings** に移動します。
3. CMP バージョンを **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. **Configuration** をクリックします。
5. **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. [Kameleoon で IAB TCF 統合を有効化します](./iab-transparency-and-consent-framework)。

## Kameleoon Legal Consent のカスタム統合

Usercentrics で TCF 2.3 を有効化できない場合は、カスタムスクリプトのセットアップを使用できます。

<Warning>
  同意ステータスが不明な場合 (訪問者の初回訪問時) に Kameleoon をブロックしないでください。同意ステータスが不明な状態で Kameleoon をブロックすると、カスタムスクリプトのセットアップが無効になります。
</Warning>

<Note>
  このカスタムスクリプトは、同意ステータスが不明な場合に、トラッキングを行わずにキャンペーンをユーザーに表示します。プロジェクトのエントリーページで A/B テストの変更を表示することもできます。
</Note>

1. Kameleoon で[同意管理ポリシーを定義](../../../project-management/consent-management-policy#同意管理ポリシーの定義方法)し、**Consent required** を選択します。
2. 以下の Kameleoon 関数を統合します:
   * `enableLegalConsent`
   * `disableLegalConsent`

<Note>
  Kameleoon の法的同意に関する詳細は、[legal consent API リファレンス](../../../../developer-docs/apis/activation-api-js/api-reference/api-reference#enablelegalconsent)を参照してください。同意のステートおよびモードに関する詳細は、[同意管理ドキュメント](../../../../developer-docs/privacy-and-compliance/consent-management)を参照してください。
</Note>

カスタムスクリプトは、ページ内、Google Tag Manager、または Kameleoon アプリの **Global custom script** に直接追加できます。

**Global custom script** でカスタムスクリプトを使用するには、以下の手順に従います:

1. **Projects** メニューに移動します。
2. サイトまたはモバイルアプリのカードで **Configuration** をクリックします。

<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. **General** セクションを展開します。
4. 選択した Kameleoon テンプレートに応じて、以下のコードブロックのいずれかをコピーして貼り付けます。

<Tabs>
  <Tab title="Web CMP v2">
    ### A/B テストとパーソナライゼーションが同じサービスにある場合のカスタムスクリプトの例

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

    ### A/B テストとパーソナライゼーションが異なるサービスにある場合のカスタムスクリプトの例

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

ご不明な点がございましたら、Kameleoon カスタマーサクセスマネージャーまでお気軽にお問い合わせください。

## Usercentrics 同意バナーで A/B テストを実行する

<Note>
  サイトごとに 1 つの同意実験のみを実行してください。
</Note>

Usercentrics 同意バナーで A/B テストを実行するには、まずゴールを作成します:

1. **Configure** > **Goals** > **New goal** をクリックします。
2. **Website Selection** で、アカウント作成時に定義した Web サイトを選択します。
3. **Type** で **Custom Goal** を選択します。
   * Usercentrics は、カスタムゴール用にいくつかのカスタムイベントをサポートしています。利用可能なイベントの完全なリストについては、[Usercentrics ドキュメントの available UI events](https://docs.usercentrics.com/#/ab-test?id=available-ui-events) を参照してください。
4. **Next** をクリックします。
5. **Name your goal** フィールドにゴールの名前を入力します。
6. **Describe your goal** フィールドに `Kameleoon.API.Goals.processConversion` と、その後に一意の ID を入力します。
   * ID は **New goal** ポップインの関数テキストの末尾で確認できます。

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

ゴールを作成したら、実験を作成します:

1. [Experiments ダッシュボード](https://app.kameleoon.com/experiments/dashboard)を開きます。
2. **New Experiment** をクリックします。作成したい実験のタイプを尋ねるポップインが開きます。
3. **In the code editor** > **JS/CSS** をクリックします。
4. **Name**、**Website**、および **実験を開始したいページの URL** を入力します。
5. **Validate** をクリックします。コードエディタが開きます。

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

6. **Experiment** (左メニューの **Variations** の上) をクリックし、右側のメニューで **Test specific code** をクリックします。
7. 以下のコードを追加します:

```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` はデフォルトの空のバリアントです。同意管理プラットフォームには変更を加えません。デフォルトのバリアントが別の名前である場合は、それに応じて `window.UC_AB_VARIANT` を更新してください。
* イベントリスナーは、カスタムイベントが発生するたびにトリガーされます。A/B テスト用カスタムイベントの完全なリストについては、[Usercentrics ドキュメントの available UI events](https://docs.usercentrics.com/#/ab-test?id=available-ui-events) を参照してください。
* 3 つの `console.log` 文は、イベントに関する情報を出力します。たとえば、`ACCEPT_ALL` をトラッキングすると、次のようなログが出力されます:

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

実験にはさらにゴールを追加できます。

ゴールを追加するには、最後の `if` 文の後に以下のコードを挿入します:

`if (data.detail.type === "Consent Management Platform event here") Kameleoon.API.Goals.processConversion(goalID)`

8. **Variations** タブに戻ります。

9. **Variation 1** に以下のコードを追加します:

   `window.UC_AB_VARIANT = "variant1";`

10. バリアントに別の名前を付けた場合は、`variant1` を適宜置き換えてください。

11. **Finalize** タブで、トラフィック分配、ターゲティング、トラッキング、ゴールを選択します。
    * 作成したゴールを追加します。ゴールの一意の ID で検索できます。検索結果が表示されない場合は、ゴール ID の最初の数桁のみを入力してみてください。

12. **Publish** をクリックして実験のセットアップを最終化します。

Usercentrics 内部 A/B テストの手順については、[Usercentrics A/B テストガイド](https://docs.usercentrics.com/#/ab-test?id=ab-testing-with-third-party-tool)を参照してください。