[統合]{class="badge positive"}

AEM Sites と Adobe Analytics の統合

Adobe Analytics タグ拡張機能を使用して AEM Sites と Adobe Analytics を統合し、AEM コアコンポーネントと共に Adobe Client Data Layer の組み込み機能を使用して、Adobe Experience Manager Sites 内のページに関するデータを収集する方法を説明します。Experience Platform のタグAdobe Analytics 拡張機能を使用して、ページデータを Adobe Analytics に送信するためのルールを作成します。

作成するもの what-build

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

このチュートリアルでは、Adobe Client Data Layer からのイベントに基づいてタグルールをトリガーします。また、ルールを起動するタイミングの条件を追加したあと、AEM ページの​ ページ名 ​と​ ページテンプレート ​の値を Adobe Analytics に送信します。

目的 objective

  1. 変更内容をデータレイヤーからキャプチャするイベント駆動型ルールをタグプロパティに作成します
  2. ページデータレイヤーのプロパティをタグプロパティのデータ要素にマッピングします
  3. ページデータを収集し、ページビュービーコンを使用して Adobe Analytics に送信します

前提条件

必要なものは以下のとおりです。

  • Experience Platform の​ タグプロパティ
  • Adobe Analytics テスト/開発レポートスイート ID とトラッキングサーバー。レポートスイートの作成については、次のドキュメントを参照してください。
  • Experience Platform デバッガーブラウザー拡張機能。 このチュートリアルのスクリーンショットは、Chrome ブラウザーからキャプチャしたものです。
  • (オプション)Adobe Client Data Layer を有効にした AEM Site。このチュートリアルでは、公開されている WKND サイトを使用しますが、独自のサイトを使用してもかまいません。
NOTE
タグプロパティと AEM サイトの統合について不明な点がある場合は、こちらのビデオシリーズをご覧ください。

WKND サイトに向けたタグ環境の切り替え

WKND は、オープンソースプロジェクトに基づいて構築された公開サイトであり、AEM 実装の参考用およびチュートリアルとして設計されています。

AEM 環境をセットアップして WKND コードベースをインストールする代わりに、Experience Platform デバッガーを使用して、ライブの WKND Site を​ お使いの ​タグプロパティに​ 切り替える ​ことができます。ただし、既に Adobe Client Data Layer が有効になっている場合は、独自の AEM サイトを使用できます。

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

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

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

    タグプロパティ埋め込みコードのコピー

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

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

    Experience Platform デバッガー

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

    埋め込みコードの置換

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

    コンソールログ

WKND サイトでの Adobe Client Data Layer の検証

WKND 参照プロジェクトは AEM コアコンポーネントで構築されており、デフォルトで Adobe Client Data Layer が有効になっています。次に、Adobe Client Data Layer が有効になっていることを確認します。

  1. WKND Site に移動します。

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

    code language-js
    adobeDataLayer.getState();
    

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

    Adobe データレイヤーの状態

  3. 応答を展開し、page エントリを調べます。次のようなデータスキーマが表示されます。

    code language-json
    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:titlexdm:languagexdm:template などの標準プロパティを使用します。

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

    note note
    NOTE
    adobeDataLayer JavaScript オブジェクトが表示されない場合は、サイトで Adobe Client Data Layer が有効になっていることを確認してください。

「ページの読み込み」ルールの作成

Adobe Client Data Layer は、イベント駆動型 ​のデータレイヤーです。AEM ページデータレイヤーが読み込まれると、cmp:show イベントがトリガーされます。cmp:show イベントがページデータレイヤーから発生したときにトリガーされるルールを作成します。

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

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

    ルールを作成

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

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

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

    ルールに名前を付けてカスタムコードイベントを追加する

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

    code language-js
    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'] などのコードスニペットを使用して様々なプロパティを参照できるようになりました。

  7. 変更を保存します。

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

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

    カスタムコードアクションタイプ

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

    code language-js
    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 から得られる現在のページです。

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

    note note
    NOTE
    Adobe Experience Platform Debugger を使用して埋め込みコードを​ 開発 ​環境に切り替えると、便利なことがあります。
  12. AEM サイトに移動し、デベロッパーツールを開いてコンソールを表示します。ページを更新すると、コンソールメッセージがログに記録されていることがわかります。

「ページの読み込み」コンソールメッセージ

データ要素の作成

次に、複数のデータ要素を作成し、Adobe Client Data Layer から様々な値をキャプチャします。前の演習で見たように、カスタムコードを使用してデータレイヤーのプロパティに直接アクセスすることができます。データ要素を使用する利点は、タグルール全体で再利用できることです。

データ要素は、@typedc:titlexdm:templateの各プロパティにマッピングされています。

コンポーネントのリソースタイプ

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

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

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

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

    コンポーネントのリソースタイプ

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

    code language-js
    if(event && event.component && event.component.hasOwnProperty('@type')) {
        return event.component['@type'];
    }
    
  6. 変更を保存します。

    note note
    NOTE
    event オブジェクトは、タグプロパティの​ ルール ​をトリガーしたイベントに基づいて利用可能になり、スコープが設定されることを思い出してください。データ要素の値は、データ要素がルール内で​ 参照 ​されるまで設定されません。したがって、このデータ要素は、前のステップで作成された「ページの読み込み」ルールなどのルール内で安全に使用できます​ 、他のコンテキストでは安全に使用できません。

ページ名

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

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

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

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

    code language-js
    if(event && event.component && event.component.hasOwnProperty('dc:title')) {
        return event.component['dc:title'];
    }
    
  5. 変更を保存します。

ページテンプレート

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

  2. 名前」フィールドに「ページテンプレート」と入力します。

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

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

    code language-js
    if(event && event.component && event.component.hasOwnProperty('xdm:template')) {
        return event.component['xdm:template'];
    }
    
  5. 変更を保存します。

  6. これで、ルールの一部として 3 つのデータ要素が揃ったはずです。

    ルール内のデータ要素

Analytics 拡張機能の追加

次に、データをレポートスイートに送信する Analytics 拡張機能をタグプロパティに追加します。

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

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

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

    Adobe Analytics 拡張機能

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

    レポートスイート ID を入力します

    note note
    NOTE
    このチュートリアルでは、すべての環境で 1 つのレポートスイートを使用しても問題ありませんが、実際の使用では、以下の画像のように別々のレポートスイートを使用することになります
    note tip
    TIP
    ライブラリ管理設定として「ライブラリをシスで管理」オプションを使用すると、AppMeasurement.js ライブラリを最新の状態に保つことがはるかに容易になるので、このオプションの使用をお勧めします。
  5. チェックボックスをオンにして「Activity Map を使用」を有効にします。

    「Activity Map を使用」を有効にする

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

    トラッキングサーバーを入力

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

ページロードルールに条件を追加する

次に、ページロード ルールを更新し、コンポーネントリソース タイプ データ要素を使用して、cmp:show イベントが ページ のときだけルールが発生するようにします。他のコンポーネントで cmp:show イベントを発生させることができます。例えば、カルーセルコンポーネントでスライドの変更時に発生します。したがって、このルールの条件を追加することが重要です。

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

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

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

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

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

    「ページの読み込み」ルールの条件設定

    note note
    NOTE
    この条件は、チュートリアルの前半で作成した cmp:show イベントを監視するカスタムコード関数内に追加することが可能です。しかし、UI 内に追加することで、ルールの変更を必要とする可能性のある追加ユーザーに対して、可視性を高めることができます。さらに、データ要素を使用できます。
  6. 変更を保存します。

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

現在、ページの読み込み ​ルールは、単にコンソールステートメントを出力します。次に、データ要素と Analytics 拡張機能を使用して、ページの読み込み ​ルールの​ アクション ​として Analytics 変数を設定します。また、ページビュービーコン ​をトリガーし、収集したデータを Adobe Analytics に送信するアクションを追加で設定します。

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

    カスタムコードアクションの削除

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

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

    アクション拡張機能を Analytics 設定変数に設定

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

    eVar ページテンプレートとして設定

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

    ページ名環境変数セット

  6. 変更を保存します。

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

    タグルールアクションの追加

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

    ビーコンの送信 Adobe Analytics アクション

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

    最終的なタグルール設定

    • 1.cmp:show イベントをリッスンします。
    • 2. イベントがページによってトリガーされたことを確認します。
    • **3.**ページ名 ​と​ ページテンプレート ​に Analytics の変数を設定する
    • 4. Analytics ページビュービーコンの送信
  10. すべての変更を保存し、タグライブラリを構築して、適切な環境に昇格します。

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

ページの読み込み ​ルールが Analytics ビーコンを送信するようになったので、Experience Platform Debugger を使用して Analytics トラッキング変数を確認できます。

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

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

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

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

    「Analytics」タブのデバッガー

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

    eVar とページ名を設定

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

    カルーセルページをクリックスルー

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

    条件が満たされていません

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

    note note
    NOTE
    コンソールログが表示されない場合は、Experience Platform Debugger の Experience Platform タグ ​で「コンソールログ」がオンになっていることを確認します。
  8. 西オーストラリア」などの記事ページに移動します。「ページ名」と「テンプレートタイプ」が変更されるのを確認します。

おめでとうございます。

イベント駆動型の Adobe Client Data Layer と Experience Platform のタグを使用して、AEM Sites からデータページデータを収集し、Adobe Analytics に送信しました。

次の手順

イベント駆動型の Adobe Client Data Layer を使用して、Adobe Experience Manager サイト上の特定のコンポーネントのクリックを追跡する方法については、次のチュートリアルを参照してください。

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