AEM Sites と Adobe Analytics の統合

Experience Platform にログインし、タグプロパティを作成します（まだの場合）。

初期のタグ JavaScript ライブラリが作成され、タグ環境に昇格されたことを確認します。

ライブラリの公開先のタグ環境から JavaScript 埋め込みコードをコピーします。

ブラウザーで新しいタブを開き、WKND Site に移動します。

Experience Platform デバッガーブラウザー拡張機能を開きます

Experience Platform タグ／設定 ​に移動し、「挿入された埋め込みコード」に示されている既存の埋め込みコードを、手順 3 からコピーした​ お使いの ​埋め込みコードに置き換えます。

コンソールログ ​を有効にし、WKND タブでデバッガーを​ ロック ​します。

WKND Site に移動します。

ブラウザーのデベロッパーツールを開き、コンソール ​に移動します。次のコマンドを実行します。

adobeDataLayer.getState();

上記のコードは、Adobe Client Data Layer の現在の状態を返します。

応答を展開し、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"

ページデータを Adobe Analytics に送信するには、データレイヤーの dc:title、xdm:language、xdm:template などの標準プロパティを使用します。

詳しくは、コアコンポーネントデータスキーマのページスキーマを参照してください。

Experience Platform に移動し、AEM サイトと統合されているタグプロパティに移動します。

タグプロパティ UI の「ルール」セクションに移動し、「新しいルールを作成」をクリックします。

ルールに「ページの読み込み」という名前を付けます。

「イベント」サブセクションで「追加」をクリックして、イベント設定 ​ウィザードを開きます。

「イベントタイプ」フィールドで、「カスタムコード」を選択します。

メインパネルで「エディターを開く」をクリックして、次のコードスニペットを入力します。

var pageShownEventHandler = function(evt) {
   // defensive coding to avoid a null pointer exception
   if(evt.hasOwnProperty("eventInfo") && evt.eventInfo.hasOwnProperty("path")) {
      //trigger the Tag Rule and pass event
      console.log("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 Tag Rule, passing in the new `event` object
      // the `event` obj can now be referenced by the reserved name `event` by other Tag 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() 関数は、タグプロパティ内の予約名で、ルールを​ トリガー ​します。event オブジェクトはパラメーターとして渡され、タグプロパティ内の別の予約名で公開されます。タグプロパティ内のデータ要素は、event.component['someKey'] などのコードスニペットを使用して様々なプロパティを参照できるようになりました。

変更を保存します。

次に、アクション ​で「追加」をクリックして、アクションの設定 ​ウィザードを開きます。

「アクションタイプ」フィールドで、「カスタムコード」を選択します。

メインパネルで「エディターを開く」をクリックし、次のコードスニペットを入力します。

console.log("Page Loaded ");
console.log("Page name: " + event.component['dc:title']);
console.log("Page type: " + event.component['@type']);
console.log("Page template: " + event.component['xdm:template']);

event オブジェクトは、カスタムイベントで呼び出された trigger() メソッドから渡されます。ここで、component はカスタムイベントでデータレイヤーに対する getState から得られる現在のページです。

変更を保存し、タグプロパティでビルドを実行して、AEM サイトで使用する環境にコードを昇格します。

AEM サイトに移動し、デベロッパーツールを開いてコンソールを表示します。ページを更新すると、コンソールメッセージがログに記録されていることがわかります。

Experience Platform に移動し、AEM サイトと統合されているタグプロパティに移動します。

「データ要素」セクションに移動し、「新しいデータ要素を作成」をクリックします。

「名前」フィールドに「コンポーネントのリソースタイプ」と入力します。

「データ要素タイプ」フィールドで「カスタムコード」を選択します。

「エディターを開く」ボタンをクリックし、カスタムコードエディターで以下を入力します。

if(event && event.component && event.component.hasOwnProperty('@type')) {
    return event.component['@type'];
}

変更を保存します。

「データ要素を追加」ボタンをクリックします。

「名前」フィールドに「ページ名」と入力します。

「データ要素タイプ」フィールドで「カスタムコード」を選択します。

「エディターを開く」ボタンをクリックし、カスタムコードエディターで以下を入力します。

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 つのデータ要素が揃ったはずです。

Experience Platform に移動し、AEM サイトと統合されているタグプロパティに移動します。

拡張機能／カタログ ​に移動します。

Adobe Analytics 拡張機能を探し、「インストール」をクリックします。

ライブラリ管理／レポートスイート ​で、各タグ環境で使用するレポートスイート ID を入力します。

。

チェックボックスをオンにして「Activity Map を使用」を有効にします。

一般／トラッキングサーバー ​に、お使いのトラッキングサーバー（例：tmd.sc.omtrdc.net）を入力します。自社のサイトが https:// をサポートしている場合は、SSLトラッキングサーバーを入力します

「保存」をクリックして、変更を保存します。

タグプロパティ UIで、先ほど作成した​ ページの読み込み ​ルールに移動します。

「条件」で「追加」をクリックすると、条件設定 ​ウィザードが開きます。

「条件タイプ」フィールドで「値比較」オプションを選択します。

フォームフィールドの最初の値を %Component Resource Type% に設定します。データ要素アイコン で、コンポーネント リソースタイプ ​データ要素を選択することができます。コンパレーターは Equals のままにしてください。

2 番目の値を wknd/components/page に設定します。

変更を保存します。

「ページの読み込み」ルールで、コア - カスタムコード ​アクション（コンソールステートメント）を​ 削除 ​します。

「アクション」サブセクションで、「追加」をクリックして新しいアクションを追加します。

拡張機能 ​の種類を Adobe Analytics、アクションタイプ ​を「変数の設定」に設定します。

メインパネルで、使用可能な eVar を選択し、データ要素​ ページテンプレート ​の値として設定します。「データ要素」アイコン で、ページテンプレート ​要素を選択します。

下にスクロールして、追加設定 ​で、ページ名 ​をデータ要素​ ページ名 ​に設定します。

変更を保存します。

次に、プラス ​アイコンをタップして、Adobe Analytics - 変数を設定 ​の右側にさらにアクションを追加します。

「拡張機能」タイプを「Adobe Analytics」に設定し、「アクションタイプ」を「ビーコンの送信」に設定します。このアクションはページビューと見なされるので、「トラッキング」の設定はデフォルトの s.t() のままにしておきます。

変更を保存します。ページの読み込み ​ルールは、次のような構成になります。

• 1.cmp:show イベントをリッスンします。
• 2. イベントがページによってトリガーされたことを確認します。
• **3.**ページ名 ​と​ ページテンプレート ​に Analytics の変数を設定する
• 4. Analytics ページビュービーコンの送信

すべての変更を保存し、タグライブラリを構築して、適切な環境に昇格します。

ブラウザーで WKND サイトを開きます。

の「デバッガー」アイコンをクリックして Experience Platform Debugger を起動します。

前述のように、Debugger がタグプロパティを​ ご自身の ​開発環境にマッピングし、コンソールログ ​がオンになることを確認します。

Analytics メニューを開き、レポートスイートが​ 自身の ​レポートスイートに設定されていることを確認します。「ページ名」も入力する必要があります。

下にスクロールして、ネットワークリクエスト ​を展開します。ページテンプレート ​に設定されている​ eVar ​を確認できます。

ブラウザーに戻り、デベロッパーコンソールを開きます。ページ上部で​ カルーセル ​をクリックスルーします。

ブラウザーコンソールで、コンソールステートメントを確認します。

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

「西オーストラリア」などの記事ページに移動します。「ページ名」と「テンプレートタイプ」が変更されるのを確認します。