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 でカスタムスクリプトを使用するには、以下の手順に従います:

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

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

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 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 を参照してください。
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 テストを実行する