Usercentrics - Kameleoon Documentation

Usercentrics 同意管理プラットフォーム (CMP) には、必要かつ最新のデータプライバシー情報がすべて含まれています。 Usercentrics 統合により、Kameleoon は Usercentrics に自動的に接続し、同意ポリシーを読み取り、Web サイトで実験やパーソナライゼーションを表示する際にそのポリシーを適用します。この統合には以下のメリットがあります:

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

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

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

Usercentrics のダッシュボードで Service Settings をクリックします。
Add DPS via Database > Kameleoon をクリックします。

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

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

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

Usercentrics で Kameleoon をベンダー (ID: 820) としてセットアップします。
Usercentrics のダッシュボードで Service Settings に移動します。
CMP バージョンを Version 2 に設定します。

Configuration をクリックします。
Transparency & Consent Framework 2.3 (TCF) を有効化します。

Kameleoon で IAB TCF 統合を有効化します。

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

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

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

Kameleoon で同意管理ポリシーを定義し、Consent required を選択します。
以下の Kameleoon 関数を統合します:
- enableLegalConsent
- disableLegalConsent

Kameleoon の法的同意に関する詳細は、legal consent API リファレンスを参照してください。同意のステートおよびモードに関する詳細は、同意管理ドキュメントを参照してください。

カスタムスクリプトは、ページ内、Google Tag Manager、または Kameleoon アプリの Global custom script に直接追加できます。 Global custom script でカスタムスクリプトを使用するには、以下の手順に従います:

Admin > Projects をクリックします。
プロジェクトの行にある Edit をクリックし、Scripts タブをクリックします。

The Scripts tab with the Global custom script and Variation selection script editors

Global custom script の横にある Edit をクリックします。
選択した Kameleoon テンプレートに応じて、以下のコードブロックのいずれかをコピーして貼り付け、Save changes をクリックします。

Web CMP v2
Web CMP v3

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

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

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

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

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

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

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

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

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

Experiments ダッシュボードを開きます。
New Experiment をクリックします。作成したい実験のタイプを尋ねるポップインが開きます。
In the code editor > JS/CSS をクリックします。
Name、Website、および 実験を開始したいページの URL を入力します。
Validate をクリックします。コードエディタが開きます。

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

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 Kameleoon's custom events for each basic action
      //in Kameleoon's 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 を参照してください。
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)

Variations タブに戻ります。
Variation 1 に以下のコードを追加します: window.UC_AB_VARIANT = "variant1";
バリアントに別の名前を付けた場合は、variant1 を適宜置き換えてください。
Finalize タブで、トラフィック分配、ターゲティング、トラッキング、ゴールを選択します。
- 作成したゴールを追加します。ゴールの一意の ID で検索できます。検索結果が表示されない場合は、ゴール ID の最初の数桁のみを入力してみてください。
Publish をクリックして実験のセットアップを最終化します。

Usercentrics 内部 A/B テストの手順については、Usercentrics A/B テストガイドを参照してください。

連携

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

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

​Kameleoon Legal Consent のカスタム統合

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

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

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

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

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

Kameleoon Legal Consent のカスタム統合

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

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

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