Show Menu
トピック×

Adobe Experience Manager ContextHub tool

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 ツールには、変化したかどうかのチェックを毎秒実行するポーリングエンジンが含まれています。
DTM がデータレイヤー経由で能動的にデータ要素の内容を設定できるようになったことで、ユーザーは、AEM ContextHub データ要素と、以前にリリースされた条件(例:データ要素の値)を組み合わせることも可能になりました。したがって、ページの読み込み時にデータレイヤーの値を管理することや、データ要素の値の条件を dataelementchanged イベントと組み合わせ、ユーザーの操作によってデータレイヤーが変化した場合に対応することができます。
このツールを設定する際には、デフォルト設定を使用して AEM ContextHub と統合することも、構造をカスタマイズして任意の Web サイトと連携させることもできます。
  1. < Web Property Name> / Overview > Add a Tool / AEM ContextHub をクリックします。
  2. ツールを説明する名前を指定します。
    This name displays on the Overview tab under Installed Tools.
  3. Click Create Tool to display the AEM ContextHub Settings page.
  4. 以下のフィールドを設定します。
    要素
    説明
    デフォルトの ContextHub データレイヤーを使用
    AEM ContextHub 形式を使用します。このオプションを選択すると、DTM は、デフォルトの ContextHub スキーマをこの統合用として参照します。ContextHub スキーマに修正を加えている場合や、別のデータレイヤーを使用する場合は、カスタマイズオプションを使用してください。
    ContextHub データレイヤーをカスタマイズ
    必ずしも AEM を使用していない任意の Web サイトのデータレイヤー構造に対応するカスタム形式を使用します。このオプションを選択すると、使用するデータレイヤースキーマを編集できます。デフォルトでは、編集ウィンドウにデフォルトの ContextHub データレイヤーが入力されます。必要に応じて、これに変更を加えることや、まったく違う独自のコードで置き換えることができます。
    編集画面を開く
    「ContextHub データレイヤーをカスタマイズ」オプションを選択した場合は、エディターを使用してカスタムコードを挿入できます。
    メモを追加
    この実装に関するメモを追加します。
  5. Save Changes ​をクリックします。

Data layer management using the ContextHub tool

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 tool components

AEM ContextHub ツールを使用すると、DTM に以下 2 つの機能が加わります。
  • データレイヤー定義
  • AEM ContextHub データレイヤータイプ
さらに、データレイヤーの監視を実行しやすくする新しいイベントタイプ dataelementchanged が追加されます。このイベントタイプは、AEM ContextHub ツールと無関係に使用することもできます。
それぞれの機能領域に対応する構成手順を、以下の 2 つの例で示します。

Data element monitoring

The new dataelementchanged event type monitors any changes that occur to a specific data element value during a page view. このイベントタイプの使用にあたっては、以下の事項に注意してください。
  1. データ要素はシンプルな JavaScript 値と対応付けられている必要があります。データ要素のカスタムスクリプト内で返される配列やオブジェクトなど、複雑な値にデータ要素が対応付けられている場合は正常に機能しません。また、Cookie、CSS セレクター、URL パラメーターでも予期しない結果が発生し、場合によってはまったく機能しないことがあります。文字列や整数などのシンプルな値であれば問題なく機能します。
  2. 1 つのページで参照する dataelementchanged イベントタイプの数は、むやみに増やさないでください。監視機能は効率的に動作しますが、評価処理の数が非常に多くなるとページの性能に悪影響を及ぼすことがあります。
  3. dataelementchanged イベントタイプは DOM ベースの監視機構なので、現在のページビュー内でのみ動作します。
  4. データ要素モニターは、値のポーリング処理によって動作します。

ContextHub data layer default example

Dynamic Tag Management 設定内でデフォルトの ContextHub データレイヤーを参照および使用する形で AEM ContextHub ツールを使用する例です。
ContextHub データレイヤーは、テスト用 Adobe Experience Manager(AEM)Web サイトに読み込まれますが、AEM と無関係に ContextHub のみで使用することもできます。ContextHub を AEM と組み合わせずに使用することを希望される場合は、アドビの担当者にご相談ください。
すべての ContextHub ストアはブラウザーコンソールから参照できます。
DTM データレイヤーモニターはすべての DTM 機能の中でも最初に起動します。したがって、これらの例ではデータレイヤーを DTM 経由でデプロイする方法は(可能ですが)採用せず、サーバーで生成されたデータレイヤーを使用しています。このようにしないと、データレイヤーの一部の値を取得できず、Javascript の警告が発生する可能性があります。

データレイヤーの定義

AEM ContextHub ツールの設定作業で最初に実行するのは、このツールを Web プロパティに追加する手順です。
現時点では、DTM Webプロパティごとに1つのAEM ContextHubツールのみを使用できます。
  1. < Web Property Name> / Overview > Add a Tool / AEM ContextHub をクリックします。
  2. ツールを説明する名前を指定します。
  3. Click Create Tool to display the AEM ContextHub Settings page.
  4. Select Use Default ContextHub Data Layer to leverage the standard ContextHub stores.
    または
    Select Customize ContextHub Data Layer to modify the schema. お使いの実装でデフォルト以外の ContextHub データレイヤーを使用する場合は、カスタマイズオプションを選択する必要があります。
    デフォルトのデータレイヤールートを使用すると、すべての ContextHub ストアにアクセスできます。ContextHub ストアには動的な性質があるので、このデータレイヤーには、汎用データアプローチで使用されるシンプルな JavaScript オブジェクトリファレンスにはない付加機能が用意されています。
  5. (Conditional) To use a custom data layer, click Open Editor to view the data layer schema definition. If the custom data layer is a modification of the ContextHub schema be sure to add “ContextHub” in the Data Layer Root field.
    デフォルトの ContextHub スキーマがエディター内に入力されます。
    1. 必要に応じてスキーマを修正し、サイトのデータレイヤースキーマに合わせます。
    2. Click Save and Close to save the schema and close the editor.
  6. Save Changes ​をクリックします。

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

  1. In the web property, click the Rules tab, then click Data Elements in the left menu.
  2. Create New Data Element ​をクリックします。
  3. データ要素の名前を指定します。この例では、「total_price」というデータ要素名を付けています。
  4. Type ドロップダウンリストから、を選択 AEM ContextHub ​します。
    作成した AEM ContextHub ツールの名前が「ソース」に表示されます。ただし、現在のバージョンで定義できる AEM ContextHub ツールの数は 1 つだけです。
  5. オブジェクトセレクターでパスを選択し、このデータ要素をデータレイヤーに対応付けます。
    この例では、「 cart.totalPriceFloat 」オブジェクトを選択しています。
  6. Save Data Element ​をクリックします。

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

  1. In the web property, click the Rules tab, then click Event Based Rules in the left menu.
  2. Create New Rule ​をクリックします。
  3. ルール名を設定します。この例では、「cart_total_update」というルール名を付けています。
  4. 「条件」セクションを展開します。
  5. Event Type ドロップダウンリストから、を選択 dataelementchanged ​します。
  6. 前の節で作成したデータ要素(total_price)を選択します。
  7. Under Rule Conditions , select Data Element Value from the drop-down list, then click Add Criteria .
  8. 前の節で作成したデータ要素(total_price)を選択し、ルールの起動条件とする値を割り当てます。
    In this example, a regular expression is used to evaluate anything greater than or equal to 50: ^([5-9]\d|[1-9]\d{2,})$
    この方法でデータ要素の値を条件として使用する場合、一致でデータ要素の設定を考慮することが重要です。For example, selecting the Force Lowercase Value option in the data element settings would convert the value to all lowercase before evaluation. 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. Click Save Code , then click Save Rule .

実装の検証

上の Web プロパティを実行する DTM 対応 Web サイトで、実装を検証します。
  • デベロッパーコンソールで、データレイヤー( ContextHub )が存在するかどうかをチェックします。
  • 監視対象にするデータレイヤーオブジェクトを、上の条件に一致しない値に変更します。例: ContextHub.setItem('/store/cart/totalPriceFloat','5');
  • 監視対象にするデータレイヤーオブジェクトを、上の条件に一致する値に変更します。例: ContextHub.setItem('/store/cart/totalPriceFloat','52');
  • この実装例では、次のような警告ボックスが表示されます。
DTM デバッグが有効になっている場合は、評価失敗のメッセージがコンソールに表示されます。

Custom data layer example

Dynamic Tag Management 設定内で ContextHub 以外のカスタムデータレイヤーを参照および使用する形で AEM ContextHub ツールを使用する例です。
The example data layer ( _dl ) will be loaded on the test web page as a Javascript object definition in the <head/> section of the page before the DTM embed code is referenced.
<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 プロパティに追加する手順です。
現時点では、DTM Webプロパティごとに1つのAEM ContextHubツールのみを使用できます。
  1. < Web Property Name> / Overview > Add a Tool / AEM ContextHub をクリックします。
  2. ツールを説明する名前を指定します。
  3. Click Create Tool to display the AEM ContextHub Settings page.
  4. Select Customize ContextHub Data Layer to modify the schema.
    A root Javascript object name must be added to the Data Layer Root field for non-ContextHub data layers. _dl 定義は、この節の一般的な例で使用します。
  5. Click Open Editor to view the data layer schema definition.
    デフォルトでは、デフォルトの 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. Click Save and Close to save the schema and close the editor, then click Save Changes .

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

  1. In the web property, click the Rules tab, then click Data Elements in the left menu.
  2. Create New Data Element ​をクリックします。
  3. データ要素の名前を指定します。この例では、「my_friend」というデータ要素名を付けています。
  4. Type ドロップダウンリストから、を選択 AEM ContextHub ​します。
    作成した AEM ContextHub ツールの名前が「ソース」に表示されます。ただし、現在のバージョンで定義できる AEM ContextHub ツールの数は 1 つだけです。
  5. オブジェクトセレクターでパスを選択し、このデータ要素をデータレイヤーに対応付けます。
    この例では、「 page.friend 」オブジェクトを選択しています。
  6. Save Data Element ​をクリックします。

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

  1. In the web property, click the Rules tab, then click Event Based Rules in the left menu.
  2. Create New Rule ​をクリックします。
  3. ルール名を設定します。この例では、「find_a_friend」というルール名を付けています。
  4. 「条件」セクションを展開します。
  5. Event Type ドロップダウンリストから、を選択 dataelementchanged ​します。
  6. 前の節で作成したデータ要素(my_friend)を選択します。
  7. Under Rule Conditions , select Data Element Value from the drop-down list, then click Add Criteria .
  8. 前の節で作成したデータ要素(my_friend)を選択し、ルールの起動条件とする値を割り当てます。
    この例では、「Carl」という値を使用します。
    この方法でデータ要素の値を条件として使用する場合、一致でデータ要素の設定を考慮することが重要です。For example, selecting the Force Lowercase Value option in the data element settings would convert the value to all lowercase before evaluation. 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. Click Save Code , then click Save Rule .

実装の検証

上の Web プロパティを実行する DTM 対応 Web サイトで、実装を検証します。
  • デベロッパーコンソールで、データレイヤー( _dl )が存在するかどうかをチェックします。
  • Change the data layer object that is being monitored to the value that was set in the condition above ( _dl.page.friend = ‘Carl’ ).
    • この実装例では、次のような警告ボックスが表示されます。
  • Change the object to a different value ( _dl.page.friend = ‘Bob’ ) and no alert should display.
    DTM デバッグが有効になっている場合は、評価失敗のメッセージがコンソールに表示されます。
  • Change the object to a lowercase value of the match ( _dl.page.friend = ‘carl’ ) and no alert should display.
  • Change the object to the correct case value of the match ( _dl.page.friend = ‘Carl’ ) and the alert should once again display.