Adobe Analytics の追加

最終更新日： 2025年5月5日
  • トピック：

作成対象：

  • 初心者
  • 中級
  • 開発者

このレッスンでは、Adobe Analytics 拡張機能を実装し、Adobe Analytics にデータを送信するルールを作成します。

Adobe Analytics は、顧客像を把握し、顧客インテリジェンスを活用してビジネスを導く力をユーザーに提供する、業界最先端のソリューションです。

メモ
Adobe Experience Platform Launch は、データ収集テクノロジーのスイートとして Adobe Experience Platform に統合されています。 このコンテンツを使用する際に注意する必要があるインターフェイスで、いくつかの用語がロールアウトされました。
  • Platform launch（クライアントサイド）が tags になりました
  • Platform launchサーバーサイドが event forwarding になりました
  • Edgeの設定が datastreams になりました

学習内容

このレッスンを最後まで学習すると、以下の内容を習得できます。

  1. Adobe Analytics 拡張機能の追加
  2. 拡張機能を使用したグローバル変数の設定
  3. ページビュービーコンの追加
  4. ルールを使用した変数の追加
  5. クリック追跡およびその他のイベントベースのビーコンの追加
  6. Analytics プラグインの追加

タグの Analytics に実装できる項目は多数あります。 このレッスンは完全なものではありませんが、お客様独自のサイトで実装するために必要となる、主な技術の概要について明確に説明します。

前提条件

タグの設定および ID サービスの追加のレッスンを既に完了しているはずです。

さらに、1 つ以上のレポートスイート ID とトラッキングサーバーが必要です。このチュートリアルで使用できるテスト／開発用レポートトスイートがない場合は、作成してください。方法が分からない場合は、ドキュメントを参照してください。トラッキングサーバーは、現在の実装、アドビコンサルタントまたはカスタマーケア担当者から取得できます。

Analytics 拡張機能の追加

Analytics 拡張機能は、次の 2 つの主要部分で構成されます。

  1. 拡張機能設定。コア AppMeasurement.js library 設定を管理し、グローバル変数を設定できます。

  2. 次の操作を実行するルールアクション：

    1. Set Variables
    2. Clear Variables
    3. Analytics ビーコンの送信

Analytics 拡張機能を追加するには、以下を実行します。

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

  2. Adobe Analytics 拡張機能を検索します。

  3. 「インストール」をクリックします。

    Analytics 拡張機能のインストール

  4. ​ ライブラリ管理/レポートスイート ​ で、各タグ環境で使用するレポートスイート ID を入力します。 ユーザーがAdobe Analyticsにアクセスできる場合、ボックスに入力を開始すると、すべてのレポートスイートの事前入力リストが表示されます。 （このチュートリアルでは、すべての環境に対して 1 つのレポートスイートを使用しても構いませんが、実際の環境では、次の画像のように別々のレポートスイートを使用する必要があります）。

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

    ヒント
    ​ ライブラリ管理 ​ 設定として「​ ライブラリをシス AppMeasurement.js ムで管理」オプションを使用すると、ライブラリを最新の状態に保つことが非常に容易になるため ​ 推奨しています。

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

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

  6. ​ グローバル変数 ​ セクションの ​ 追加設定 ​ で、Page Name データ要素を使用して ​ ページ名 ​ 変数を設定します。 データ要素アイコン をクリックしてモーダルを開き、ページの Page Name データ要素を選択します。

  7. 「ライブラリに保存」をクリックします

    ページ名変数の設定と保存

メモ
グローバル変数は、拡張機能の設定またはルールアクションで設定できます。 拡張機能の設定で変数を設定する場合、データレイヤーはタグ埋め込みコードの 前 に定義する必要があります。

ページビュービーコンの送信

次に、Analytics ビーコンを起動するルールを作成します。このルールは、拡張機能設定で設定されたページ名変数を送信します。

このチュートリアルの データ要素、ルール、ライブラリの追加レッスンでは、「すべてのページ – ライブラリの読み込み」ルールを作成済みです。このルールは、タグライブラリの読み込み時にすべてのページでトリガーされます。 このルールを Analytics にも使用できます ただし この設定では、Analytics ビーコンで使用されるすべてのデータレイヤー属性を、タグ埋め込みコードの前に定義する必要があります。 データ収集をより柔軟に実行できるようにするには、「DOM Ready」でトリガーして Analytics ビーコンを起動する、新しい「all pages」ルールを作成します。

ページビュービーコンを送信するには、以下を実行します。

  1. 左側のナビゲーションの [ルール] セクションに移動し、[ルールの追加] をクリックします

    ルールの追加

  2. ルール名を設定します。All Pages - DOM Ready

  3. イベント /追加 をクリックして、Event Configuration 画面を開きます

    ルールに名前を付けてイベントを追加する

  4. イベントタイプ/DOM Ready を選択します（ルールの順序は「50」です）。

  5. 「変更を保持」をクリックします
    イベントの設定

  6. 「アクション」の下の プラスアイコン をクリックして、新しいアクションを追加します。

    「+」アイコンをクリックし、新しいアクションを追加する

  7. 拡張機能/Adobe Analytics を選択します。

  8. アクションタイプ/ビーコンを送信 を選択します。

  9. トラッキングは s.t() に設定したままにします。クリックイベントルールで s.tl() を呼び出す場合は、「ビーコンを送信」アクションでおこなうことも使用できます。

  10. 「変更を保持」ボタンをクリックします

    「+」アイコンをクリックし、新しいアクションを追加する

  11. 「ライブラリおよびビルドに保存」をクリックします

    「ライブラリに保存してビルド」をクリックする

ページビュービーコンの検証

ビーコンを送信するためのルールを作成したら、Experience Cloud デバッガーでそのリクエストを表示できるようになります。

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

  2. Experience Cloud Debuggerを開く デバッガーアイコンをクリックして、Adobe Experience Cloud デバッガーを開きます

  3. 前のレッスンの説明に従って、Debugger がタグプロパティを 自分の 開発環境にマッピングしていることを確認します。

    デバッガーに表示されるタグ開発環境

  4. クリックして「Analytics」タブを開きます。

  5. レポートスイート名を展開して、それに対するすべての要求を表示します。

  6. そのページ名変数と値で要求が実行されたことを確認します。

    ページヒットの検証

メモ
ページ名が表示されない場合は、このページの手順に戻り、見落としがないことを確認します。

ルールによる変数の追加

Analytics 拡張機能を設定する際、拡張機能設定に pageName 変数を入力しました。タグ埋め込みコードが読み込まれる前にページ上で値が使用可能であれば、eVar や prop などの他のグローバル変数を設定するのに適した場所です。

変数やイベントを設定する場所は、Set Variables アクションを使用するルール内でより柔軟に指定できます。ルールを使用すると、異なる条件下で異なる Analytics 変数やイベントを設定できます。例えば、prodView は製品詳細ページでのみ、purchase イベントは注文確認ページでのみ設定できます。ここでは、ルールを使用して変数を設定する方法について説明します。

使用例

製品の詳細ページ（PDP）は、小売サイトでのデータ収集に重要なポイントです。通常は、Analytics に対し、製品の表示が発生し、どの製品が閲覧されたかを登録します。これは、顧客に人気のある製品を把握するのに役立ちます。メディアサイトでは、記事またはビデオページで、このセクションで説明する手法と似たトラッキングテクニックを使用できます。製品の詳細ページを読み込む際、その値を「ページタイプ」eVar に入力し、イベントと製品 ID を設定することができます。これにより、以下の内容を分析で確認できるようになります。

  1. 製品の詳細ページは何回読み込まれたか。
  2. どの製品が何回表示されたか。
  3. その他の要因（キャンペーン、検索など）が、ユーザーが読み込む PDP にどの程度影響しているか。

ページタイプのデータ要素の作成

まずどのページが製品の詳細ページであるかを特定する必要があります。これには、データ要素を使用します。

ページタイプのデータ要素を作成するには、以下を実行します。

  1. 左側のナビゲーションで データ要素 をクリックします

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

    新しいデータ要素の追加

  3. データ要素に「Page Type」と名前を付けます。

  4. データ要素タイプ/JavaScript変数 を選択します。

  5. digitalData.page.category.type を JavaScript変数名として使用

  6. 「テキストをクリーン」および「小文字を強制」オプションをオンにします

  7. 「ライブラリに保存」をクリックします

    ページタイプ用の新しいデータ要素の追加

製品 ID のデータ要素の作成

次に、現在の製品詳細ページの製品 ID をデータ要素と共に収集します。

製品 ID のデータ要素を作成するには、以下を実行します。

  1. 左側のナビゲーションで データ要素 をクリックします

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

    新しいデータ要素の追加

  3. データ要素に「Product Id」と名前を付けます。

  4. データ要素タイプ/JavaScript変数 を選択します。

  5. digitalData.product.0.productInfo.sku を JavaScript変数名として使用

  6. 「テキストをクリーン」および「小文字を強制」オプションをオンにします

  7. 「ライブラリに保存」をクリックします

    ページタイプ用の新しいデータ要素の追加

Adobe Analytics 製品文字列拡張機能の追加

Adobe Analytics の実装に詳しい方は、products 変数について既に詳しいと思われます。製品変数には特定の構文があり、コンテキストに応じて使用方法は若干異なります。タグで製品変数の母集団を簡単にするために、タグ拡張機能のマーケットプレイスには、既に 3 つの拡張機能が作成されています。 この節では、製品の詳細ページで使用できるよう、アドビコンサルティングによって作成された拡張機能を追加します。

Adobe Analytics Product Stringextension を追加するには、以下を実行します。

  1. 拡張機能／カタログページに移動します。

  2. Adobe Consulting サービスによって Adobe Analytics Product String 拡張機能を検索し、「インストール」をクリックします。
    アドビコンサルティングによる Adobe Analytics 製品文字列拡張機能の追加

  3. しばらく時間をかけ、手順を読んでください。

  4. 「ライブラリに保存」をクリックします

    拡張機能をライブラリに保存してビルドする

製品の詳細ページ用のルールの作成

次に、新しいデータ要素と拡張機能を使用して、製品の詳細ページルールを作成します。この機能の場合は、「DOM Ready」によってトリガーされる別のページ読み込みルールを作成します。ただし、製品の詳細ページでのみ実行するよう条件を使用しビーコンを送信するルールより​ 前に ​実行されるように順序を設定します。

製品詳細ページのルールを作成するには、以下を実行します。

  1. 左側のナビゲーションの [ルール] セクションに移動し、[ルールの追加] をクリックします

    ルールの追加

  2. ルール名を設定します。Product Details - DOM Ready - 40

  3. イベント /追加 をクリックして、Event Configuration 画面を開きます

    ルールに名前を付けてイベントを追加する

  4. イベントタイプ/DOM Ready を選択します。

  5. 「順序」を 40 に設定して、Analytics / ビーコンの送信アクションを含むルールを 前 実行するようにします

  6. 「変更を保持」をクリックします
    イベントの設定

  7. 条件 で プラスアイコンをクリック して Condition Configuration 画面を開きます
    「+」アイコンをクリックし、新しい条件を追加する

    1. 条件タイプ/値の比較 を選択します。

    2. データ要素ピッカーを使用して、最初のフィールドで「Page Type」を選択します。

    3. 比較演算子ドロップダウンから「次を含む」を選択します

    4. 次のフィールドで、product-page を入力します（PDPのデータレイヤーから取り出したページタイプ値の一意の部分）。

    5. 「変更を保持」をクリックします

      条件の定義

  8. 「アクション」の下の プラスアイコン をクリックして、新しいアクションを追加します。

    「+」アイコンをクリックし、新しいアクションを追加する

  9. 拡張機能/Adobe Analytics製品文字列 を選択します。

  10. アクションタイプ/s.products を設定 を選択します。

  11. 「Analytics E コマースイベント」セクションで、「prodView」を選択します。

  12. 商品データのデータレイヤー変数 セクションで、データ要素ピッカーを使用して Product Id データ要素を選択します

  13. 「変更を保持」をクリックします

    Adobe Analytics 製品文字列拡張機能を使用した製品文字列変数の追加

  14. 「アクション」の下の プラスアイコン をクリックして、新しいアクションを追加します。

    製品文字列への別のアクションの追加

  15. 拡張機能/Adobe Analytics を選択します。

  16. アクションタイプ/変数を設定 を選択します。

  17. eVar1 /名前を付けて設定を選択しproduct detail page と入力します

  18. オプションの値は空白のままにして、event1 を設定します

  19. 「イベント」の下の「さらに追加」ボタンをクリックします

  20. prodView イベントを設定します（オプションの値は空白のままにします）

  21. 「変更を保持」をクリックします

    PDP ルールでの Analytics 変数の設定

  22. 「ライブラリおよびビルドに保存」をクリックします

    ルールの保存

製品の詳細ページデータの検証

ビーコンの送信前に変数を設定するルールを作成しました。これで、Experience Cloud デバッガーでヒット内のデータを表示できるようになります。

製品詳細ページデータを検証するには、以下を実行します。

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

  2. 製品の詳細ページに移動します。

  3. Experience Cloud Debuggerを開く デバッガーアイコンをクリックして、Adobe Experience Cloud デバッガーを開きます

  4. 「Analytics」タブをクリックします。

  5. レポートスイートを展開します。

  6. 製品詳細変数がデバッガーに表示されています。eVar1 は「製品詳細ページ」に設定されており、Events 変数は「event1」および「prodView」に設定されています。製品変数は表示している製品の製品 ID とともに設定されています。ページ名は引き続き Analytics 拡張機能によって設定されています。

    ページヒットの検証

トラックリンクビーコンの送信

ページが読み込まれると、通常、s.t() 関数によってトリガーされたページ読み込みビーコンが実行されます。これにより、pageName 変数に表示されるページの page view 指標が自動的に増分されます。

しかし、実行するアクションがページビューよりも小さい、またはページビューとは異なるという理由で、サイトのページビュー数を増加させたくない場合があります。この場合は、s.tl() 関数（一般的にトラックリンクリクエストと呼ばれます）を使用します。トラックリンクリクエストと呼ばれていますが、必ずしもリンクのクリックでトリガーする訳ではありません。タグのルールビルダーで使用できる 任意の イベント（独自のカスタムJavaScriptを含む）によってトリガーされます。

このチュートリアルでは、最も優れた JavaScript イベントの 1 つである s.tl() イベントを使用して Enters Viewport の呼び出しをトリガーします。

ユースケース

このユースケースでは、ユーザーが Luma ホームページで十分にスクロールされて、ページの おすすめ製品 セクションが表示されているかどうかを確認します。 ユーザーがそのセクションを閲覧できるかどうかに関して、社内で不和があるため、Analytics を使用して真実を判断する必要があります。

タグでのルールの作成

  1. 左側のナビゲーションの「ルール」セクションに移動し、「ルールを追加」をクリックします
    ルールの追加

  2. ルール名を設定します。Homepage - Featured Products enters Viewport

  3. イベント /追加 をクリックして、Event Configuration 画面を開きます

    おすすめ製品の追加ルール

  4. Event Type > Enters Viewport を選択します。 表示されたフィールドに CSS セレクターを入力します。このセレクターは、ブラウザーにルールが表示されたときにルールをトリガーする必要のあるページ上の項目を識別します。

  5. Luma のホームページに戻り、注目の製品セクションまで下にスクロールします。

  6. 「FEATURED PRODUCTS」タイトルとこのセクションの項目の間のスペースを右クリックし、右クリックメニューから「Inspect」を選択します。 探しているものはすぐ近くにあります。

  7. おそらく選択したセクションのすぐ下に、class="we-productgrid aem-GridColumn aem-GridColumn--default--12"を含む div があるはずです。この要素を見つけます。

  8. この要素を右クリックし、「コピー コピーセレクター を選択します。

    Enters ビューポートイベントの設定

  9. タグに戻り、クリップボードのこの値を、Elements matching the CSS selector というラベルの付いたフィールドに貼り付けます。

    1. CSS セレクターの識別方法はユーザーが決定します。この方法は、ページ上で特定の変更をおこなうと、このセレクターが壊れる場合があるので、少し脆弱です。タグで CSS セレクターを使用する場合は、このことを考慮してください。

  10. 「変更を保持」をクリックします
    Enters ビューポートイベントの設定

  11. 「条件」で、 プラスアイコンをクリック をクリックして、新しい条件を追加します。

  12. 条件タイプ/値の比較 を選択します。

  13. データ要素ピッカーを使用して、最初のフィールドで「Page Name」を選択します。

  14. 比較演算子ドロップダウンから「次に等しい」を選択します

  15. 次のフィールドで、content:luma:us:en と入力します（これは、データレイヤーから取り込んだホームページのページ名です。このルールは、ホームページ上でのみ実行する必要があります）。

  16. 「変更を保持」をクリックします

    ホームページでの条件の設定

  17. 「アクション」の下の プラスアイコン をクリックして、新しいアクションを追加します。

  18. 拡張機能/Adobe Analytics を選択します。

  19. アクションタイプ/変数を設定 を選択します。

  20. eVar3 を Home Page - Featured Products に設定します。

  21. prop3 を Home Page - Featured Products に設定します。

  22. Events 変数を event3 に設定します。

  23. 「変更を保持」をクリックします

    Enters ビューポートイベントの設定

  24. 「アクション」の下の プラスアイコン をクリックして、新しいアクションを追加します。

  25. 拡張機能/Adobe Analytics を選択します。

  26. アクションタイプ/ビーコンを送信 を選択します。

  27. s.tl() のトラッキングオプションを選択します

  28. 「リンク名」フィールドに「Scrolled down to Featured Products」と入力します。 この値は、Analytics のカスタムリンクレポートに配置されます。

  29. 「変更を保持」をクリックします

    Config Featured Products ビーコン

  30. 「ライブラリおよびビルドに保存」をクリックします

    ルールを保存してビルドする

トラックリンクビーコンの検証

次に、サイトのホームページの「特集製品」セクションまでスクロールダウンしたときに、このヒットが表示されるようにする必要があります。 最初にホームページを読み込んだときには、リクエストは実行されませんが、下にスクロールしてセクションが表示されると、新しい値でヒットが起動します。

  1. Chrome ブラウザーで Lumaサイトを開き、ホームページの先頭に来ていることを確認します。

  2. デバッガーアイコン Experience Cloud Debuggerを開く をクリックして、Adobe Experience Cloud デバッガーを開きます ​

  3. 「Analytics」タブをクリックします。

  4. レポートスイートのヒットを展開します。

  5. ホームページの通常のページビューヒットにページ名などが付いています。（ただし、eVar3 や prop3 には何も含まれません）。

    デバッガーのページビュー

  6. デバッガーを開いたままにして、おすすめ製品セクションが表示されるまでサイトを下にスクロールします

  7. デバッガーを再度表示すると、別の Analytics ヒットが表示されるはずです。このヒットには、設定した s.tl() ヒットに関連付けられたパラメーターが含まれている必要があります。すなわち、

    1. LinkType = "link_o" となります（これは、ヒットは、ページビューヒットではなく、カスタムリンクヒットであることを意味します）。

    2. LinkName = "Scrolled down to Featured Products"

    3. prop3 = "Home Page - Featured Products"

    4. eVar3 = "Home Page - Featured Products"

    5. Events = "event3"

      デバッガーのページビュー

プラグインの追加

プラグインは、実装することで、製品に組み込まれていない関数を実行できる JavaScript コードです。プラグインは、ユーザー、他のアドビの顧客やパートナー、またはアドビコンサルティングによって作成できます。

プラグインを実装するには、基本的には次の 3 つの手順があります。

  1. doPlugins 関数を含める（この関数では、プラグインが参照されます）。
  2. プラグインのメイン関数コードを追加する。
  3. 関数を呼び出し、変数などを設定するコードを含める。