AEMコンポーネントでのAdobeクライアントデータレイヤーのカスタマイズ

カスタムのAEMコンポーネントのコンテンツを使用してAdobeクライアントデータレイヤーをカスタマイズする方法について説明します。 AEMコアコンポーネントが提供するAPIを使用してを拡張し、データレイヤーをカスタマイズする方法について説明します。

作成する内容

このチュートリアルでは、WKND 署名コンポーネントを更新して、Adobeクライアントデータレイヤーを拡張するための様々なオプションを調べます。 これはカスタムコンポーネントで、このチュートリアルで学習したレッスンは、他のカスタムコンポーネントに適用できます。

目的

1. SlingモデルとコンポーネントのHTLを拡張して、データレイヤーにコンポーネントデータを挿入する
2. コアコンポーネントのデータレイヤーユーティリティを使用して作業を軽減
3. コアコンポーネントのデータ属性を使用して、既存のデータレイヤーイベントに関連付ける

前提条件

このチュートリアルを完了するには、ローカル開発環境​が必要です。 スクリーンショットとビデオは、macOS上で動作するAEM as aCloud ServiceSDKを使用してキャプチャされます。 特に断りのない限り、コマンドとコードはローカルのオペレーティングシステムとは独立しています。

AEM as a Cloud Service は初めてですか？ AEM as a Cloud ServiceSDKを使用したローカル開発環境のセットアップについては、次のガイドを参照してください。

AEM 6.5を初めて使用する場合 次のガイドを参照し て、ローカル開発環境を設定します。

WKNDリファレンスサイトのダウンロードとデプロイ

このチュートリアルでは、WKNDリファレンスサイトの署名コンポーネントを拡張します。 WKNDコードベースのクローンを作成し、ローカル環境にインストールします。

1. http://localhost:4502で実行されているAEMのローカルクイックスタート​オーサー​インスタンスを起動します。

2. ターミナルウィンドウを開き、Gitを使用してWKNDコードベースのクローンを作成します。

   $ git clone git@github.com:adobe/aem-guides-wknd.git
   

3. WKNDコードベースをAEMのローカルインスタンスにデプロイします。

   $ cd aem-guides-wknd
   $ mvn clean install -PautoInstallSinglePackage
   

   メモ

   AEM 6.5および最新のサービスパックを使用している場合は、Mavenコマンドにclassicプロファイルを追加します。

   mvn clean install -PautoInstallSinglePackage -Pclassic

4. 新しいブラウザーウィンドウを開き、AEMにログインします。 次のような​Magazine​ページを開きます。http://localhost:4502/content/wknd/us/en/magazine/guide-la-skateparks.html.

   

   エクスペリエンスフラグメントの一部としてページに追加された署名コンポーネントの例が表示されます。 エクスペリエンスフラグメントは、http://localhost:4502/editor.html/content/experience-fragments/wknd/language-masters/en/contributors/stacey-roswells/byline.htmlで確認できます。

5. 開発者ツールを開き、コンソール​に次のコマンドを入力します。

   window.adobeDataLayer.getState();
   

   Inspectへの応答で、AEMサイト上のデータレイヤーの現在の状態を確認します。 ページと個々のコンポーネントに関する情報が表示されます。

   

   署名コンポーネントがデータレイヤーにリストされていないことを確認します。

署名Slingモデルの更新

データレイヤーにコンポーネントに関するデータを挿入するには、まずコンポーネントのSlingモデルを更新する必要があります。 次に、署名のJavaインターフェイスとSling Model実装を更新して、新しいメソッドgetData()を追加します。 このメソッドには、データレイヤーに挿入するプロパティが含まれます。

1. 任意のIDEで、aem-guides-wkndプロジェクトを開きます。 coreモジュールに移動します。

2. Byline.java（core/src/main/java/com/adobe/aem/guides/wknd/core/models/Byline.java）ファイルを開きます。

   

3. 新しいメソッドをインターフェイスに追加します。

   public interface Byline {
       ...
       /***
        * Return data about the Byline Component to populate the data layer
        * @return String
        */
       String getData();
   }
   

4. BylineImpl.java（core/src/main/java/com/adobe/aem/guides/wknd/core/models/impl/BylineImpl.java）ファイルを開きます。

   これはBylineインターフェイスの実装で、Slingモデルとして実装されます。

5. ファイルの先頭に次のimport文を追加します。

   import java.util.HashMap;
   import java.util.Map;
   import org.apache.sling.api.resource.Resource;
   import com.fasterxml.jackson.core.JsonProcessingException;
   import com.fasterxml.jackson.databind.ObjectMapper;
   import com.adobe.cq.wcm.core.components.util.ComponentUtils;
   

   fasterxml.jackson APIを使用して、JSONとして公開するデータをシリアル化します。 AEMコアコンポーネントのComponentUtilsは、データレイヤーが有効かどうかの確認に使用されます。

6. 未実装のメソッドgetData()をBylineImple.javaに追加します。

   public class BylineImpl implements Byline {
       ...
       @Override
       public String getData() {
           Resource bylineResource = this.request.getResource();
           // Use ComponentUtils to verify if the DataLayer is enabled
           if (ComponentUtils.isDataLayerEnabled(bylineResource)) {
   
               //Create a map of properties we want to expose
               Map<String, Object> bylineProperties = new HashMap<String,Object>();
               bylineProperties.put("@type", bylineResource.getResourceType());
               bylineProperties.put("name", this.getName());
               bylineProperties.put("occupation", this.getOccupations());
               bylineProperties.put("fileReference", image.getFileReference());
   
               //Use AEM Core Component utils to get a unique identifier for the Byline component (in case multiple are on the page)
               String bylineComponentID = ComponentUtils.getId(bylineResource, this.currentPage, this.componentContext);
   
               // Return the bylineProperties as a JSON String with a key of the bylineResource's ID
               try {
                   return String.format("{\"%s\":%s}",
                       bylineComponentID,
                       // Use the ObjectMapper to serialize the bylineProperties to a JSON string
                       new ObjectMapper().writeValueAsString(bylineProperties));
               } catch (JsonProcessingException e) {
   
                   LOGGER.error("Unable to generate dataLayer JSON string", e);
               }
   
           }
           // return null if the Data Layer is not enabled
           return null;
       }
   }
   

   上記のメソッドでは、JSONとして公開するプロパティを取り込むために新しいHashMapを使用します。 getName()やgetOccupations()などの既存のメソッドが使用されます。 @type コンポーネントの一意のリソースタイプを表します。これにより、クライアントは、コンポーネントのタイプに基づいてイベントやトリガーを簡単に識別できます。

   ObjectMapperは、プロパティをシリアル化してJSON文字列を返すために使用します。 その後、このJSON文字列をデータレイヤーに挿入できます。

7. ターミナルウィンドウを開きます。Mavenのスキルを使用して、coreモジュールのみを構築してデプロイします。

   $ cd aem-guides-wknd/core
   $ mvn clean install -PautoInstallBundle
   

署名HTLの更新

次に、Byline HTLを更新します。 HTL(HTML Template Language)は、コンポーネントのHTMLをレンダリングする際に使用するテンプレートです。

各AEMコンポーネントの特別なデータ属性data-cmp-data-layerを使用して、データレイヤーを公開します。 AEMコアコンポーネントが提供するJavaScriptは、このデータ属性を探し、その値に署名SlingモデルのgetData()メソッドから返されたJSON文字列が入力され、Adobeクライアントデータレイヤーに値を挿入します。

1. IDEでaem-guides-wkndプロジェクトを開きます。 ui.appsモジュールに移動します。

2. byline.html（ui.apps/src/main/content/jcr_root/apps/wknd/components/byline/byline.html）ファイルを開きます。

   

3. byline.htmlを更新してdata-cmp-data-layer属性を含めます。

     <div data-sly-use.byline="com.adobe.aem.guides.wknd.core.models.Byline"
       data-sly-use.placeholderTemplate="core/wcm/components/commons/v1/templates.html"
       data-sly-test.hasContent="${!byline.empty}"
   +   data-cmp-data-layer="${byline.data}"
       class="cmp-byline">
       ...
   

   data-cmp-data-layerの値は"${byline.data}"に設定されています。bylineは、前に更新されたSling Modelです。 .data は、前の演習で実装したのHTLでJava Getterメソッドを呼び出すた getData() めの標準的な表記です。

4. ターミナルウィンドウを開きます。Mavenのスキルを使用して、ui.appsモジュールのみを構築してデプロイします。

   $ cd aem-guides-wknd/ui.apps
   $ mvn clean install -PautoInstallPackage
   

5. ブラウザーに戻り、署名コンポーネントを使用してページを再度開きます。http://localhost:4502/content/wknd/us/en/magazine/guide-la-skateparks.html.

6. 開発者ツールを開き、ページのHTMLソースに署名コンポーネントがないか調べます。

   

   data-cmp-data-layerにSlingモデルからJSON文字列が入力されていることがわかります。

7. ブラウザーの開発者ツールを開き、コンソール​に次のコマンドを入力します。

   window.adobeDataLayer.getState();
   

8. componentの下の応答の下に移動して、bylineコンポーネントのインスタンスがデータレイヤーに追加されていることを確認します。

   

   次のようなエントリが表示されます。

   byline-136073cfcb:
       @type: "wknd/components/byline"
       fileReference: "/content/dam/wknd/en/contributors/stacey-roswells.jpg"
       name: "Stacey Roswells"
       occupation: (3) ["Artist", "Photographer", "Traveler"]
       parentId: "page-30d989b3f8"
   

   公開されるプロパティが、Sling ModelのHashMapに追加されたものと同じであることを確認します。

クリックイベントの追加

Adobeクライアントデータレイヤーはイベント駆動型で、アクションをトリガーする最も一般的なイベントの1つはcmp:clickイベントです。 AEMコアコンポーネントを使用すると、データ要素を利用してコンポーネントを簡単に登録できます。data-cmp-clickable.

クリック可能な要素は、通常、CTAボタンまたはナビゲーションリンクです。 署名コンポーネントにはこれらのものはありませんが、他のカスタムコンポーネントでは一般的な場合があるので、任意の方法で登録します。

1. IDEでui.appsモジュールを開きます。

2. byline.html（ui.apps/src/main/content/jcr_root/apps/wknd/components/byline/byline.html）ファイルを開きます。

3. byline.htmlを更新して、署名の​name​要素にdata-cmp-clickable属性を含めます。

     <h2 class="cmp-byline__name" 
   +    data-cmp-clickable="${byline.data ? true : false}">
        ${byline.name}
     </h2>
   

4. 新しいターミナルを開きます。 Mavenのスキルを使用して、ui.appsモジュールのみを構築してデプロイします。

   $ cd aem-guides-wknd/ui.apps
   $ mvn clean install -PautoInstallPackage
   

5. ブラウザーに戻り、署名コンポーネントを追加してページを再度開きます。http://localhost:4502/content/wknd/us/en/magazine/guide-la-skateparks.html.

   イベントをテストするには、開発者コンソールを使用してJavaScriptを手動で追加します。 この方法に関するビデオについては、AEMコアコンポーネントでのAdobeクライアントデータレイヤーの使用を参照してください。

6. ブラウザーのデベロッパーツールを開き、コンソール​に次のメソッドを入力します。

   function bylineClickHandler(event) {
       var dataObject = window.adobeDataLayer.getState(event.eventInfo.path);
       if (dataObject != null && dataObject['@type'] === 'wknd/components/byline') {
           console.log("Byline Clicked!");
           console.log("Byline name: " + dataObject['name']);
       }
   }
   

   この単純なメソッドは、署名コンポーネントの名前のクリックを処理する必要があります。

7. コンソール​に次のメソッドを入力します。

   window.adobeDataLayer.push(function (dl) {
        dl.addEventListener("cmp:click", bylineClickHandler);
   });
   

   上記のメソッドは、イベントリスナーをデータレイヤーにプッシュしてcmp:clickイベントをリッスンし、bylineClickHandlerを呼び出します。

   注意

   この演習全体でブラウザーを更新する際には、​​ではなくが重要です。そうしないと、コンソールのJavaScriptが失われます。

8. ブラウザーの​コンソール​を開き、署名コンポーネントで作成者の名前をクリックします。

   

   コンソールメッセージByline Clicked!と署名名が表示されます。

   cmp:clickイベントは、最も簡単に接続できます。 より複雑なコンポーネントの場合や、その他の動作を追跡する場合は、カスタムJavaScriptを追加して新しいイベントを追加し、登録することができます。 好例はカルーセルコンポーネントです。このコンポーネントは、スライドが切り替えられるたびにcmp:showイベントをトリガーします。 詳しくは、ソースコードを参照してください。

DataLayerBuilderユーティリティの使用

この章の前述のSlingモデルが更新されたの場合、HashMapを使用して各プロパティを手動で設定し、JSON文字列を作成することを選択しました。 この方法は、1回限りの小さなコンポーネントでは正常に機能しますが、AEMコアコンポーネントを拡張するコンポーネントでは、多くの追加コードが生じる可能性があります。

重いリフティングのほとんどを実行するユーティリティクラスDataLayerBuilderが存在します。 これにより、実装は必要なプロパティのみを拡張できます。 DataLayerBuilderを使用するようにSlingモデルを更新します。

1. IDEに戻り、 coreモジュールに移動します。

2. Byline.java（core/src/main/java/com/adobe/aem/guides/wknd/core/models/Byline.java）ファイルを開きます。

3. getData()メソッドを変更して、ComponentData型を返します。

   import com.adobe.cq.wcm.core.components.models.datalayer.ComponentData;
   ...
   public interface Byline {
       ...
       /***
        * Return data about the Byline Component to populate the data layer
        * @return ComponentData
        */
       ComponentData getData();
   }
   

   ComponentData は、AEMコアコンポーネントが提供するオブジェクトです。前の例と同様にJSON文字列が生成されますが、多くの追加作業も実行されます。

4. BylineImpl.java（core/src/main/java/com/adobe/aem/guides/wknd/core/models/impl/BylineImpl.java）ファイルを開きます。

5. 次のimport文を追加します。

   import com.adobe.cq.wcm.core.components.models.datalayer.ComponentData;
   import com.adobe.cq.wcm.core.components.models.datalayer.builder.DataLayerBuilder;
   

6. getData()メソッドを次のように置き換えます。

   @Override
   public ComponentData getData() {
       Resource bylineResource = this.request.getResource();
       // Use ComponentUtils to verify if the DataLayer is enabled
       if (ComponentUtils.isDataLayerEnabled(bylineResource)) {
   
           return DataLayerBuilder.extending(getImage().getData()).asImageComponent()
               .withTitle(this::getName)
               .build();
   
       }
       // return null if the Data Layer is not enabled
       return null;
   }
   

   署名コンポーネントは、画像コアコンポーネントの一部を再利用して、作成者を表す画像を表示します。 上記のスニペットでは、DataLayerBuilderを使用してImageコンポーネントのデータレイヤーを拡張します。 これにより、使用する画像に関するすべてのデータがJSONオブジェクトに事前設定されます。 また、@typeやコンポーネントの一意の識別子の設定など、ルーチンの機能の一部も実行します。 メソッドが小さいことに注意してください。

   唯一のプロパティはwithTitleを拡張し、getName()の値に置き換えられます。

7. ターミナルウィンドウを開きます。Mavenのスキルを使用して、coreモジュールのみを構築してデプロイします。

   $ cd aem-guides-wknd/core
   $ mvn clean install -PautoInstallBundle
   

8. IDEに戻り、ui.appsの下のbyline.htmlファイルを開きます。

9. byline.data.jsonを使用するようにHTLを更新し、data-cmp-data-layer属性を設定します。

     <div data-sly-use.byline="com.adobe.aem.guides.wknd.core.models.Byline"
       data-sly-use.placeholderTemplate="core/wcm/components/commons/v1/templates.html"
       data-sly-test.hasContent="${!byline.empty}"
   -   data-cmp-data-layer="${byline.data}"
   +   data-cmp-data-layer="${byline.data.json}"
   

   現在、型ComponentDataのオブジェクトが返されていることを覚えておいてください。 このオブジェクトには、ゲッターメソッドgetJson()が含まれ、これはdata-cmp-data-layer属性を設定するために使用されます。

10. ターミナルウィンドウを開きます。Mavenのスキルを使用して、ui.appsモジュールのみを構築してデプロイします。

    $ cd aem-guides-wknd/ui.apps
    $ mvn clean install -PautoInstallPackage
    

11. ブラウザーに戻り、署名コンポーネントを追加してページを再度開きます。http://localhost:4502/content/wknd/us/en/magazine/guide-la-skateparks.html.

12. ブラウザーの開発者ツールを開き、コンソール​に次のコマンドを入力します。

    window.adobeDataLayer.getState();
    

13. componentの下の応答に移動して、bylineコンポーネントのインスタンスを探します。

    

    次のようなエントリが表示されます。

    byline-136073cfcb:
        @type: "wknd/components/byline"
        dc:title: "Stacey Roswells"
        image:
            @type: "image/jpeg"
            repo:id: "142658f8-4029-4299-9cd6-51afd52345c0"
            repo:modifyDate: "2019-10-25T23:49:51Z"
            repo:path: "/content/dam/wknd/en/contributors/stacey-roswells.jpg"
            xdm:tags: []
        parentId: "page-30d989b3f8"
        repo:modifyDate: "2019-10-18T20:17:24Z"
    

    bylineコンポーネントエントリ内にimageオブジェクトが存在することを確認します。 DAM内のアセットに関する情報が多く含まれます。 また、@typeと一意のID（この場合はbyline-136073cfcb）が自動的に入力され、コンポーネントが変更された日時を示すrepo:modifyDateも確認します。

その他の例

1. データレイヤーを拡張するもう1つの例は、WKNDコードベース内のImageListコンポーネントを調べることで確認できます。

   • ImageList.java — モジュール内のJavaインターフ core ェイス。
   • ImageListImpl.java — モジュール内のSlingモ core デル。
   • image-list.html - HTLテンプレート(モジュ ui.apps ール内)
   メモ

   DataLayerBuilderを使用する場合、occupationのようなカスタムプロパティを含めるのは、もう少し難しくなります。 ただし、画像またはページを含むコアコンポーネントを拡張する場合は、このユーティリティによって多くの時間を節約できます。

   メモ

   実装全体で再利用されるオブジェクト用の高度なデータレイヤーを構築する場合は、データレイヤー要素を独自のデータレイヤー固有のJavaオブジェクトに抽出することをお勧めします。 例えば、コマースコアコンポーネントには、コマース実装内の多くのコンポーネントで使用できるProductDataとCategoryData用のインターフェイスが追加されています。 詳しくは、 aem-cif-core-componentsリポジトリのコードを参照してください。

おめでとうございます。

AEMコンポーネントを使用してクライアントデータレイヤーを拡張およびカスタマイズする方法をいくつか試しました。

その他のリソース

• Adobeクライアントデータレイヤーのドキュメント
• コアコンポーネントとのデータレイヤーの統合
• Adobeクライアントデータレイヤーとコアコンポーネントのドキュメントの使用