Adobe Analyticsでのページデータの収集

Adobeクライアントデータレイヤーの組み込み機能とAEMコアコンポーネントを使用して、Adobe Experience Manager Sitesのページに関するデータを収集する方法を説明します。 Experience Platform Launch と Adobe Analytics 拡張は、ルールを作成して Adobe Analytics にページデータを送信するために使用されます。 🔗

作成する内容

ページデータトラッキング

このチュートリアルでは、Adobeクライアントデータレイヤーのイベントに基づいてLaunchルールをトリガーし、ルールを起動するタイミングの条件を追加し、AEMページのPage NameとPage TemplateをAdobe Analyticsに送信します。

目的

データレイヤーに対する変更に基づいて、Launchでイベント駆動型ルールを作成する
Launchのデータ要素へのページデータレイヤープロパティのマッピング
ページデータを収集し、ページビュービーコンと共にAdobe Analyticsに送信

前提条件

以下が必要です。

Experience Platform LaunchProperty
Adobe Analyticstest/devレポートスイートIDとトラッキングサーバー。新しいレポートスイートの作成については、次のドキュメントを参照してください。
Experience Platformデバッガーブラウザー拡張機能。このチュートリアルのスクリーンショットは、Chromeブラウザーからキャプチャしたものです。
（オプション）Adobeクライアントデータレイヤーが有効なAEM Site。このチュートリアルでは、公開サイトhttps://wknd.site/us/en.htmlを使用しますが、独自のサイトを使用しても構いません。

メモ

LaunchとAEMサイトの統合についてこのビデオシリーズを参照してください。

WKNDサイトのLaunch環境の切り替え

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サイト上のAdobeクライアントデータレイヤーの確認

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クライアントデータレイヤーが有効になっていることを確認します。

「Page Loaded」ルールの作成

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拡張機能の追加

次に、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」ルールに条件を追加する

次に、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内に追加すると、ルールを変更する必要が生じる可能性のある追加のユーザーをより明確に把握できます。加えて、データ要素を使用できます！
変更内容を保存します。

Analytics変数とトリガーページビュービーコンの設定

現在、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ルールには、次の設定が必要です。
- 1. イベントをリッスン cmp:show します。
- 2. イベントがページによってトリガーされたことを確認します。
- 3. ページ名およびページテ ンプレ ートのAnalytics 変数の設定
- 4. Analyticsページビュービーコンの送信
すべての変更を保存し、Launchライブラリをビルドして、適切な環境に昇格します。

ページビュービーコンとAnalytics呼び出しの検証

これで、Page LoadedルールがAnalyticsビーコンを送信したので、Experience Platformデバッガーを使用してAnalyticsトラッキング変数を表示できます。

ブラウザーでWKND Siteを開きます。
デバッガーアイコンをクリックして、Experience Platformデバッガーを開きます。
前述のように、デバッガーがLaunchプロパティをお使いの開発環境にマッピングしていることを確認し、コンソールログを確認します。
Analyticsメニューを開き、レポートスイートが**レポートスイートに設定されていることを確認します。ページ名も入力する必要があります。
下にスクロールし、Network Requestsを展開します。 ページテンプレートに設定されたevarを見つけることができます。
ブラウザーに戻り、デベロッパーコンソールを開きます。ページ上部のカルーセルをクリックします。
ブラウザーコンソールで、コンソールステートメントを確認します。

これは、カルーセルがcmp:showイベントをトリガーし、をチェックしたので、コンポーネントのリソースタイプを確認したので、イベントは発生しないためです。

メモ

コンソールログが表示されない場合は、Experience PlatformデバッガーのLaunchでコンソールログがオンになっていることを確認してください。
西オーストラリアのような記事ページに移動します。「ページ名」と「テンプレートタイプ」が変更されるのを確認します。