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

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

作成する内容

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

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

目的

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

前提条件

以下が必要です。

メモ

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

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

https://wknd. siteは、AEM実装のリファレンスとチュートリアルとして設計されたオープンソ ースプロジ ェクトに基づいて構築された、公開 🔗 サイトです。

AEM環境を設定してWKNDコードベースをインストールする代わりに、Experience Platformデバッガーを使用して、ライブhttps://wknd.site/を​Launchプロパティに​​切り替えることができます。**​もちろん、既にAdobeクライアントデータレイヤーが有効になっている場合は、独自のAEMサイトを使用できます。

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

  2. 最初のLaunch ライブラリが作成され、Launch 環境に昇格されていることを確認します。

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

    Launch埋め込みコードのコピー

  4. ブラウザーで新しいタブを開き、https://wknd.site/に移動します。

  5. Debuggerブラウザー拡張機能をExperience Platformする

    Experience Platformデバッガー

  6. Launch / 設定​に移動し、挿入された埋め込みコード​の下で、既存のLaunch埋め込みコードを、手順3でコピーした​**​埋め込みコードに置き換えます。

    埋め込みコードの置換

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

    コンソールログ

WKNDサイト上のAdobeクライアントデータレイヤーの確認

WKND参照プロジェクトは、AEMコアコンポーネントを使用して構築され、Adobeクライアントデータレイヤーがデフォルトで有効になっています。 次に、Adobeクライアントデータレイヤーが有効になっていることを確認します。

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

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

    adobeDataLayer.getState();
    

    これは、クライアントデータレイヤーのAdobeの現在の状態を返します。

    Adobeデータレイヤーの状態

  3. 応答を展開し、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:titlexdm:languageおよびxdm:templateから派生した標準プロパティを使用して、Adobe Analyticsにページデータを送信します。

    メモ

    adobeDataLayer JavaScriptオブジェクトが表示されない場合 サイトでAdobeクライアントデータレイヤーが有効になっていることを確認します。

「Page Loaded」ルールの作成

Adobeクライアントデータレイヤーは、イベント​駆動型データレイヤーです。 AEM Page​データレイヤーが読み込まれると、イベントcmp:showがトリガーされます。 cmp:showイベントに基づいてトリガーされるルールを作成します。

  1. Experience Platform Launchに移動し、AEM Siteと統合されたWebプロパティに移動します。

  2. Launch UIの「ルール」セクションに移動し、「新しいルールを作成」をクリックします。

    ルールを作成

  3. ルールに「Page Loaded」と名前を付けます。

  4. イベント 追加​をクリックして、イベント設定​ウィザードを開きます。

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

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

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

    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'].

  7. 変更内容を保存します。

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

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

    「Custom Code」アクションタイプ

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

    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 した現在のページです。以前のページスキーマをデータレイヤーで公開して、すぐに使用できる様々なキーを確認できるようにしたことを思い出してください。

  11. 変更を保存し、Launchでビルドを実行して、AEMサイトで使用する環境にコードを昇格させます。

    メモ

    Adobe Experience Platform Debuggerを使用して、埋め込みコードを​開発​環境に切り替えると非常に役立ちます。

  12. AEMサイトに移動し、開発者ツールを開いてコンソールを表示します。 ページを更新すると、コンソールメッセージがログに記録されていることが確認できます。

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

データ要素の作成

次に、複数のデータ要素を作成し、Adobeクライアントデータレイヤーから異なる値を取り込みます。 前の演習で見たように、カスタムコードを使用してデータレイヤーのプロパティに直接アクセスできます。 データ要素を使用する利点は、Launchルール全体で再利用できる点です。

以前のページスキーマをデータレイヤーで公開した後に呼び出します。

データ要素は、@typedc:titleおよびxdm:templateプロパティにマッピングされます。

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

  1. Experience Platform Launchに移動し、AEM Siteと統合されたWebプロパティに移動します。

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

  3. 名前​には、コンポーネントリソースタイプ​と入力します。

  4. データ要素のタイプ​に対して、カスタムコード​を選択します。

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

  5. エディターを開く」をクリックし、カスタムコードエディターで次のように入力します。

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

    変更内容を保存します。

    メモ

    eventオブジェクトは、Launchで​ルール​をトリガーしたイベントに基づいて使用可能になり、範囲が指定されます。 データ要素の値は、ルール内でデータ要素が​参照​されるまで設定されません。 したがって、このデータ要素は、前の手順​で作成した「Page Loaded」ルールなどのルール内で安全に使用できますが、他のコンテキストでは安全に使用できません。

ページ名

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

  2. 名前​には、ページ名​と入力します。

  3. データ要素のタイプ​に対して、カスタムコード​を選択します。

  4. エディターを開く」をクリックし、カスタムコードエディターで次のように入力します。

    if(event && event.component && event.component.hasOwnProperty('dc:title')) {
        return event.component['dc:title'];
    }
    

    変更内容を保存します。

ページテンプレート

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

  2. 名前​には、ページテンプレート​と入力します。

  3. データ要素のタイプ​に対して、カスタムコード​を選択します。

  4. エディターを開く」をクリックし、カスタムコードエディターで次のように入力します。

    if(event && event.component && event.component.hasOwnProperty('xdm:template')) {
        return event.component['xdm:template'];
    }
    

    変更内容を保存します。

  5. これで、ルールの一部として3つのデータ要素が必要になりました。

    ルール内のデータ要素

Analytics拡張機能の追加

次に、Analytics拡張機能をLaunchプロパティに追加します。 このデータはどこかで送る必要がある!

  1. Experience Platform Launchに移動し、AEM Siteと統合されたWebプロパティに移動します。

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

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

    Adobe Analytics Extension

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

    レポートスイートIDの入力

    メモ

    このチュートリアルでは、すべての環境に対して1つのレポートスイートを使用しても構いませんが、実際の環境では、次の画像に示すように、個別のレポートスイートを使用する必要があります

    ヒント

    ライブラリを最新の状態に保ちやすいので、「自分のライブラリを管理」オプションAppMeasurement.jsをライブラリ管理設定として使用することをお勧めします。

  5. Activity Map​を使用」チェックボックスをオンにします。

    「Enable Use」Activity Map

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

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

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

「Page Loaded」ルールに条件を追加する

次に、Page Loaded​ルールを更新して、Component Resource Type​データ要素を使用し、cmp:showイベントが​Page​に対してのみ実行されるようにします。 cmp:showイベントを発生させる他のコンポーネント。例えば、カルーセルコンポーネントは、スライドが変更されると実行します。 したがって、このルールに条件を追加することが重要です。

  1. Launch UIで、前に作成した「Page Loaded」ルールに移動します。

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

  3. 条件の種類」で「値の比較」を選択します。

  4. フォームフィールドの最初の値を%Component Resource Type%に設定します。 データ要素アイコンデータ要素アイコンを使用して、コンポーネントリソースタイプ​データ要素を選択できます。 比較器をEqualsのままにします。

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

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

    メモ

    この条件は、このチュートリアルで前に作成したcmp:showイベントをリッスンするカスタムコード関数内に追加できます。 ただし、UI内に追加すると、ルールを変更する必要が生じる可能性のある追加のユーザーをより明確に把握できます。 加えて、データ要素を使用できます!

  6. 変更内容を保存します。

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

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

  1. Page Loaded​ルール​remove the Core - Custom Code​アクション(コンソールステートメント):

    「Remove custom code」アクション

  2. 「アクション」の下の「追加」をクリックして、新しいアクションを追加します。

  3. Extension​タイプを​Adobe Analytics​に設定し、アクションタイプ​を​変数を設定​に設定します。

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

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

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

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

    ページ名環境変数セット

    変更内容を保存します。

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

    Launchアクションの追加

  7. Extension​タイプを​Adobe Analytics​に設定し、アクションタイプ​を​Send Beacon​に設定します。 これはページビューと見なされるので、デフォルトのトラッキング設定は​s.t()​のままにします。

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

  8. 変更内容を保存します。Page Loaded​ルールには、次の設定が必要です。

    最終起動設定

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

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

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

  1. ブラウザーでWKND Siteを開きます。

  2. デバッガーアイコンExperience platform Debuggerアイコンをクリックして、Experience Platformデバッガーを開きます。

  3. 前述のように、デバッガーがLaunchプロパティを​お使いの​開発環境にマッピングしていることを確認し、コンソールログ​を確認します。

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

    Analyticsタブデバッガー

  5. 下にスクロールし、Network Requests​を展開します。 ページテンプレート​に設定された​evar​を見つけることができます。

    Evarおよびページ名の設定

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

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

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

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

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

    メモ

    コンソールログが表示されない場合は、Experience Platformデバッガーの​Launch​で​コンソールログ​がオンになっていることを確認してください。

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

おめでとうございます。

イベントドリブン型のAdobeクライアントデータレイヤーとExperience Platform Launchを使用して、AEM Siteからデータページデータを収集し、Adobe Analyticsに送信しただけです。

次の手順

次のチュートリアルを参照して、イベントドリブン型Adobeクライアントデータレイヤーを使用して、Adobe Experience Managerサイト上の特定のコンポーネントのクリックを追跡する方法を学びます

このページ