AEMコアコンポーネントでのAdobeクライアントデータレイヤーの使用

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

メモ

AEMサイトでAdobeクライアントデータレイヤーを有効にしますか? こちらの手順を参照してください

データレイヤーの調査

Adobeクライアントデータレイヤーの組み込み機能は、ブラウザーの開発者ツールとライブのWKNDリファレンスサイトを使用するだけでわかります。

メモ

以下は、Chromeブラウザーから撮影したスクリーンショットです。

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

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

    window.adobeDataLayer.getState();
    

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

    Adobeデータレイヤーの応答

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

    window.adobeDataLayer.push({
        "component": {
            "training-data": {
                "title": "Learn More",
                "link": "learn-more.html"
            }
        }
    });
    
  4. コマンドadobeDataLayer.getState()をもう一度実行し、training-dataのエントリを見つけます。

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

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

    単一のコンポーネントのデータエントリのみを返す

イベントの操作

データレイヤーのイベントに基づいてカスタムコードをトリガーすることをお勧めします。 次に、様々なイベントの登録とリスンを参照します。

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

    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メソッドを使用して、イベントをトリガーしたオブジェクトの現在の状態を取得します。 次に、ヘルパーメソッドは、現在のdataObjectがフィルターに一致する場合にのみ、filter条件を検査します。

    注意

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

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

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

    teaserShownHandlergetDataObjectHelperメソッドを呼び出し、wknd/components/teaserのフィルターを@typeとして渡して、他のコンポーネントによってトリガーされたイベントを除外します。

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

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

    cmp:showイベントは、カルーセル​に新しいスライドが表示される場合や、タブ​コンポーネントで新しいタブが選択された場合など、様々なコンポーネントによってトリガーされます。

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

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

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

    window.adobeDataLayer = window.adobeDataLayer || [];
    window.adobeDataLayer.push(function(dl) {
        dl.removeEventListener("cmp:show", teaserShownHandler);
    });
    
  6. ページに戻り、カルーセルスライドを切り替えます。 これ以上ログに記録されず、イベントがリッスンされていないことを確認します。

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

    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を呼び出します。

    window.adobeDataLayer = window.adobeDataLayer || [];
    window.adobeDataLayer.push(function (dl) {
         dl.addEventListener("cmp:show", pageShownHandler);
    });
    
  9. ページデータでコンソールステートメントが実行されたのがすぐにわかります。

    ページショーデータ

    ページのcmp:showイベントは、各ページの読み込み時にページの最上部でトリガーされます。 ページが明確に読み込まれているのに、イベントハンドラーがトリガーされたのはなぜですか?と問う場合があります。

    これは、Adobeクライアントデータレイヤーの独自の機能の1つで、または​の前に​イベントリスナーを登録できる点で、データレイヤーが初期化された後に​を登録できます。 これは、競合状態を回避するための重要な機能です。

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

次の手順

イベントドリブン型Adobeクライアントデータレイヤーを使用してページデータを収集し、Adobe Analyticsに送信する方法については、次のチュートリアルを参照してください。

または、AEMコンポーネントでAdobeクライアントデータレイヤーをカスタマイズする方法を説明します。

その他のリソース

このページ