カスタムAEMコンポーネントのコンテンツを使用してAdobeクライアントデータレイヤーをカスタマイズする方法について説明します。 が提供する API の使用方法を説明します。 AEM Core Components to extend をクリックし、データレイヤーをカスタマイズします。
このチュートリアルでは、WKND を更新してAdobeクライアントデータレイヤーを拡張する様々なオプションを見てみましょう 署名コンポーネント. この 署名 コンポーネントは カスタムコンポーネント このチュートリアルで学習した内容は、他のカスタムコンポーネントにも適用できます。
A ローカル開発環境 このチュートリアルを完了するには、が必要です。 スクリーンショットとビデオは、macOSで実行するAEMas a Cloud ServiceSDK を使用してキャプチャされます。 特に断りのない限り、コマンドとコードはローカルのオペレーティングシステムから独立しています。
AEM as a Cloud Service は初めてですか? 以下を確認します。 AEM as a Cloud Service SDK を使用したローカル開発環境の設定に関する以下のガイド.
AEM 6.5 を初めて使用する場合 以下を確認します。 次のガイドでは、ローカル開発環境を設定します.
このチュートリアルでは、WKND リファレンスサイトの署名コンポーネントを拡張します。 WKND コードベースのクローンを作成し、ローカル環境にインストールします。
ローカルクイックスタートの起動 作成者 次の場所で実行されるAEMのインスタンス: http://localhost:4502.
ターミナルウィンドウを開き、Git を使用して WKND コードベースのクローンを作成します。
$ git clone git@github.com:adobe/aem-guides-wknd.git
WKND コードベースをAEMのローカルインスタンスにデプロイします。
$ cd aem-guides-wknd
$ mvn clean install -PautoInstallSinglePackage
AEM 6.5 および最新のサービスパックの場合は、 classic
profile to to Maven コマンド:
mvn clean install -PautoInstallSinglePackage -Pclassic
新しいブラウザーウィンドウを開き、AEMにログインします。 を開きます。 雑誌 次のようなページ: 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
開発者ツールを開き、 コンソール:
window.adobeDataLayer.getState();
AEMサイト上のデータレイヤーの現在の状態を確認するには、応答を調べます。 ページと個々のコンポーネントに関する情報が表示されます。
署名コンポーネントがデータレイヤーに表示されないことを確認します。
データレイヤーのコンポーネントに関するデータを挿入するには、まずコンポーネントの Sling モデルを更新します。 次に、署名の Java™インターフェイスと Sling Model 実装を更新して、新しいメソッドを使用します getData()
. このメソッドには、データレイヤーに挿入されるプロパティが含まれます。
を開きます。 aem-guides-wknd
選択した IDE 内のプロジェクト。 次に移動: core
モジュール。
Byline.java
(core/src/main/java/com/adobe/aem/guides/wknd/core/models/Byline.java
)ファイルを開きます。
以下のメソッドをインターフェイスに追加します。
public interface Byline {
...
/***
* Return data about the Byline Component to populate the data layer
* @return String
*/
String getData();
}
BylineImpl.java
(core/src/main/java/com/adobe/aem/guides/wknd/core/models/impl/BylineImpl.java
)ファイルを開きます。これは、 Byline
インターフェイスが作成され、Sling Model として実装されます。
ファイルの先頭に次の 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 として公開するデータをシリアル化します。 この ComponentUtils
を使用して、データレイヤーが有効かどうかを確認できます。
未実装のメソッドを追加 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;
}
}
上記の方法では、 HashMap
は、JSON として公開するプロパティを取り込むために使用されます。 既存のメソッドは、 getName()
および getOccupations()
が使用されます。 この @type
は、コンポーネントの一意のリソースタイプを表します。これにより、クライアントは、コンポーネントのタイプに基づいてイベントやトリガーを簡単に識別できます。
この ObjectMapper
を使用してプロパティをシリアル化し、JSON 文字列を返します。 その後、この JSON 文字列をデータレイヤーに挿入できます。
ターミナルウィンドウを開きます。のみをビルドしてデプロイする core
モジュールで Maven のスキルを使用します。
$ cd aem-guides-wknd/core
$ mvn clean install -PautoInstallBundle
次に、 Byline
HTL. HTL(HTMLテンプレート言語 ) は、コンポーネントのHTMLをレンダリングするために使用されるテンプレートです。
特別なデータ属性 data-cmp-data-layer
各AEMコンポーネントで、データレイヤーを公開するためにを使用します。 AEMコアコンポーネントが提供する JavaScript は、このデータ属性を探します。 このデータ属性の値には、署名 Sling モデルの getData()
メソッドに挿入され、Adobe・クライアント・データ・レイヤーに挿入されます。
を開きます。 aem-guides-wknd
を IDE に投影します。 次に移動: ui.apps
モジュール。
byline.html
(ui.apps/src/main/content/jcr_root/apps/wknd/components/byline/byline.html
)ファイルを開きます。
更新 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 モデルです。 .data
は、の HTL で Java™ Getter メソッドを呼び出すための標準的な表記です。 getData()
前の演習で実装済み。
ターミナルウィンドウを開きます。のみをビルドしてデプロイする ui.apps
モジュールで Maven のスキルを使用します。
$ cd aem-guides-wknd/ui.apps
$ mvn clean install -PautoInstallPackage
ブラウザーに戻り、署名コンポーネントでページを再度開きます。 http://localhost:4502/content/wknd/us/en/magazine/guide-la-skateparks.html.
開発者ツールを開き、ページのHTMLソースに署名コンポーネントがないか調べます。
次のように表示されます。 data-cmp-data-layer
は、Sling モデルから JSON 文字列を使用して設定されています。
ブラウザーの開発者ツールを開き、 コンソール:
window.adobeDataLayer.getState();
の下の応答の下に移動します。 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"
公開されるプロパティが、 HashMap
を Sling Model に追加します。
Adobeクライアントデータレイヤーはイベント主導型で、アクションをトリガーする最も一般的なイベントの 1 つは、 cmp:click
イベント。 AEMコアコンポーネントを使用すれば、データ要素を利用して、コンポーネントを簡単に登録できます。 data-cmp-clickable
.
クリック可能な要素は、通常、CTA ボタンまたはナビゲーションリンクです。 署名コンポーネントにはこれらはありませんが、他のカスタムコンポーネントでは一般的なものなので、どのようにしても登録してみましょう。
を開きます。 ui.apps
IDE のモジュール
byline.html
(ui.apps/src/main/content/jcr_root/apps/wknd/components/byline/byline.html
)ファイルを開きます。
更新 byline.html
を含めるには data-cmp-clickable
署名の属性 名前 要素:
<h2 class="cmp-byline__name"
+ data-cmp-clickable="${byline.data ? true : false}">
${byline.name}
</h2>
新しいターミナルを開きます。 のみをビルドしてデプロイする ui.apps
モジュールで Maven のスキルを使用します。
$ cd aem-guides-wknd/ui.apps
$ mvn clean install -PautoInstallPackage
ブラウザーに戻り、署名コンポーネントを追加してページを再度開きます。 http://localhost:4502/content/wknd/us/en/magazine/guide-la-skateparks.html.
イベントをテストするには、開発者コンソールを使用して JavaScript を手動で追加します。 詳しくは、 AEMコアコンポーネントでのAdobeクライアントデータレイヤーの使用 この方法に関するビデオについては、を参照してください。
ブラウザーの開発者ツールを開き、 コンソール:
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']);
}
}
この単純なメソッドは、署名コンポーネントの名前のクリックを処理する必要があります。
次のメソッドを コンソール:
window.adobeDataLayer.push(function (dl) {
dl.addEventListener("cmp:click", bylineClickHandler);
});
上記のメソッドは、イベントリスナーをデータレイヤーにプッシュし、 cmp:click
イベントと呼び出し bylineClickHandler
.
それは重要です not この演習全体でブラウザーを更新する場合、コンソール JavaScript は失われます。
ブラウザーで、 コンソール を開き、署名コンポーネントで作成者の名前をクリックします。
コンソールメッセージが表示されます。 Byline Clicked!
署名名
この cmp:click
イベントは、最も簡単に接続できます。 より複雑なコンポーネントの場合や、他の動作を追跡する場合は、カスタム JavaScript を追加して新しいイベントを追加し、登録することができます。 その良い例は、カルーセルコンポーネントです。このトリガーは、 cmp:show
イベントを設定します。 詳しくは、 ソースコードの詳細.
Sling モデルが 更新済み この章で先ほど、を使用して JSON 文字列を作成することを選択しました。 HashMap
をクリックし、各プロパティを手動で設定します。 この方法は、小さな 1 回限りのコンポーネントでは正常に機能しますが、AEMコアコンポーネントを拡張するコンポーネントでは、多くの追加コードが生じる可能性があります。
ユーティリティ・クラス DataLayerBuilder
は、重いリフティングのほとんどを実行するために存在します。 これにより、実装は必要なプロパティのみを拡張できます。 Sling モデルを更新し、 DataLayerBuilder
.
IDE に戻り、 core
モジュール。
Byline.java
(core/src/main/java/com/adobe/aem/guides/wknd/core/models/Byline.java
)ファイルを開きます。
を変更します。 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 文字列が生成されますが、多くの追加作業も実行します。
BylineImpl.java
(core/src/main/java/com/adobe/aem/guides/wknd/core/models/impl/BylineImpl.java
)ファイルを開きます。
次の import 文を追加します。
import com.adobe.cq.wcm.core.components.models.datalayer.ComponentData;
import com.adobe.cq.wcm.core.components.models.datalayer.builder.DataLayerBuilder;
を 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()
.
ターミナルウィンドウを開きます。のみをビルドしてデプロイする core
モジュールで Maven のスキルを使用します。
$ cd aem-guides-wknd/core
$ mvn clean install -PautoInstallBundle
IDE に戻り、を開きます。 byline.html
~の下に立ち入る ui.apps
使用する HTL を更新します。 byline.data.json
を設定する 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
属性。
ターミナルウィンドウを開きます。のみをビルドしてデプロイする ui.apps
モジュールで Maven のスキルを使用します。
$ cd aem-guides-wknd/ui.apps
$ mvn clean install -PautoInstallPackage
ブラウザーに戻り、署名コンポーネントを追加してページを再度開きます。 http://localhost:4502/content/wknd/us/en/magazine/guide-la-skateparks.html.
ブラウザーの開発者ツールを開き、 コンソール:
window.adobeDataLayer.getState();
の下の応答の下に移動します。 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"
今、 image
オブジェクトを byline
コンポーネントエントリ。 DAM 内のアセットに関する詳細情報が多く含まれます。 また、 @type
一意の ID( この場合は byline-136073cfcb
) が自動的に入力され、 repo:modifyDate
コンポーネントがいつ変更されたかを示します。
データレイヤーを拡張する別の例は、 ImageList
WKND コードベースのコンポーネント:
ImageList.java
- Java インターフェイス ( core
モジュール。ImageListImpl.java
— 内の Sling モデル core
モジュール。image-list.html
— 内の HTL テンプレート ui.apps
モジュール。のようなカスタムプロパティを含めるのは、もう少し難しくなります。 occupation
使用時 DataLayerBuilder. ただし、画像またはページを含むコアコンポーネントを拡張する場合、ユーティリティは多くの時間を節約できます。
実装全体で再利用されるオブジェクトに対して高度なデータレイヤーを構築する場合は、データレイヤー要素を独自のデータレイヤー固有の Java™オブジェクトに抽出することをお勧めします。 例えば、Commerce コアコンポーネントには、 ProductData
および CategoryData
これらは、コマース実装内の多くのコンポーネントで使用できるためです。 レビュー aem-cif-core-components リポジトリのコード を参照してください。
AEMコンポーネントを使用してAdobeクライアントデータレイヤーを拡張およびカスタマイズする方法をいくつか確認しました。