ドキュメントAEMAEM チュートリアルAEM Sites チュートリアル

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

Last update: Thu Jun 06 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

作成対象：

  • 中級
  • 開発者

Adobe Client Data Layer は、web ページでの訪問者エクスペリエンスに関するデータを収集および保存し、このデータに容易にアクセスするための標準的な方法を導入しています。Adobe Client Data Layer はプラットフォームに依存しませんが、AEM で使用するためにコアコンポーネントに完全に統合されています。

https://video.tv.adobe.com/v/330110?quality=12&learn=on&captions=jpn

NOTE
AEM サイトで Adobe Client Data Layer を有効にしますか？手順はこちらを参照してください。

データレイヤーの探索

ブラウザーの開発者ツールやライブの WKND 参照サイトを使用するだけで、Adobe Client Data Layer の組み込み機能を把握できます。

NOTE
次のスクリーンショットは、Chrome ブラウザーから取得したものです。

  1. https://wknd.site/us/en.html に移動します。

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

    code language-js 
    window.adobeDataLayer.getState();

    AEM サイト上のデータレイヤーの現在の状態を確認するには、応答を調べます。ページとそれぞれのコンポーネントに関する情報が表示されます。

    Adobe Data Layer のレスポンス

  3. コンソールで次のように入力して、データオブジェクトをデータレイヤーにプッシュします。

    code language-js 
    window.adobeDataLayer.push({
    "component": {
        "training-data": {
            "title": "Learn More",
            "link": "learn-more.html"
        }
    }
});

  4. もう一度 adobeDataLayer.getState() コマンドを実行し、training-data のエントリを検索します。

  5. 次にパスのパラメーターを追加して、コンポーネントの特定の状態だけを返すようにします。

    code language-js 
    window.adobeDataLayer.getState('component.training-data');

    1 つのコンポーネントのデータエントリのみを返す

イベントとの連携

ベストプラクティスは、データレイヤーのイベントに基づいて任意のカスタムコードをトリガーすることです。次に、様々なイベントの登録とリスニングを探します。

  1. コンソールに次のヘルパーメソッドを入力します。

    code language-js 
    function getDataObjectHelper(event, filter) {
    if (event.hasOwnProperty("eventInfo") && event.eventInfo.hasOwnProperty("path")) {
        var dataObject = window.adobeDataLayer.getState(event.eventInfo.path);
        if (dataObject != null) {
            for (var property in filter) {
                if (!dataObject.hasOwnProperty(property) || (filter[property] !== null && filter[property] !== dataObject[property])) {
                    return;
                }
                return dataObject;
            }
        }
    }
    return;
}

    上記のコードは、event オブジェクトを検査し、adobeDataLayer.getState メソッドを使用して、イベントをトリガーしたオブジェクトの現在の状態を取得します。次に、ヘルパーメソッドは filter を検査し、現在の dataObject がフィルター条件を満たす場合にのみ返されます。

    note caution
    CAUTION
    この演習の間では、ブラウザーを更新​ しない ​ことが重要です。さもないと、コンソール JavaScript が失われます。

  2. 次に、カルーセル ​の中に​ ティーザー ​コンポーネントが表示されたときに呼び出されるイベントハンドラーを入力します。

    code language-js 
    function teaserShownHandler(event) {
    var dataObject = getDataObjectHelper(event, {"@type": "wknd/components/carousel/item"});
    if(dataObject != null) {
        console.log("Teaser Shown: " + dataObject['dc:title']);
        console.log(dataObject);
    }
}

    teaserShownHandler 機能は getDataObjectHelper 機能を呼び出して、wknd/components/carousel/item のフィルターを @type として渡し、他のコンポーネントによって引き起こされたイベントを除外します。

  3. 次に、データレイヤーにイベントリスナーをプッシュして、cmp:show イベントをリッスンします。

    code language-js 
    window.adobeDataLayer.push(function (dl) {
     dl.addEventListener("cmp:show", teaserShownHandler);
});

    cmp:show イベントは、カルーセル ​で新しいスライドが表示されたとき、タブ ​コンポーネントで新しいタブが選択されたときなど、多くの異なるコンポーネントでトリガーされます。

  4. ページで、カルーセルスライドを切り替え、コンソールステートメントを確認します。

    カルーセルを切り替えてイベントリスナーを表示する

  5. cmp:show イベントのリッスンを停止するには、データレイヤーからイベントリスナーを削除します。

    code language-js 
    window.adobeDataLayer = window.adobeDataLayer || [];
window.adobeDataLayer.push(function(dl) {
    dl.removeEventListener("cmp:show", teaserShownHandler);
});

  6. ページに戻り、カルーセルスライドを切り替えます。これ以上のステートメントがログに記録されず、イベントがリッスンされていないことを確認します。

  7. 次に、ページ表示イベントがトリガーされたときに呼び出されるイベントハンドラーを作成します。

    code language-js 
    function pageShownHandler(event) {
    var dataObject = getDataObjectHelper(event, {"@type": "wknd/components/page"});
    if(dataObject != null) {
        console.log("Page Shown: " + dataObject['dc:title']);
        console.log(dataObject);
    }
}

    イベントのフィルタリングにリソースタイプ wknd/components/page が使用されていることに注意します。

  8. 次に、データレイヤーにイベントリスナーをプッシュして cmp:show イベントをリッスンし、pageShownHandler を呼び出します。

    code language-js 
    window.adobeDataLayer = window.adobeDataLayer || [];
window.adobeDataLayer.push(function (dl) {
     dl.addEventListener("cmp:show", pageShownHandler);
});

  9. ページデータで実行されたコンソールステートメントがすぐに表示されます。

    ページ表示データ

    ページの cmp:show イベントは、それぞれのページのロード時に、ページの一番上にトリガーされます。ページは既に読み込まれているのに、なぜイベントハンドラーが起動したのか、と思うかもしれません。

    Adobe Client Data Layer のユニークな機能の一つは、データレイヤーが初期化される​ 前 ​または​ 後 ​にイベントリスナーを登録できる点です。競合状態を回避するのに役立ちます。

    データレイヤーは、発生したすべてのイベントを順番に並べたキュー配列を保持します。データレイヤーは、デフォルトで、過去 ​に発生したイベントと​ 未来 ​に発生するイベントに対して、イベントコールバックをトリガーします。イベントは、過去または未来でフィルタリングすることもできます。詳しくは、ドキュメントを参照してください。

次の手順

学習を続ける方法は 2 つあります。1 つ目の選択肢は、Adobe Client Data layer の使い方を説明したチュートリアル「ページデータを収集して Adobe Analytics に送信する」を学習することです。2 つ目の選択肢は、AEM コンポーネントで Adobe Client Data Layer をカスタマイズする方法を学習することです。

その他のリソース additional-resources

recommendation-more-help
bb44cebf-d964-4e3c-b64e-ce882243fe4d