Show Menu
トピック×

Adobe Experience Manager ContextHub ツール

Dynamic Tag Management と Adobe Experience Manager(AEM)ContextHub(データレイヤーの AEM バージョン)を統合するには、AEM ContextHub ツールを使用します。また、このツールでは、任意のデータレイヤー(AEM を使用しない Web サイト用を含む)を DTM と統合することもできます。
DTMを使用するお客様は、多くの場合、データ要素を使用してWebサイトのデータレイヤーにマッピングします。 例えば、データレイヤーには、ユーザーが特定の製品を探している情報や、買い物かごに品目を入れた情報が含まれる場合があります。 DTMでは、この情報を様々な方法でルール条件やアクションに使用できます。 これには、レポート目的でAnalyticsにデータを送信する処理や、カスタマイズされたコンテンツをターゲットに表示する処理が含まれます。
AEM ContextHubツールを使用すると、データレイヤーに関連する多くの問題を解決できます。 一部のデータレイヤーは、ページの先頭に読み込まれません。 他のデータレイヤーは、動的または非同期的で、ページの変化に応じて頻繁に変化します。 以前は、これらの問題の両方が原因で、DTMがデータを効果的に送信したりアクションをトリガーしたりする問題が発生していました。
AEM ContextHubツールを使用すると、データレイヤーが変更されたか、ページの上部以外の場所に読み込まれたか、ページの変更に応じて変更されたかを頻繁に確認するカスタムコードを記述する必要がなくなります。
例えば、顧客が買い物かごに品目を入れた後、その品目を削除したとします。 データレイヤーが変更されてもページが更新されない場合、カスタムコードを追加しないと、DTMは変更を認識できません。 AEM ContexHubツールには、変化があるかどうかを確認するポーリングエンジンが1秒ごとに含まれています。
DTMがデータレイヤー経由でデータ要素を積極的に設定できるようになったので、AEM ContextHubデータ要素と、以前にリリースされた条件(データ要素の値など)を組み合わせて使用することもできます。 これにより、ユーザーの操作によってデータレイヤーが変更された場合に、ページ読み込み時にデータレイヤーの値を管理したり、データ要素の値の条件と dataelementchanged イベントを組み合わせたりできます。
このツールを設定する際、デフォルト設定を使用してAEM ContextHubと統合するか、構造をカスタマイズして任意のWebサイトと連携させることができます。
  1. <Webプロパティ名> / Overview / Add a Tool /をクリック AEM ContextHub します。
  2. ツールを説明する名前を指定します。
    この名前は、の Overview タブに表示され Installed Toolsます。
  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データレイヤーのデフォルトの例

設定内でデフォルトのContextHubデータレイヤーを参照および使用するAEM ContextHubツールの使用例で Dynamic Tag Management す。
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プロパティ名> / Overview / Add a Tool /をクリック AEM ContextHub します。
  2. ツールを説明する名前を指定します。
  3. Create Tool をクリックして、AEM ContextHub Settings ページを表示します。
  4. 標準のContextHubストア Use Default ContextHub Data Layer を活用する場合に選択します。
    Or
    スキーマ 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デバッグが有効になっている場合は、評価失敗のメッセージがコンソールに表示されます。

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

設定内でContextHub以外のカスタムデータレイヤーを参照および使用するAEM ContextHubツールの使用例で Dynamic Tag Management す。
この例のデータレイヤー( _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プロパティ名> / Overview / Add a Tool /をクリック AEM ContextHub します。
  2. ツールを説明する名前を指定します。
  3. Create Tool をクリックして、AEM ContextHub Settings ページを表示します。
  4. スキーマ Customize ContextHub Data Layer を変更する場合に選択します。
    ContextHub以外のデータレイヤーの Data Layer Root フィールドには、ルートJavaScriptオブジェクト名を追加する必要があります。 この節の一般的な例では、 _dl 定義を使用します。
  5. をクリック Open Editor して、データレイヤースキーマ定義を表示します。
    デフォルトでは、デフォルトのContextHubスキーマがエディターに入力されます。
  6. デフォルトのスキーマを削除し、サイトのデータレイヤースキーマに貼り付けます。
    一般的な例では、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" 
      ] 
    } 
    
    
  7. をクリック 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’ )すると、警告が再度表示されます。