Adobe Experience Manager ContextHub ツール

Dynamic Tag Management と Adobe Experience Manager(AEM)ContextHub(データレイヤーの AEM バージョン)を統合するには、AEM ContextHub ツールを使用します。また、このツールでは、任意のデータレイヤー(AEM を使用しない Web サイト用を含む)を DTM と統合することもできます。

DTM を使用するお客様は、多くの場合、データ要素を使用して Web サイトのデータレイヤーにマッピングします。 例えば、データレイヤーには、ユーザーが特定の製品を探している情報や、買い物かごに品目を入れた情報が含まれる場合があります。 DTM では、この情報を様々な方法でルール条件やアクションに使用できます。 これには、レポート目的で Analytics にデータを送信する処理や、ユーザー向けにカスタマイズされた内容を Target に表示する処理が含まれます。

AEM ContextHub ツールを使用すると、データレイヤーに関連する多くの問題を解決できます。 一部のデータレイヤーは、ページの先頭に読み込まれません。 その他のデータレイヤーは、動的または非同期的で、ページの変更に応じて頻繁に変化します。 以前は、これらの問題の両方が原因で、DTM がデータを効果的に送信したりアクションをトリガーしたりできない問題が発生していました。

AEM ContextHub ツールを使用すると、データレイヤーが変更されたか、ページの上部以外の場所に読み込まれたか、ページの変更に応じて変更されたかを頻繁に確認するカスタムコードを記述する必要がなくなります。

例えば、顧客が買い物かごに品目を入れた後、その品目を削除したとします。 データレイヤーが変更されてもページが更新されない場合、カスタムコードを追加しないと、DTM は変更を認識できません。AEM ContexHub ツールには、変化があるかどうかを確認するポーリングエンジンが 1 秒ごとに含まれています。

DTM がデータレイヤー経由でデータ要素を積極的に設定できるようになったので、AEM ContextHub データ要素と、以前にリリースされた条件(データ要素の値など)を組み合わせて使用することもできます。 これにより、ユーザーの操作によってデータレイヤーが変更された場合に、ページ読み込み時にデータレイヤーの値を管理したり、データ要素の値の条件と dataelementchanged イベントを組み合わせたりできます。

このツールを設定する際、デフォルト設定を使用して AEM ContextHub と統合するか、構造をカスタマイズして任意の Web サイトと連携させることができます。

  1. <Web プロパティ名>OverviewAdd a ToolAEM ContextHub をクリックします。

  2. ツールのわかりやすい名前を指定します。

    この名前は、Installed Tools の Overview タブに表示されます。

  3. Create Tool をクリックして、AEM ContextHub Settings ページを表示します。

  4. 次のフィールドに入力します。

    要素 説明
    デフォルトの ContextHub データレイヤーを使用 AEM ContextHub 形式を使用します。 このオプションを選択すると、DTM はこの統合のデフォルトの ContextHub スキーマを参照します。 ContextHub スキーマに修正を加えている場合や、別のデータレイヤーを使用する場合は、カスタムオプションを使用してください。
    ContextHub データレイヤーをカスタマイズする AEM を使用しない場合でも、任意の Web サイトのデータレイヤー構造にマップするカスタム形式を使用します。 このオプションを使用すると、データレイヤーのスキーマを編集できます。 デフォルトでは、編集ウィンドウにデフォルトの ContextHub データレイヤーが入力されます。このレイヤーで、変更をおこなったり、コードで完全に置換したりできます。
    編集画面を開く 「ContextHub データレイヤーをカスタマイズ」オプションを選択した場合は、エディターを使用してカスタムコードを挿入できます。
    注記を追加 この実装に関するメモを追加します。
  5. Save Changes」をクリックします。

ContextHub ツールを使用したデータレイヤー管理

Dynamic Tag Management(DTM)AEM ContextHub ツールは、ContextHub データレイヤー実装にも汎用データレイヤー実装にも使用できます。ContextHub データレイヤースキーマがデフォルトでツールに読み込まれるので、Adobe Experience Manager(AEM)ContextHub ストアとの統合作業はシンプルに実行できます。デフォルトの ContextHub 実装および汎用データレイヤーによるカスタム実装の両方について、例が用意されています。

前提条件

ContextHub ツールを使用するには、次の前提条件を満たす必要があります。

  • Web サイトの ContextHub または JavaScript オブジェクトデータレイヤー。
  • Web サイトで使用されているデータレイヤーを適切に定義する JSON スキーマ。
  • Web サイトで使用中のメインな DTM Web プロパティ。

AEM ContextHub ツールコンポーネント

AEM ContextHub ツールを使用すると、DTM に次の 2 つの機能が追加されます。

  • データレイヤー定義
  • AEM ContextHub データレイヤータイプ

また、dataelementchanged という、データレイヤー監視を容易にする新しいイベントタイプが追加されました。 このイベントタイプは、AEM ContextHub ツールとは独立して使用できます。

各機能領域は、次の両方の例で説明する設定手順に対応しています。

データ要素の監視

新しい dataelementchanged イベントタイプは、ページビュー中に特定のデータ要素の値に加えられた変更を監視します。 このイベントタイプを使用する場合は、以下の観察事項に注意する必要があります。

  1. データ要素は、単純な JavaScript 値にマップする必要があります。 データ要素のカスタムスクリプトで返される配列やオブジェクトなどの複雑な値は、正しく機能しません。 また、Cookie、CSS セレクターおよび URL パラメーターも予期しない結果を生み出すので、まったく機能しない場合があります。 文字列や整数などの単純値は機能します。
  2. 単一ページで参照する dataelementchanged イベントタイプの数は控えめにしてください。 監視は効率的ですが、評価の数が多いとページのパフォーマンスに影響を与える可能性があります。
  3. この dataelementchanged イベントタイプは DOM ベースの監視システムなので、現在のページビューでのみ機能します。
  4. データ要素の監視では、値のポーリングをおこないます。

ContextHub データレイヤーのデフォルトの例

Dynamic Tag Management 設定内でデフォルトの ContextHub データレイヤーを参照および使用する AEM ContextHub ツールの使用例です。

ContextHub データレイヤーは、テスト用 Adobe Experience Manager(AEM)Web サイトに読み込まれますが、AEM と無関係に ContextHub のみで使用することもできます。ContextHub を AEM と組み合わせずに使用することを希望される場合は、アドビの担当者にご相談ください。

すべての ContextHub ストアは、ブラウザーコンソールから参照できます。

DTM データレイヤーは、その他の DTM 機能よりも前に開始を監視するので、これらの例では、可能な場合でも、DTM 経由でデータレイヤーをデプロイすることはありません。 代わりに、サーバー生成データレイヤーに依存します。 そうしないと、特定のデータレイヤー値を使用できない場合があるので、JavaScript の警告が発生する可能性があります。

データレイヤーの定義

AEM ContextHub ツールの設定の最初の手順は、ツールを Web プロパティに追加することです。

メモ

現時点では、1 つの DTM Web プロパティにつき 1 つの AEM ContextHub ツールのみ使用できます。

  1. <Webプロパティ名>OverviewAdd a ToolAEM ContextHub をクリックします。

  2. ツールのわかりやすい名前を指定します。

  3. Create Tool をクリックして、AEM ContextHub Settings ページを表示します。

  4. 標準の ContextHub ストアを活用する場合に Use Default ContextHub Data Layer を選択します。

    または

    スキーマを変更する場合に Customize ContextHub Data Layer を選択します。実装でデフォルト以外の ContextHub データレイヤーを使用する場合は、カスタマイズオプションを使用する必要があります。

    デフォルトのデータレイヤールートを使用すると、すべての ContextHub ストアにアクセスできます。ContextHub ストアの動的な特性を考えると、このデータレイヤーには、汎用データレイヤーアプローチで使用されるシンプルな JavaScript オブジェクト参照では利用できない追加の関数があります。

  5. (条件付き)カスタムデータレイヤーを使用するには、Open Editor をクリックしてデータレイヤースキーマ定義を表示します。カスタムデータレイヤーが ContextHub スキーマに変更を加えたものである場合は、必ず「ContextHub」を Data Layer Root フィールドに追加してください。

    デフォルトの ContextHub スキーマがエディターに入力されます。

    1. 必要に応じてスキーマを変更し、サイトのデータレイヤースキーマに合わせます。
    2. Save and Close をクリックしてスキーマを保存し、エディターを閉じます。
  6. Save Changes」をクリックします。

データレイヤーのデータ要素の作成

  1. Web プロパティで、「Rules」タブをクリックし、左のメニューで「Data Elements」をクリックします。

  2. Create New Data Element」をクリックします。

  3. データ要素の名前を指定します。 この例では、データ要素に「total_price」という名前を付けます。

  4. Type ドロップダウンリストで、「AEM ContextHub」を選択します。

    AEM ContextHub ツールの名前が「Source」に入力されますが、AEM ContextHub ツールは現在のバージョンで 1 つだけ定義できます。

  5. オブジェクトセレクターでパスを選択して、データ要素をデータレイヤーにマップします。

    この例では、cart.totalPriceFloat オブジェクトを選択します。

  6. Save Data Element」をクリックします。

データ要素の変更イベントタイプを使用するイベントベースのルールの作成

  1. Web プロパティで「Rules」タブをクリックし、左のメニューで「Event Based Rules」をクリックします。

  2. Create New Rule」をクリックします。

  3. ルール名を設定します。この例では、ルールに「cart_total_update」という名前を付けます。

  4. 条件セクションを展開します。

  5. Event Type ドロップダウンリストで、「dataelementchanged」を選択します。

  6. 前の節で作成したデータ要素(total_price)を選択します。

  7. Rule Conditions の下の、ドロップダウンリストから「Data Element Value」を選択し、「Add Criteria」をクリックします。

  8. 前の節で作成したデータ要素(total_price)を選択し、ルールを起動させる値を割り当てます。

    この例では、50 以上の任意の値を評価するために正規表現を使用します:^([5-9]\d|[1-9]\d{2,})$

    メモ

    この方法でデータ要素の値を条件として使用する場合、一致の中でデータ要素の設定を考慮することが重要です。 例えば、データ要素の設定で「Force Lowercase Value」オプションを選択すると、評価の前に値がすべて小文字に変換されます。JavaScript では大文字と小文字を区別するので、「test」と「Test」は異なり、条件は期待どおりに実行されません。

  9. Javascript / Third Party Tags」セクションを展開します。

  10. Add New Script」をクリックします。

  11. ルールが追加起動した場合に通知を表示する非順次 JavaScript。 ルールに「big_money_alert」という名前を付け、次の例のようなアラートスクリプトを追加します。

    alert('$' + _satellite.getVar(‘total_price’) + ‘ is big money!’);

  12. Save Code」、「Save Rule」の順にクリックします。

の実装を検証する

上記の Web プロパティを実行する DTM 対応 Web サイトで、実装を検証します。

  • デベロッパーコンソールで、データレイヤーが存在するかどうかを確認します(ContextHub)。

  • 監視対象のデータレイヤーオブジェクトを、上の条件に一致しない値に変更します:ContextHub.setItem('/store/cart/totalPriceFloat','5');

  • 監視対象のデータレイヤーオブジェクトを、上の条件に一致する値に変更します:ContextHub.setItem('/store/cart/totalPriceFloat','52');

  • 実装例では、次のようなアラートボックスが表示されます。

DTM デバッグが有効になっている場合は、評価失敗のメッセージがコンソールに表示されます。

カスタムデータレイヤーの例

Dynamic Tag Management 設定内で ContextHub 以外のカスタムデータレイヤーを参照および使用する AEM ContextHub ツールの使用例です。

この例のデータレイヤー(_dl)は、DTM 埋め込みコードが参照される前に、ページの <head/> セクション内の JavaScript オブジェクト定義としてテスト Web ページに読み込まれます。

<head> 
    <script> 
        window._dl = { 
            page: { 
                name: 'homepage', 
                quantity: 1, 
                friend: 'No one' } 
        } 
    </script> 
    <script src="//assets.adobedtm.com/satelliteLib-*.js"></script> 
</head> 

DTM データレイヤーの監視(下記を参照)の開始は、その他の DTM 機能の前に配置されているので、これらの例では、DTM 経由でデータレイヤーをデプロイするわけではありません。 そうしないと、特定のデータレイヤー値を使用できない場合があるので、JavaScript の警告が発生する可能性があります。

データレイヤーの定義

AEM ContextHub ツールの設定の最初の手順は、ツールを Web プロパティに追加することです。

メモ

現時点では、1 つの DTM Web プロパティにつき 1 つの AEM ContextHub ツールのみ使用できます。

  1. <Webプロパティ名>OverviewAdd a ToolAEM ContextHub をクリックします。

  2. ツールのわかりやすい名前を指定します。

  3. Create Tool をクリックして、AEM ContextHub Settings ページを表示します。

  4. スキーマを変更する場合に「Customize ContextHub Data Layer」を選択します。

    ContextHub 以外のデータレイヤーの「Data Layer Root」フィールドには、ルート JavaScript オブジェクトの名前を追加する必要があります。 この節の一般的な例では、_dl 定義を使用します。

  5. Open Editor をクリックして、データレイヤースキーマ定義を表示します。

デフォルトでは、デフォルトの ContextHub スキーマがエディターに入力されます。

  1. デフォルトのスキーマを削除し、サイトのデータレイヤースキーマにペーストします。

    一般的な例では、ContextHub 以外のスキーマの例を次に示します。

    { 
      "$schema": "https://json-schema.org/draft-04/schema#", 
      "type": "object", 
      "properties": { 
        "page": { 
          "type": "object", 
          "properties": { 
            "name": { 
              "type": "string" 
            }, 
            "quantity": { 
              "type": "number" 
            }, 
            "friend": { 
              "type": "string" 
            } 
          }, 
          "required": [ 
            "name", 
            "quantity", 
            "friend" 
          ] 
        } 
       }, 
      "required": [ 
        "page" 
      ] 
    } 
    
  2. Save and Close」をクリック してスキーマを保存し、エディターを閉じて、「Save Changes」をクリックします。

データレイヤーのデータ要素の作成

  1. Web プロパティで「Rules」タブをクリックし、左のメニューで「Data Elements」をクリックします。

  2. Create New Data Element」をクリックします。

  3. データ要素の名前を指定します。 この例では、データ要素に「my_friend」という名前を付けます。

  4. Type ドロップダウンリストで「AEM ContextHub」を選択します。

    AEM ContextHub ツールの名前が「Source」に入力されますが、AEM ContextHub ツールは現在のバージョンで 1 つだけ定義できます。

  5. オブジェクトセレクターでパスを選択して、データ要素をデータレイヤーにマップします。

    この例では、page.friend オブジェクトを選択します。

  6. Save Data Element」をクリックします。

データ要素の変更イベントタイプを使用するイベントベースのルールの作成

  1. Web プロパティで「Rules」タブをクリックし、左のメニューで「Event Based Rules」をクリックします。

  2. Create New Rule」をクリックします。

  3. ルール名を設定します。この例では、ルールに「find_a_friend」という名前を付けます。

  4. 条件セクションを展開します。

  5. Event Type ドロップダウンリストで「dataelementchanged」を選択します。

  6. 前の節で作成したデータ要素(my_friend)を選択します。

  7. Rule Conditions」の下で、ドロップダウンリストから「Data Element Value」を選択し、「Add Criteria」をクリックします。

  8. 前の節で作成したデータ要素(my_friend)を選択し、ルールを起動させる値を割り当てます。

    この例では、値として「Carl」を使用します。

    メモ

    この方法でデータ要素の値を条件として使用する場合、一致の中でデータ要素の設定を考慮することが重要です。 例えば、データ要素の設定で「Force Lowercase Value」オプションを選択すると、評価の前に値がすべて小文字に変換されます。 JavaScript では大文字と小文字を区別するので、「test」と「Test」は異なり、条件は期待どおりに実行されません。

  9. Javascript / Third Party Tags」セクションを展開します。

  10. Add New Script」をクリックします。

  11. ルールが追加起動した場合に通知を表示する非順次 JavaScript。 ルールに「found_my_friend」という名前を付け、次の例のようなアラートスクリプトを追加します。

    alert(_satellite.getVar(‘my_friend’) + ‘ is my friend.’);

  12. Save Code」、「Save Rule」の順にクリックします。

の実装を検証する

上記の Web プロパティを実行する DTM 対応 Web サイトで、実装を検証します。

  • デベロッパーコンソールで、データレイヤーが存在するかどうかを確認します(_dl)。

  • 監視対象のデータレイヤーオブジェクトを、上の条件で設定された値に変更します(_dl.page.friend = ‘Carl’)。

    •この実装例では、次のようなアラートボックスが表示されます。

  • オブジェクトを別の値(_dl.page.friend = ‘Bob’)に変更すると、アラートが表示されなくなります。

    メモ

    DTM デバッグが有効になっている場合は、評価失敗のメッセージがコンソールに表示されます。

  • オブジェクトを小文字の値に一致する値(_dl.page.friend = ‘carl’)に変更すると、アラートが表示されなくなります。

  • オブジェクトを大文字と小文字の値が一致する(_dl.page.friend = ‘Carl’)ように変更すると、アラートが再度表示されます。

このページ