Show Menu
TOPICS×

Adobe Client Data Layer を使用してコアコンポーネントと Adobe Analytics を統合する

このドキュメントでは、AEM、Adobe Client Data Layer、Adobe Launch および Adobe Analytics に基づいてエンドツーエンドの設定をおこない、以下を追跡する方法について詳しく説明します。
  • ページが読み込まれるときに Adobe Client Data Layer に保存されるページ ID
  • 画像がクリックされたときに Adobe Client Data Layer に保存される画像パス
コアコンポーネントを例として使用していますが、独自のカスタムコンポーネントに使用することもできます。

手順 1 - Adobe Analytics でレポートスイートを作成する

データの集計と分析をおこなうには、まずレポートスイートを作成する必要があります。
  1. https://analytics.adobe.com
    にアクセスします。
  2. Adobe ID を使用してログインします。
  3. Analytics
    アイコンをクリックします。
  4. 管理者/レポートスイート
    ​に移動します。
  5. 新規作成/レポートスイート
    ​をクリックします。
  6. フォームに入力します。
    1. レポートスイート ID
      yourSuiteID
    2. サイトのタイトル
      Your suite description
    3. タイムゾーン
      :必要に応じて
    4. 公開日
      :本日の日付、または適切な日付
    5. 日別予想ページビュー数
      :必要に応じて 0 または 100
  7. レポートスイートの作成
    」をクリックします。
成功すると、次のメッセージが緑色で表示されます。
Report Suite <yourReportSuite> has been successfully created.

手順 2 - レポートスイートを表示する

新しいレポートスイートを使用するには、そのレポートスイートが表示されている必要があります。
  1. https://adminconsole.adobe.com
    にアクセスします。
  2. Adobe ID を使用してログインします。
  3. Adobe Analytics - <yourSite>
    」カードをクリックします。
  4. Adobe Analytics - <yourSite>
    」リンクをクリックします。
  5. 権限
    」タブを選択します。
  6. レポートスイート
    」行の「
    編集
    」ボタンをクリックします。
  7. 手順 1 で作成したレポートスイートの「
    +
    」ボタンをクリックして、「
    含まれる権限項目
    」カテゴリに追加します。
  8. 保存
    」をクリックします。

手順 3 - AEM サイトと Adobe Launch を統合する

データを生成するには、Launch が AEM サイトに統合されている必要があります。

手順 4 - Adobe Launch で Adobe Analytics 拡張機能をインストールおよび設定する

Adobe Analytics 拡張機能を使用すると、Analytics を Launch と統合できます。
  1. Adobe Launch から、 手順 3 で作成し、新しく追加されたプロパティを選択します。
  2. 拡張機能
    」タブに移動し、「
    カタログ
    」を選択します。
  3. Adobe Analytics
    を検索します。
  4. インストール
    」をクリックします。
  5. 拡張機能を設定します。
    1. 適切な環境に対して、
      手順 1
      で作成した Analytics レポートスイート ID を入力します 。
    2. 文字セット
      ​を UTF-8 に設定します。
  6. 「保存」をクリックします。

手順 5 - Adobe Launch でページ ID のデータ要素を作成する

ページ ID を追跡するには、Launch でデータ要素が必要となります。
  1. Adobe Launch から、 手順 3 で作成したプロパティを選択します。
  2. データ要素
    」タブを選択し、「
    データ要素を追加
    」をクリックします。
    1. 名前
      dl-page-id
    2. 拡張機能
      コア
    3. データ要素のタイプ
      カスタムコード
  3. 編集画面を開く
    」をクリックします。
  4. エディターで、次のコードを入力します。
    return adobeDataLayer.getState().page.id;
  5. 保存
    」をクリックします。
  6. 保存
    」をクリックして、データ要素を作成します。

手順 6 - Adobe Launch でルールを作成して Analytics でページ ID を追跡する

ルールを使用すると、Analytics のページ ID などのブラウジング属性を追跡できます。
Adobe Client Data Layer を使用してコアコンポーネントと Adobe Launch を統合する 」ドキュメントのパート 5b の手順を繰り返して、Adobe Launch で次のルールを追加します。
  • 名前
    track-dl-page-id
  • イベント:
    • 拡張機能
      コア
    • イベントタイプ
      ページ下部
  • アクション 1:
    • 拡張機能
      Adobe Analytics
    • アクションタイプ
      変数の設定
    • prop1
      %dl-page-id%
  • アクション 2:
    • 拡張機能
      Adobe Analytics
    • アクションタイプ
      ビーコンを送信
    • s.t(): Send Data to Adobe Analytics and treat it as a page view
      」にチェックマークを付けます

手順 7 - Adobe Launch でルールを作成して画像クリックイベントを登録する

ルールを使用すると、Analytics のクリックイベントなどのブラウジング属性を追跡できます。
Adobe Client Data Layer を使用してコアコンポーネントと Adobe Launch を統合する 」ドキュメントのパート 5b の手順を繰り返して、Adobe Launch で次のルールを追加します。
  • 名前
    register-dl-image-click
  • イベント:
    • 拡張機能
      コア
    • イベントタイプ
      ページ下部
  • アクション 1:
    • 拡張機能
      コア
    • アクションタイプ
      カスタムコード
    • エディター:次のコードを入力します。
      var myListener = function(event) { _satellite.track('dlImageClicked', event.info.path); }; adobeDataLayer.addEventListener('image clicked', myListener());

手順 8 - Adobe Launch でルールを作成して Analytics の画像クリックイベントを追跡する

ルールを使用すると、Analytics のクリックイベントなどのブラウジング属性を追跡できます。
Adobe Client Data Layer を使用してコアコンポーネントと Adobe Launch を統合する 」ドキュメントのパート 5b の手順を繰り返して、Adobe Launch で次のルールを追加します。
  • 名前
    track-dl-image-click
  • イベント:
    • 拡張機能
      コア
    • イベントタイプ
      直接呼び出し
    • 識別子
      dlImageClicked
  • アクション 1:
    • 拡張機能
      Adobe Analytics
    • アクションタイプ
      変数の設定
    • prop2
      %event.detail%
      として設定
  • アクション 2:
    • 拡張機能
      Adobe Analytics
    • アクションタイプ
      ビーコンを送信
    • s.t(): Send Data to Adobe Analytics and treat it as a page view
      」にチェックマークを付けます

手順 9 - Launch コードを Web サイトに公開する

Launch でこれらのルールおよびプロパティのトラッキングを有効にするには、コードを公開する必要があります。
  1. Adobe Launch
    」タブで、「
    公開
    」タブを選択します。
  2. Add New Library
    」をクリックします。
  3. 名前
    」に「
    data-layer-analytics-1
    」と入力します。
  4. 環境
    」として「
    Development (development)
    」を選択します。
  5. Add All Changed Resources
    」をクリックします。
  6. 次の 3 つのルール(
    track-dl-page-id
    register-dl-image-click
    および
    track-dl-image-click
    )のそれぞれに対して:
  7. ルール/ルール/最新
    ​を選択し、「
    Select & Create a New Revision
    」をクリックします。
  8. Save & Build for Development
    」をクリックします。

手順 10 - ページをトリガーして Adobe Analytics に情報を送信する

この手順では、Chrome 拡張機能
Launch and DTM Switch
をインストールします。この拡張機能を使用する場合は、Launch コードを作成して開発環境にデプロイする必要があります。ステージング環境と実稼動環境をデプロイする必要はありません。
  1. Discovery から Chrome 拡張機能
    Launch and DTM Switch
    をインストールします。
  2. Launch スイッチ
    ​アイコンをクリックし、「デバッグ」を「
    オン
    」に設定します。
  3. http://<host>:<port>/content/core-components-examples/library/image.html
    ページをリロードします。
  4. ブラウザーコンソールを開くと、次のように表示されます。
また、Chrome 用
Experience Cloud Debugger
拡張機能をインストールして、ページに関する Adobe Launch および Analytics 固有の情報を表示することもできます。

手順 11 - Adobe Analytics で追跡した情報を表示する

これで、Adobe Analytics でトリガーしたイベントを表示できます。
  1. https://analytics.adobe.com
    にアクセスします。
  2. Adobe ID を使用してログインします。
  3. Analytics
    アイコンをクリックします。
  4. レポート
    」タブを選択します。
  5. 右上のドロップダウンから、 手順 1 で作成したレポートスイートを選択します。
  6. 最初の列で、「
    カスタムトラフィック/カスタムトラフィック 1~10/カスタムインサイト 1
    」を選択し、データレイヤーに保存されている追跡対象のページ ID(パス)を表示します。次のように表示されます。
  7. 追跡した画像パスをデータレイヤーに保存している場合は、
    カスタムインサイト 2
    にアクセスして表示します。次のように表示されます。