ドキュメントExperience PlatformWeb SDK チュートリアル

Adobe Experience Platform Web SDKを使用したAdobe Analyticsの設定

最終更新日： 2026年8月11日

作成対象：

  • Beginner
  • Intermediate
  • Developer

Adobe Experience Platform Web SDKを使用してAdobe Analyticsを設定する方法、データをAdobe Analyticsに送信するためのタグルールを作成する方法、およびAnalyticsが期待どおりにデータをキャプチャしていることを検証する方法について説明します。

Adobe Analyticsは、業界をリードするアプリケーションで、顧客を人として理解し、カスタマーインテリジェンスを利用してビジネスを運営するのに役立ちます。

Web SDKからAdobe Analyticsへの図

学習目標

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

  • Adobe Analyticsを有効にするためのデータストリームの設定
  • Analytics変数に自動マッピングされる標準XDM フィールドを把握する
  • データオブジェクトでAnalytics変数を設定する
  • データストリームを上書きして別のレポートスイートにデータを送信する
  • DebuggerとAssuranceを使用したAdobe Analytics変数の検証

前提条件

このレッスンを完了するには、まず次の手順を実行する必要があります。

  • Adobe Analyticsの概要とアクセス方法。

  • 少なくとも1つのテスト/開発レポートスイート IDを持っている。 このチュートリアルで使用できるテスト/開発レポートスイートがない場合、作成してください。

  • このチュートリアルの「初期設定とタグ設定」セクションの前のレッスンを完了します。

データストリームの設定

Platform Web SDKは、Web サイトからPlatform Edge Networkにデータを送信します。 次に、データストリームは、データの送信先となるAdobe Analytics レポートスイートをPlatform Edge Networkに伝えます。

  1. ​ データ収集 インターフェイスに移動

  2. 左側のナビゲーションで、データストリーム​を選択します

  3. 以前に作成したLuma Web SDK: Development Environment データストリームを選択

    Luma Web SDK データストリームを選択

  4. 「サービスを追加」を選択
    ​ データストリームにサービスを追加

  5. Adobe Analytics​を​ サービス ​として選択します

  6. 開発レポートスイートの​ レポートスイート ID ​を入力します

  7. 保存​を選択

    ​ データストリームの保存の分析

    note tip
    TIP
    「レポートスイートを追加」を選択してレポートスイートをさらに追加することは、マルチスイートタグ付けと同じです。
WARNING
このチュートリアルでは、開発環境に対してのみAdobe Analytics レポートスイートを設定します。 独自のweb サイト用のデータストリームを作成する場合は、ステージング環境と実稼動環境用に追加のデータストリームとレポートスイートを作成する必要があります。

Analytics変数の設定

Web SDKの実装でAnalytics変数を設定するには、いくつかの方法があります。

  1. XDM フィールドのAnalytics変数への自動マッピング（自動）。
  2. data オブジェクトにフィールドを設定します（推奨）。
  3. XDM フィールドをAnalyticsの処理ルールのAnalytics変数にマッピングする（推奨されなくなりました）。
  4. XDM スキーマでAnalytics変数に直接マッピングする（推奨されなくなりました）。

2024年5月をもって、Platform Web SDKを使用してAdobe Analyticsを実装するためにXDM スキーマを作成する必要がなくなりました。 data オブジェクト（および​ データ要素の作成 レッスンで作成したdata.variable データ要素）を使用して、すべてのカスタム Analytics変数を設定できます。 データオブジェクトでこれらの変数を設定すると、既存のAnalyticsのお客様にはよく知られており、処理ルールのインターフェイスを使用するよりも効率的で、リアルタイム顧客プロファイルの不要なデータの占有を防ぐことができます（Real-Time Customer Data PlatformまたはJourney Optimizerがある場合は重要）。

自動的にマッピングされたフィールド

多くのXDM フィールドは、自動的にAnalytics変数にマッピングされます。 マッピングの最新のリストについては、Adobe Experience EdgeでのAnalytics変数マッピング ​を参照してください。

これは、カスタムスキーマを定義していない場合でも​に発生します。 Experience Platform Web SDKは、一部のデータを自動的に収集し、XDM フィールドとしてPlatform Edge Networkに送信します。 例えば、Web SDKは現在のページ URLを読み取り、XDM フィールド web.webPageDetails.URLとして送信します。 このフィールドはAdobe Analyticsに転送され、Adobe Analyticsのページ URL レポートに自動的に入力されます。

XDM スキーマを使用してAdobe Analytics用Web SDKを実装する場合、このチュートリアルで説明したように、一部のXDM フィールドは、次の表に示すように、Analytics変数に自動マッピングされます。

XDMからAnalyticsへの自動マッピング変数
Adobe Analytics変数
identitymap.ecid.[0].id
中
web.webPageDetails.name
s.pageName
commerce.productViews.value
prodView
commerce.productListViews.value
scView
commerce.purchases.value
購入
commerce.order.currencyCode
s.currencyCode
commerce.order.purchaseID
s.purchaseID
productListItems[].SKU
s.products=;product name;;;;（primary – 以下のメモを参照）
productListItems[].name
s.products=;product name;;;;（代替 – 以下のメモを参照）
productListItems[].quantity
s.products=;；製品量；;;
productListItems[].priceTotal
s.product=;;；製品価格；;

Analytics製品文字列の個々のセクションは、productListItems オブジェクトの下の異なるXDM変数によって設定されます。

NOTE
2022年8月18日現在、productListItems[].SKUはs.products変数の製品名へのマッピングを優先します。
productListItems[].nameに設定された値は、productListItems[].SKUが存在しない場合にのみ、製品名にマッピングされます。 それ以外の場合は、マッピング解除され、コンテキストデータで使用できます。
空の文字列またはnullをproductListItems[].SKUに設定しないでください。 これは、s.products変数の製品名にマッピングするという望ましくない効果があります。

データオブジェクトで変数を設定する

しかし、eVar、prop、イベントはどうでしょうか？ これらのAnalytics変数をWeb SDKで設定するには、data オブジェクトで変数を設定することをお勧めします。 データオブジェクト内の変数を設定すると、自動的にマッピングされた変数を上書きできます。

まず、data オブジェクトとは何ですか？ 任意のWeb SDK イベントでは、カスタムデータを含む2つのオブジェクト（xdm オブジェクトとdata オブジェクト）を送信できます。 両方ともPlatform Edge Networkに送信されますが、xdm オブジェクトのみがExperience Platform データセットに送信されます。 data オブジェクトのプロパティは、Data Prep for Data Collection機能を使用してEdgeのxdm フィールドにマッピングできますが、それ以外の場合はExperience Platformに送信されません。 そのため、Experience Platform上にネイティブに構築されていないAdobe Analyticsなどのアプリケーションにデータを送信するのが最適です。

汎用Web SDK呼び出しの2つのオブジェクトを次に示します。

​ データとxdm オブジェクト ​

Adobe Analyticsは、data.__adobe.analytics オブジェクト内の任意のプロパティを検索し、Analytics変数に使用するように設定されています。

では、実際にどう機能するのか見てみましょう。 eVar1とprop1をページ名で設定し、XDM マッピングされた値を上書きする方法を確認します

  1. タグルール all pages - adobeDataLayer push - set global variables - 1を開きます
  2. 新しい​ アクション ​を追加
  3. Adobe Experience Platform Web SDK​拡張機能を選択
  4. アクションタイプ​を​ 変数の更新 ​として選択します
  5. Data Variableを​ データ要素 ​として選択
  6. analytics オブジェクトを選択
  7. eVar1をPage Name データ要素として設定
  8. prop1を設定してeVar1の値をコピーします
  9. data オブジェクトがXDM マッピングされた値をどのように上書きするかを示すには、追加プロパティ セクションで、ページ名を静的値testとして設定します
  10. 変更を保持​を選択
  11. 保存​を選択

次に、送信イベントのルールにデータオブジェクトを含める必要があります。

  1. タグルール all pages - adobeDataLayer push - send event - 50を開きます
  2. イベントを送信 アクションを開きます
  3. Data Variableを​ データ ​として選択
  4. 変更を保持​を選択
  5. 保存​を選択

別のレポートスイートにデータを送信

特定のページに訪問者がアクセスしているときに使用するAdobe Analytics レポートスイートを変更する場合があります。 これには、データストリームとルールの両方で設定が必要です。

レポートスイートの上書きに対するデータストリームの設定

データストリームでAdobe Analytics レポートスイートの上書き設定を行うには、次の手順を実行します。

  1. データストリームを開く

  2. more メニューを開き、Edit​を選択して、Adobe Analytics​設定を編集します

    ​ データストリームを上書き

  3. 詳細オプション​を選択して​ レポートスイートの上書き ​を開きます

  4. 上書きするレポートスイートを選択します。 この場合、Web SDK Course DevとWeb SDK Course Stg

  5. 保存​を選択

    ​ データストリームを上書き

レポートスイートの上書き用のルールの設定

別のレポートスイートに追加のページビュー呼び出しを送信するルールを作成します。 データストリームの上書き機能を使用して、イベントを送信 アクションを使用してページのレポートスイートを変更します。

  1. 新しいルールを作成し、名前をhomepage - adobeDataLayer push - AA report suite override - 51にします

  2. Event​の下にあるプラス記号を選択して、新しいトリガーを追加します

  3. Extension​で、Adobe Client Data Layer​を選択します

  4. イベントタイプ​で、データプッシュ​を選択します

  5. 選択して​ 詳細オプション ​を開き、51と入力します。 これにより、ベースライン XDMを​変数の更新 アクションタイプで設定するall pages - adobeDataLayer push - send event - 50の後にルールが実行されます。

  6. 変更を保持​を選択

    Analytics レポートスイートの上書き

  7. 条件​で、追加​を選択します

  8. Logic Type​を​ Regular ​のままにします

  9. 拡張機能​を​ Core ​のままにする

  10. 条件タイプ​をクエリ文字列なしの​ パス ​として選択します

  11. 右側では、正規表現​切り替えを無効のままにします

  12. パスが​の下で、/ OR /index.htmlに設定されています。 Luma デモ web サイトの場合、ホームページのトリガーのみがルールに従います

  13. 変更を保持​を選択

    Analytics レポートスイートの上書き条件

  14. アクション​で、追加​を選択します

  15. 拡張機能​として、Adobe Experience Platform Web SDK​を選択します

  16. アクションタイプ​として、イベントの送信​を選択します

  17. XDM データ​として、​ データ要素の作成 レッスンで作成したXDM Variable データ要素を選択します

  18. データ​として、​ データ要素の作成 レッスンで作成したData Variable データ要素を選択します

    Analytics データストリームの上書き

  19. 「データストリーム設定の上書き」セクションまでスクロールします

  20. 「開発」タブを選択したままにします。

    note tip
    TIP
    このタブでは、どのタグ環境で上書きするかを指定します。 この抜粋では、開発環境のみを指定しますが、これを実稼動環境にデプロイする場合は、実稼動環境​でも行うことを忘れないでください。

  21. チュートリアルで使用している​ サンドボックス ​を選択します

  22. データストリーム​を選択します（この場合はLuma Web SDK: Development Environment）

  23. レポートスイート​で、上書きに使用するレポートサイトを選択します。 この場合、tmd-websdk-course-stg。

  24. 変更を保持​を選択

  25. ルールを​ 保存 ​します

    Analytics データストリームの上書き

開発環境の構築

更新したルールをLuma Web SDK Tutorial タグライブラリに追加し、開発環境を再構築します。

おめでとうございます。 次の手順は、Experience Platform Web SDKを使用してAdobe Analyticsの実装を検証することです。

Debuggerを使用したAdobe Analyticsの検証

Experience Platform DebuggerのEdge Trace機能を使用して、Adobe AnalyticsがECID、ページビュー、製品文字列、e コマースイベントをキャプチャしていることを検証する方法を説明します。

Debugger レッスンでは、Platform Debuggerおよびブラウザー開発者コンソールを使用してクライアントサイド XDM リクエストを検査する方法を学習しました。これは、AppMeasurement.js Analytics実装のデバッグ方法と同様です。 また、Adobe アプリケーションに送信されたPlatform Edge Network サーバーサイドリクエストの検証と、Assuranceを使用して完全に処理されたペイロードを表示する方法についても学習しました。

AnalyticsがExperience Platform Web SDKを通じてデータを適切にキャプチャしていることを検証するには、さらに2つの手順を実行して次の操作を行う必要があります。

  1. Experience Platform DebuggerのEdge Trace機能を使用して、Platform Edge NetworkのXDM オブジェクトでデータがどのように処理されるかを検証します
  2. Adobe Experience Platform Assuranceを使用して、Analyticsでデータがどのように処理されるかを検証します

Experience Cloud ID検証

  1. Luma デモ web サイトに移動

  2. 右上のログインボタンを選択し、認証情報u: test@test.com p: testを使用して認証します。

  3. Experience Platform Debuggerを開き、​ サイトのタグプロパティを独自の開発プロパティに切り替えます

  4. Edge トレースを有効にするには、Experience Platform Debuggerに移動します。左側のナビゲーションで「ログ」を選択し、「Edge」タブを選択して「接続」を選択します

    Edge Traceの接続

  5. 今のところは空っぽです

    Edge Traceに接続

  6. Luma ページを更新してExperience Platform Debuggerをもう一度確認すると、データが表示されます。 Analytics自動マッピング​で始まる行は、Adobe Analytics ビーコンです

  7. 「mappedQueryParams」ドロップダウンと2番目のドロップダウンの両方を開いて、Analytics変数を表示します

    Analytics ビーコン Edge トレース ​

    note tip
    TIP
    2番目のドロップダウンは、データの送信先のAnalytics レポートスイート IDに対応します。 これは、スクリーンショットのレポートスイートではなく、独自のレポートスイートと一致する必要があります。

  8. 下にスクロールしてc.a.x.identitymap.ecid.[0].idを見つけます。 ECIDをキャプチャするコンテキストデータ変数です

  9. Analytics mid変数が表示されるまで、下にスクロールし続けます。 両方のIDがデバイスのExperience Cloud IDと一致します。

  10. Luma サイトで：

    Analytics ECID

    note
    NOTE
    ログインしているので、ユーザー​**test@test.com**​の認証ID f660ab912ec121d1b1e928a0bb4bc61bがc.a.x.identitymap.lumacrmid.[0].idにも取り込まれていることを確認してください

レポートスイートの上書き検証

上記では、Luma ホームページ ​のデータストリームの上書きを設定しました。 この設定を検証するには

  1. オーバーライドが適用された後、データストリーム設定の行を探します。 ここでは、レポートスイートのオーバーライド用に設定されたプライマリレポートスイートと追加レポートスイートが表示されます。

    Analytics レポートスイートの上書きリストの検証

  2. Analytics自動マッピング​で始まる行まで下にスクロールし、reportSuiteIdsに上書き設定で指定したレポートスイートが表示されていることを確認します

    Analytics レポートスイートの上書き呼び出しの検証

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

Livingston All-Purpose Tight製品ページ ​のような製品ページに移動します。 コンテンツページビューがAnalyticsによって取り込まれることを検証します。

  1. c.a.x.web.webpagedetails.pageviews.value=1を探します。

  2. 下にスクロールして、gn変数を表示します。 これは、s.pageName変数のAnalytics動的構文です。 データレイヤーからページ名をキャプチャします。

    note
    NOTE
    前の演習でdata オブジェクトでxdm オブジェクトを上書きした場合、gn値はtestになる可能性があります。

    Analytics製品文字列

製品文字列とe コマースイベントの検証

既に商品ページを作成しているので、この演習では、同じEdge Traceを使用して、Analyticsで商品データが取り込まれていることを検証します。 商品文字列イベントとe コマースイベントの両方が、XDM変数をAnalyticsに自動的にマッピングされます。 Adobe Analytics🔗用のXDM スキーマを設定しながら適切なproductListItemXDM変数にマッピングした場合、Platform Edge Networkは、データを適切なAnalytics変数にマッピングします。

まず、Product Stringが設定されていることを検証します

  1. c.a.x.productlistitems.[0].skuを探します。 変数は、このレッスンの前にproductListItems.item1.skuにマッピングしたデータ要素の値をキャプチャします

  2. c.a.x.productlistitems.[0]._experience.analytics.customdimensions.evars.evar1も探してください。 変数は、productListItems.item1._experience.analytics.customdimensions.evars.evar1にマッピングしたデータ要素の値をキャプチャします

  3. 下にスクロールして、pl変数を表示します。 これは、Analytics製品文字列変数の動的構文です

  4. データレイヤーの製品名は、製品文字列のc.a.x.productlistitems.[0].skuとproduct パラメーターの両方にマッピングされることに注意してください。 さらに、データレイヤーの製品タイトルは、製品文字列のマーチャンダイジング evar1にマッピングされます。

    Analytics製品文字列

    Edge Traceでは、commerce件のイベントをproductList件のディメンションとは少し異なる方法で処理します。 上記のc.a.x.productlistitem.[0].nameにマッピングされた製品名と同じようにマッピングされたコンテキストデータ変数が表示されません。 代わりに、Edge Traceは、Analytics event変数に最終的なイベント自動マッピングを表示します。 Platform Edge Networkは、適切なXDM commerce変数にマッピングする限り、それに応じてマッピングします。一方、Adobe Analyticsのスキーマを設定します。この場合はcommerce.productViews.value=1。

  5. Experience Platform Debugger ウィンドウに戻り、events変数までスクロールダウンすると、prodViewに設定されます

  6. 製品ページを使用しているため、c.a.x.eventTypeはcommerce.productViewsに設定されています。

    note tip
    TIP
    product detail pages - adobeDataLayer push - set product details variables - 20 ルールは、シーケンスの後でトリガーに設定されているため、all pages - adobeDataLayer push - set global variables - 1 ルールによって設定されたeventTypeの値を上書きしています

    Analytics製品ビュー

残りのe コマースイベントと製品文字列がAnalytics用に設定されていることを検証する

  1. Marco Lightweight Active Hoodieをカートに追加

  2. 買い物かごページ ​に移動し、次のEdge トレースを確認します。

    • eventTypeがcommerce.productListViewsに設定されました
    • events: "scView"、および
    • 製品文字列が設定されます

    Analytics カート表示

  3. チェックアウトに進み、Edge Traceで

    • eventTypeがcommerce.checkoutsに設定されました
    • events: "scCheckout"、および
    • 製品文字列が設定されます

    Analytics チェックアウト ​

  4. 配送フォームに「名」と「姓」のフィールドのみを入力し、「続行」を選択します。 次のページで、注文を配置​を選択します

  5. 確認ページで、「Edge Trace」をチェックして、以下を確認します。

    • eventTypeがcommerce.purchasesに設定されました
    • 購入イベントが設定されています：events: "purchase"
    • 通貨コード変数cc: "USD"が設定されています
    • piに設定されている購入ID
    • 製品名、数量、価格を設定する製品文字列pl

    Analytics購入

Assuranceを使用したAdobe Analyticsの検証

Adobe Experience Platform Assuranceは、web サイトやモバイルアプリケーションでデータ収集やエクスペリエンスの提供を行う方法を調査、試験、シミュレーション、検証するのに役立ちます。

前の演習では、Adobe AnalyticsがExperience Platform DebuggerのEdge Trace機能を使用して、ECID、ページビュー、製品文字列、およびe コマースイベントをキャプチャしていることを検証しました。 次に、Edge Traceの同じデータにアクセスするための代替インターフェイスであるAdobe Experience Platform Assuranceを使用して、同じイベントを検証します。

Assuranceのレッスンで学んだように、Assurance セッションを開始するには、いくつかの方法があります。 前回の演習から開始されたEdge Trace セッションでAdobe Experience Platform Debuggerを既に開いているので、デバッガーを使用してAssuranceにアクセスすることをお勧めします。
Adobe Experience Platform Data CollectionによるAssurance

「Web SDK Tutorial 3」 Assurance セッション内で、「“hitdebugger”」をイベント検索バーに入力して、結果をAdobe Analytics Post Processed データにフィルタリングします。
Assurance Adobe Analytics Post Processed Data

Experience Cloud ID検証

Adobe AnalyticsがECIDをキャプチャしていることを検証するには、ビーコンを選択してペイロードを開きます。 このビーコンのベンダーは​com.adobe.analytics.hitdebuggerである必要があります
AssuranceによるAdobe Analyticsの検証

次に、mcvisId​までスクロールして、ECIDが正しくキャプチャされていることを確認します
AssuranceによるExperience Cloud IDの検証

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

同じビーコンを使用して、コンテンツページビューが正しいAdobe Analytics変数にマッピングされていることを検証します。
pageName​まで下にスクロールして、Page Nameが正しくキャプチャされていることを確認します。

前の演習で「data」オブジェクトを使用して「xdm」オブジェクトを上書きした場合、「pageName」の値が「test」になる可能性があります。

![Assuranceでのページ名の検証] （assets/assurance-hitdebugger-content-pagename.png）

製品文字列とe コマースイベントの検証

上記のExperience Platform Debuggerでの検証時に使用された同じ検証ユースケースに従って、同じビーコンを引き続き使用してEcommerce EventsとProduct Stringを検証します。

  1. イベント​に含まれるペイロードを探します prodView
    Assuranceによる製品文字列の検証
  2. product-string​までスクロールして、Product Stringを検証します。
    • Product SKUとMerchandizing eVar1に注意してください。
  3. さらに下にスクロールして、前のセクションで処理ルールを使用して設定したprop1にProduct SKUが含まれていることを検証します
    Assuranceを使用したマーチャンダイジング変数の検証を使用した製品文字列

買い物かごと購入イベントを確認して、引き続き実装を検証します。

  1. イベント​にscViewが含まれているペイロードを探し、製品文字列を検証します。
    Assuranceによる製品文字列の検証
  2. イベント​に含まれるペイロードを探します purchase
    Assuranceによる製品文字列の検証
  3. purchase イベントを検証する際は、Product StringにProduct SKU、Product Quantity、Product Total Priceを含める必要があることに注意してください。
  4. さらに、purchaseでは、purchase-idおよび/またはpurchaseIdが設定されていることを検証します

おめでとうございます。 お前がやった！ これでレッスンの終わりです。これで、Platform Web SDKを使用して、独自のweb サイトにAdobe Analyticsを実装する準備が整いました。

TIP
このレッスンを完了したら、homepage - adobeDataLayer push - AA report suite override - 51 ルールを無効にすることをお勧めします。
NOTE
Adobe Experience Platform Web SDKについて学ぶために時間を割いていただきありがとうございます。 ご質問がある場合、一般的なフィードバックを共有したい場合、または今後のコンテンツに関する提案がある場合は、このExperience League コミュニティ ディスカッション投稿で共有してください
recommendation-more-help
platform-learn-help-tutorial-web-sdk