コアコンポーネントでの Adobe Client Data Layer の使用

Adobe Client Data Layer の目標は、あらゆるスクリプトであらゆる種類のデータを表示およびアクセスできる標準化された方法を提供し、Web サイトを測定する際の手間を軽減することです。

Adobe Client Data Layer はプラットフォームに依存しませんが、AEM で使用するためにコアコンポーネントに完全に統合されています。

Adobe Client Data Layer のコードは、コアコンポーネントと同様、開発者向けドキュメントと共に GitHub で入手できます。このドキュメントでは、コアコンポーネントがデータレイヤーとやり取りする方法の概要について説明しますが、技術的な詳細は GitHub ドキュメントに従います。

ヒント

Adobe Client Data Layer の詳細については、GitHub リポジトリのリソースを参照してください。

Adobe Client Data Layer とコアコンポーネントの統合に関する技術的な詳細については、コアコンポーネントリポジトリの DATA_LAYER_INTEGRATION.md ファイルを参照してください。

インストールとアクティベーション

コアコンポーネントリリース 2.9.0 の時点では、データレイヤーはコアコンポーネントとともに AEM クライアントライブラリとして配布され、インストールの必要はありません。AEM Project Archetype v. 24 以降で生成されるすべてのプロジェクトには、アクティブ化されたデータレイヤーがデフォルトで含まれます。

データレイヤーを手動でアクティブにするには、コンテキストに応じた設定を作成する必要があります。

  1. /conf/<mySite> フォルダーの下に次の構造を作成します。<mySite> はサイトのプロジェクトの名前です。

    • /conf/<mySite>/sling:configs/com.adobe.cq.wcm.core.components.internal.DataLayerConfig
    • 各ノードには、nt:unstructured に対する jcr:primaryType セットがあります。
  2. enabled という名前のブール型プロパティを追加し、true に設定します。

    WKND リファレンスサイトの DataLayerConfig の場所

    WKND リファレンスサイトの DataLayerConfig の場所

  3. sling:configRef プロパティを /content 配下のサイトの jcr:content ノード(例:/content/<mySite>/jcr:content)に追加し、以前の手順の /conf/<mySite> に設定します。

  4. 有効にすると、エディター外のサイトのページを読み込んで、アクティベーションを検証することができます。ページソースを検査し、<body> タグには属性 data-cmp-data-layer-enabled を含める必要があります。

    <body class="page basicpage" id="page-id" data-cmp-data-layer-enabled>
        <script>
          window.adobeDataLayer = window.adobeDataLayer || [];
          adobeDataLayer.push({
              page: JSON.parse("{\x22page\u002D6c5d4b9fdd\x22:{\x22xdm:language\x22:\x22en\x22,\x22repo:path\x22:\x22\/content\/wknd\/language\u002Dmasters\/en.html\x22,\x22xdm:tags\x22:[],\x22xdm:template\x22:\x22\/conf\/wknd\/settings\/wcm\/templates\/landing\u002Dpage\u002Dtemplate\x22,\x22@type\x22:\x22wknd\/components\/page\x22,\x22dc:description\x22:\x22WKND is a collective of outdoors, music, crafts, adventure sports, and travel enthusiasts that want to share our experiences, connections, and expertise with the world.\x22,\x22dc:title\x22:\x22WKND Adventures and Travel\x22,\x22repo:modifyDate\x22:\x222020\u002D09\u002D29T07:50:13Z\x22}}"),
              event:'cmp:show',
              eventInfo: {
                  path: 'page.page\u002D6c5d4b9fdd'
              }
          });
        </script>
    
  5. また、ブラウザーの開発者ツールを開き、コンソールで adobeDataLayer JavaScript オブジェクトを使用できるようにします。次のコマンドを入力して、現在のページのデータレイヤーの状態を取得します。

    window.adobeDataLayer.getState();
    

コアコンポーネントのデータスキーマ

コアコンポーネントがデータレイヤーで使用するスキーマのリストを以下に示します。

コンポーネント/コンテナ項目スキーマ

コンポーネント/コンテナ項目スキーマは、次のコンポーネントで使用されます。

コンポーネント/コンテナ項目スキーマは、次のように定義されます。

id: {                   // component ID
    @type               // resource type
    repo:modifyDate     // last modified date
    dc:title            // title
    dc:description      // description
    xdm:text            // text
    xdm:linkURL         // link URL
    parentId            // parent component ID
}

次のイベントは、コンポーネント/コンテナ項目スキーマに関連します。

  • cmp:click

ページスキーマ

ページスキーマは、次のコンポーネントで使用されます。

ページスキーマは次のように定義されます。

id: {
    @type
    repo:modifyDate
    dc:title
    dc:description
    xdm:text
    xdm:linkURL
    parentId
    xdm:tags            // page tags
    repo:path           // page path
    xdm:template        // page template
    xdm:language        // page language
}

ページの読み込み時に cmp:show イベントがトリガーされます。このイベントは、開始 <body> タグのすぐ下にあるインライン JavaScript からディスパッチされるので、データレイヤーイベントキューで最も早いイベントになります。

コンテナスキーマ

コンテナスキーマは、次のコンポーネントで使用されます。

コンテナスキーマは次のように定義されます。

id: {
    @type
    repo:modifyDate
    dc:title
    dc:description
    xdm:text
    xdm:linkURL
    parentId
    shownItems          // array of the displayed item IDs
}

次のイベントは、コンテナスキーマに関連します。

  • cmp:click
  • cmp:show
  • cmp:hide

画像スキーマ

画像スキーマは、次のコンポーネントで使用されます。

画像スキーマは次のように定義します。

id: {
    @type
    repo:modifyDate
    dc:title
    dc:description
    xdm:text
    xdm:linkURL
    parentId
    image               // asset detail (see below section)
}

次のイベントは、画像スキーマに関連します。

  • cmp:click

アセットスキーマ

アセットスキーマは、画像コンポーネント内で使用されます。

アセットスキーマは次のように定義します。

id: {
    repo:id             // asset UUID
    repo:path           // asset path
    @type               // asset resource type
    xdm:tags            // asset tags
    repo:modifyDate
}

次のイベントは、アセットスキーマに関連します。

  • cmp:click

コアコンポーネントのイベント

コアコンポーネントがデータレイヤーを介してトリガーするイベントは多数あります。データレイヤーを操作する際のベストプラクティスは、イベントリスナーを登録し​​イベントタイプや、イベントをトリガーしたコンポーネントに基づいてアクションを実行することです。これにより、非同期スクリプトで競合が発生する可能性を回避できます。

AEM コアコンポーネントが提供する初期設定のイベントを以下に示します。

  • cmp:click - クリック可能な要素(data-cmp-clickable 属性を持つ要素)をクリックすると、データレイヤーによって cmp:click イベントがトリガーされます。
  • cmp:show および cmp:hide - アコーディオン(展開/折りたたみ)、カルーセル(次へ/前へのボタン)、タブ(タブ選択)の各コンポーネントを操作すると、データレイヤーがそれぞれ cmp:show および cmp:hide イベントをトリガーします。cmp:show イベントはページの読み込み時にもディスパッチされ、最初のイベントと見なされます。
  • cmp:loaded - データレイヤーにページ上のコアコンポーネントが入力されるとすぐに、データレイヤーが cmp:loaded イベントをトリガーします。

コンポーネントによってトリガーされるイベント

次の表に、これらのイベントと共にイベントをトリガーする標準的なコアコンポーネントを示します。

コンポーネント イベント
アコーディオン cmp:show および cmp:hide
ボタン cmp:click
パンくず cmp:click
カルーセル cmp:show および cmp:hide
言語ナビゲーション cmp:click
ナビゲーション cmp:click
ページ cmp:show
タブ cmp:show および cmp:hide
ティーザー cmp:click

イベントパス情報

AEM コアコンポーネントによってトリガーされる各データレイヤーイベントには、以下の JSON オブジェクトを含むペイロードが含まれます。

eventInfo: {
    path: '<component-path>'
}

ここでは、<component-path> はイベントをトリガーしたデータレイヤー内のコンポーネントへの JSON パスです。event.eventInfo.path を介して使用できる値は、パラメーターとして adobeDataLayer.getState(<component-path>) に使用できるので重要です。このパラメーターは、イベントをトリガーしたコンポーネントの現在の状態を取得し、カスタムコードが追加のデータにアクセスしてデータレイヤーに追加できるようにします。

次に例を示します。

function logEventObject(event) {
    if(event.hasOwnProperty("eventInfo") && event.eventInfo.hasOwnProperty("path")) {
        var dataObject = window.adobeDataLayer.getState(event.eventInfo.path);
        console.debug("The component that triggered this event: ");
        console.log(dataObject);
    }
}

window.adobeDataLayer = window.adobeDataLayer || [];
window.adobeDataLayer.push(function (dl) {
     dl.addEventListener("cmp:show", logEventObject);
});

チュートリアル

データレイヤーとコアコンポーネントをさらに詳しく調べたい場合は、次の実践チュートリアルをご覧ください

ヒント

データレイヤーの柔軟性をさらに詳しく調べるには、カスタムコンポーネントでデータレイヤーを有効にする方法などの統合オプションについて確認してください。

このページ