Adobeクライアントデータレイヤーの組み込み機能とAEMコアコンポーネントを使用して、Adobe Experience Manager Sitesのページに関するデータを収集する方法を説明します。 Experience Platform Launch と Adobe Analytics 拡張は、ルールを作成して Adobe Analytics にページデータを送信するために使用されます。 🔗
このチュートリアルでは、Adobeクライアントデータレイヤーのイベントに基づいてLaunchルールをトリガーし、ルールを起動するタイミングの条件を追加し、AEMページのPage NameとPage TemplateをAdobe Analyticsに送信します。
以下が必要です。
LaunchとAEMサイトの統合について このビデオシリーズを参照してください。
https://wknd. siteは、AEM実装のリファレンスとチュートリアルとして設計されたオープンソ ースプロジ ェクトに基づいて構築された、公開 🔗 サイトです。
AEM環境を設定してWKNDコードベースをインストールする代わりに、Experience Platformデバッガーを使用して、ライブhttps://wknd.site/を Launchプロパティに切り替えることができます。**もちろん、既にAdobeクライアントデータレイヤーが有効になっている場合は、独自のAEMサイトを使用できます。
Experience Platform Launchにログインし、Launchプロパティを作成します(まだ作成していない場合)。
最初のLaunch ライブラリが作成され、Launch 環境に昇格されていることを確認します。
ライブラリの公開先の環境からLaunch埋め込みコードをコピーします。
ブラウザーで新しいタブを開き、https://wknd.site/に移動します。
Debuggerブラウザー拡張機能をExperience Platformする
Launch / 設定に移動し、挿入された埋め込みコードの下で、既存のLaunch埋め込みコードを、手順3でコピーした**埋め込みコードに置き換えます。
「WKND」タブで、コンソールログとデバッガーをロックします。
WKND参照プロジェクトは、AEMコアコンポーネントを使用して構築され、Adobeクライアントデータレイヤーがデフォルトで有効になっています。 次に、Adobeクライアントデータレイヤーが有効になっていることを確認します。
https://wknd.siteに移動します。
ブラウザーの開発者ツールを開き、コンソールに移動します。 次のコマンドを実行します。
adobeDataLayer.getState();
これは、クライアントデータレイヤーのAdobeの現在の状態を返します。
応答を展開し、page
エントリを調べます。 次のようなデータスキーマが表示されます。
page-2eee4f8914:
@type: "wknd/components/page"
dc:description: WKND is a collective of outdoors, music, crafts, adventure sports, and travel enthusiasts that want to share our experiences, connections, and expertise with the world.
dc:title: "WKND Adventures and Travel"
repo:modifyDate: "2020-08-31T21:02:21Z"
repo:path: "/content/wknd/us/en.html"
xdm:language: "en-US"
xdm:tags: ["Attract"]
xdm:template: "/conf/wknd/settings/wcm/templates/landing-page-template"
データレイヤーのページスキーマ、dc:title
、xdm:language
およびxdm:template
から派生した標準プロパティを使用して、Adobe Analyticsにページデータを送信します。
adobeDataLayer
JavaScriptオブジェクトが表示されない場合 サイトでAdobeクライアントデータレイヤーが有効になっていることを確認します。
Adobeクライアントデータレイヤーは、イベント駆動型データレイヤーです。 AEM Pageデータレイヤーが読み込まれると、イベントcmp:show
がトリガーされます。 cmp:show
イベントに基づいてトリガーされるルールを作成します。
Experience Platform Launchに移動し、AEM Siteと統合されたWebプロパティに移動します。
Launch UIの「ルール」セクションに移動し、「新しいルールを作成」をクリックします。
ルールに「Page Loaded」と名前を付けます。
イベント 追加をクリックして、イベント設定ウィザードを開きます。
「イベントタイプ」で、「カスタムコード」を選択します。
メインパネルで「エディターを開く」をクリックし、次のコードスニペットを入力します。
var pageShownEventHandler = function(evt) {
// defensive coding to avoid a null pointer exception
if(evt.hasOwnProperty("eventInfo") && evt.eventInfo.hasOwnProperty("path")) {
//trigger Launch Rule and pass event
console.debug("cmp:show event: " + evt.eventInfo.path);
var event = {
//include the path of the component that triggered the event
path: evt.eventInfo.path,
//get the state of the component that triggered the event
component: window.adobeDataLayer.getState(evt.eventInfo.path)
};
//Trigger the Launch Rule, passing in the new `event` object
// the `event` obj can now be referenced by the reserved name `event` by other Launch data elements
// i.e `event.component['someKey']`
trigger(event);
}
}
//set the namespace to avoid a potential race condition
window.adobeDataLayer = window.adobeDataLayer || [];
//push the event listener for cmp:show into the data layer
window.adobeDataLayer.push(function (dl) {
//add event listener for `cmp:show` and callback to the `pageShownEventHandler` function
dl.addEventListener("cmp:show", pageShownEventHandler);
});
上記のコードスニペットでは、関数をデータレイヤーにプッシュしてイベントリスナーを追加します。 cmp:show
イベントがトリガーされると、pageShownEventHandler
関数が呼び出されます。 この関数では、いくつかのサニティチェックが追加され、イベントをトリガーしたコンポーネントのデータレイヤー🔗の最新の状態で新しいevent
が構築されます。
その後、trigger(event)
が呼び出されます。 trigger()
は、Launchでの予約名で、Launchルールを「トリガー」します。event
オブジェクトをパラメーターとして渡し、その後、event
という名前のLaunchで別の予約名で公開します。 Launchのデータ要素で、次のような様々なプロパティを参照できるようになりました。event.component['someKey']
.
変更内容を保存します。
次に、「アクション」の下の「追加」をクリックして、「アクションの設定」ウィザードを開きます。
「アクションタイプ」で、「カスタムコード」を選択します。
メインパネルで「エディターを開く」をクリックし、次のコードスニペットを入力します。
console.debug("Page Loaded ");
console.debug("Page name: " + event.component['dc:title']);
console.debug("Page type: " + event.component['@type']);
console.debug("Page template: " + event.component['xdm:template']);
event
オブジェクトは、カスタムイベントで呼び出されるtrigger()
メソッドから渡されます。 component
は、カスタムイベントのデータレイヤーから派生 getState
した現在のページです。以前のページスキーマをデータレイヤーで公開して、すぐに使用できる様々なキーを確認できるようにしたことを思い出してください。
変更を保存し、Launchでビルドを実行して、AEMサイトで使用する環境にコードを昇格させます。
Adobe Experience Platform Debuggerを使用して、埋め込みコードを開発環境に切り替えると非常に役立ちます。
AEMサイトに移動し、開発者ツールを開いてコンソールを表示します。 ページを更新すると、コンソールメッセージがログに記録されていることが確認できます。
次に、複数のデータ要素を作成し、Adobeクライアントデータレイヤーから異なる値を取り込みます。 前の演習で見たように、カスタムコードを使用してデータレイヤーのプロパティに直接アクセスできます。 データ要素を使用する利点は、Launchルール全体で再利用できる点です。
以前のページスキーマをデータレイヤーで公開した後に呼び出します。
データ要素は、@type
、dc:title
およびxdm:template
プロパティにマッピングされます。
Experience Platform Launchに移動し、AEM Siteと統合されたWebプロパティに移動します。
「データ要素」セクションに移動し、「新しいデータ要素を作成」をクリックします。
名前には、コンポーネントリソースタイプと入力します。
データ要素のタイプに対して、カスタムコードを選択します。
「エディターを開く」をクリックし、カスタムコードエディターで次のように入力します。
if(event && event.component && event.component.hasOwnProperty('@type')) {
return event.component['@type'];
}
変更内容を保存します。
event
オブジェクトは、Launchでルールをトリガーしたイベントに基づいて使用可能になり、範囲が指定されます。 データ要素の値は、ルール内でデータ要素が参照されるまで設定されません。 したがって、このデータ要素は、前の手順で作成した「Page Loaded」ルールなどのルール内で安全に使用できますが、他のコンテキストでは安全に使用できません。
「データ要素を追加」をクリックします。
名前には、ページ名と入力します。
データ要素のタイプに対して、カスタムコードを選択します。
「エディターを開く」をクリックし、カスタムコードエディターで次のように入力します。
if(event && event.component && event.component.hasOwnProperty('dc:title')) {
return event.component['dc:title'];
}
変更内容を保存します。
「データ要素を追加」をクリックします。
名前には、ページテンプレートと入力します。
データ要素のタイプに対して、カスタムコードを選択します。
「エディターを開く」をクリックし、カスタムコードエディターで次のように入力します。
if(event && event.component && event.component.hasOwnProperty('xdm:template')) {
return event.component['xdm:template'];
}
変更内容を保存します。
これで、ルールの一部として3つのデータ要素が必要になりました。
次に、Analytics拡張機能をLaunchプロパティに追加します。 このデータはどこかで送る必要がある!
Experience Platform Launchに移動し、AEM Siteと統合されたWebプロパティに移動します。
拡張機能 > カタログに移動します。
Adobe Analytics拡張機能を探し、「インストール」をクリックします。
ライブラリ管理 / レポートスイートで、各Launch環境で使用するレポートスイートIDを入力します。
このチュートリアルでは、すべての環境に対して1つのレポートスイートを使用しても構いませんが、実際の環境では、次の画像に示すように、個別のレポートスイートを使用する必要があります
ライブラリを最新の状態に保ちやすいので、「自分のライブラリを管理」オプションAppMeasurement.js
をライブラリ管理設定として使用することをお勧めします。
「Activity Mapを使用」チェックボックスをオンにします。
「一般/トラッキングサーバー」に、トラッキングサーバー(例:tmd.sc.omtrdc.net
と入力します。 サイトがhttps://
をサポートしている場合は、SSLトラッキングサーバーを入力します。
「保存」をクリックして、変更を保存します。
次に、Page Loadedルールを更新して、Component Resource Typeデータ要素を使用し、cmp:show
イベントがPageに対してのみ実行されるようにします。 cmp:show
イベントを発生させる他のコンポーネント。例えば、カルーセルコンポーネントは、スライドが変更されると実行します。 したがって、このルールに条件を追加することが重要です。
Launch UIで、前に作成した「Page Loaded」ルールに移動します。
「条件」で「追加」をクリックし、「条件の設定」ウィザードを開きます。
「条件の種類」で「値の比較」を選択します。
フォームフィールドの最初の値を%Component Resource Type%
に設定します。 データ要素アイコンを使用して、コンポーネントリソースタイプデータ要素を選択できます。 比較器を
Equals
のままにします。
2番目の値をwknd/components/page
に設定します。
この条件は、このチュートリアルで前に作成したcmp:show
イベントをリッスンするカスタムコード関数内に追加できます。 ただし、UI内に追加すると、ルールを変更する必要が生じる可能性のある追加のユーザーをより明確に把握できます。 加えて、データ要素を使用できます!
変更内容を保存します。
現在、Page Loadedルールは、単にコンソールステートメントを出力します。 次に、データ要素とAnalytics拡張機能を使用して、Page LoadedルールでAnalytics変数をアクションとして設定します。 また、ページビュービーコンをトリガーし、収集したデータをAdobe Analyticsに送信する追加のアクションも設定します。
Page Loadedルールremove the Core - Custom Codeアクション(コンソールステートメント):
「アクション」の下の「追加」をクリックして、新しいアクションを追加します。
ExtensionタイプをAdobe Analyticsに設定し、アクションタイプを変数を設定に設定します。
メインパネルで、使用可能なeVarを選択し、データ要素ページテンプレートの値としてを設定します。 データ要素アイコンを使用して、ページテンプレート要素を選択します。
「追加の設定」で下にスクロールし、「ページ名」をデータ要素ページ名に設定します。
変更内容を保存します。
次に、プラスアイコンをタップして、Adobe Analyticsの右側に「アクション」を追加し、変数を設定します。
ExtensionタイプをAdobe Analyticsに設定し、アクションタイプをSend Beaconに設定します。 これはページビューと見なされるので、デフォルトのトラッキング設定はs.t()
のままにします。
変更内容を保存します。Page Loadedルールには、次の設定が必要です。
cmp:show
します。すべての変更を保存し、Launchライブラリをビルドして、適切な環境に昇格します。
これで、Page LoadedルールがAnalyticsビーコンを送信したので、Experience Platformデバッガーを使用してAnalyticsトラッキング変数を表示できます。
ブラウザーでWKND Siteを開きます。
デバッガーアイコンをクリックして、Experience Platformデバッガーを開きます。
前述のように、デバッガーがLaunchプロパティをお使いの開発環境にマッピングしていることを確認し、コンソールログを確認します。
Analyticsメニューを開き、レポートスイートが**レポートスイートに設定されていることを確認します。 ページ名も入力する必要があります。
下にスクロールし、Network Requestsを展開します。 ページテンプレートに設定されたevarを見つけることができます。
ブラウザーに戻り、デベロッパーコンソールを開きます。 ページ上部のカルーセルをクリックします。
ブラウザーコンソールで、コンソールステートメントを確認します。
これは、カルーセルがcmp:show
イベントをトリガーし、をチェックしたので、コンポーネントのリソースタイプを確認したので、イベントは発生しないためです。
コンソールログが表示されない場合は、Experience PlatformデバッガーのLaunchでコンソールログがオンになっていることを確認してください。
西オーストラリアのような記事ページに移動します。 「ページ名」と「テンプレートタイプ」が変更されるのを確認します。
イベントドリブン型のAdobeクライアントデータレイヤーとExperience Platform Launchを使用して、AEM Siteからデータページデータを収集し、Adobe Analyticsに送信しただけです。
次のチュートリアルを参照して、イベントドリブン型Adobeクライアントデータレイヤーを使用して、Adobe Experience Managerサイト上の特定のコンポーネントのクリックを追跡する方法を学びます。