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

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

Last update: Sat Jun 01 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • トピック：

作成対象：

  • 初心者
  • 中級
  • 開発者

を使用したAdobe Analyticsの設定方法を説明します Adobe Experience Platform Web SDKを選択し、タグルールを作成して Analytics にデータを送信し、Adobe 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 as the サービス

  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 変数に自動的にマッピングされます。 最新のマッピングのリストについては、を参照してください。 AdobeExperience 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 を実装する場合、次の表に示すように、Analytics 変数への自動マッピングがカスタム実装された XDM フィールドの一部が用意されています。

XDM から Analytics への自動マッピング変数
Adobe Analytics変数
identitymap.ecid.[0].id
mid
web.webPageDetails.name
s.pageName
web.webPageDetails.server
s.server
web.webPageDetails.siteSection
s.channel
commerce.productViews.value
prodView
commerce.productListViews.value
scView
commerce.checkouts.value
scCheckout
commerce.purchases.value
購入
commerce.order.currencyCode
s.currencyCode
commerce.order.purchaseID
s.purchaseID
productListItems[].SKU
s.products=;product name;;;（プライマリ – 下のメモを参照）
productListItems[].name
s.products=;product name;;;（フォールバック – 以下のメモを参照）
productListItems[].quantity
s.products=;;product quantity;;
productListItems[].priceTotal
s.product=;;；製品価格；;

Analytics 製品文字列の個々のセクションは、の下の様々な XDM 変数を介して設定されます productListItems オブジェクト。

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

データオブジェクトに変数を設定

evar、prop、event についてはどうでしょうか。 での変数の設定 data web SDK でこれらの Analytics 変数を設定する場合は、オブジェクトを使用することをお勧めします。 データオブジェクトで変数を設定すると、自動的にマッピングされた変数もすべて上書きされる可能性があります。

まず、とは何ですか data 対象？ どの Web SDK イベントでも、カスタムデータを含んだ 2 つのオブジェクトを送信できます。 xdm オブジェクトと data オブジェクト。 両方とも Platform Edge Networkに送信されますが、 xdm オブジェクトがExperience Platformデータセットに送信されます。 プロパティ： data オブジェクトはエッジ上でにマッピングできます。 xdm データ収集のためのデータ準備機能を使用するフィールドですが、それ以外のフィールドはExperience Platformに送信されません。 そのため、Experience Platform上でネイティブに構築されていない Analytics などのアプリケーションにデータを送信するのに最適な方法です。

汎用 Web SDK 呼び出しの 2 つのオブジェクトは次のとおりです。

データおよび xdm オブジェクト

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

次に、この仕組みを見てみましょう。 設定しましょう eVar1 および prop1 ページ名を使用し、XDM マッピングされた値を上書きする方法を確認します

  1. タグルールを開く all pages - library loaded - set global variables - 1
  2. 新しいを追加 アクション
  3. を選択 Adobe Experience Platform Web SDK 拡張子
  4. を選択 アクションタイプ as 変数を更新
  5. を選択 data.variable as the データ要素
  6. 「」を選択します analytics オブジェクト
  7. を設定 eVar1 as the page.pageInfo.pageName データ要素
  8. を設定 prop1 次の値をコピーします eVar1
  9. XDM にマッピングされた値の上書きをテストするには、を使用します。 追加のプロパティ セクションでページ名を静的な値として設定 test
  10. ルールの保存

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

  1. タグルールを開く all pages - library loaded - send event - 50
  2. を開きます イベントを送信 アクション
  3. を選択 data.variable as the データ
  4. を選択 変更を保持
  5. を選択 保存

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

訪問者が特定のページを閲覧した際に、どのAdobe Analytics レポートスイートデータを送信するかを変更することができます。 これには、データストリームとルールの両方で設定が必要です。

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

データストリームでAdobe Analytics レポートスイートの上書き設定を指定するには：

  1. データストリームを開きます

  2. を編集する Adobe Analytics を開くことによる設定 詳細 メニューから選択 編集

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

  3. を選択 詳細オプション 開く レポートスイートの上書き

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

  5. を選択 保存

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

レポートスイートの上書きに対するルールの設定

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

  1. 新しいルールを作成し、名前を付ける homepage - library loaded - AA report suite override - 51

  2. の下のプラス記号を選択します イベント 新しいトリガーを追加するには

  3. 次の下 拡張機能 ​を選択 コア

  4. 次の下 イベントタイプ ​を選択 ライブラリが読み込まれました（ページのトップ）

  5. 選択して開く 詳細オプション，入力 51. これにより、ルールが次の後に実行されます all pages - library loaded - send event - 50 これにより、ベースライン XDM に 変数を更新 アクションタイプ。

  6. を選択 変更を保持

    Analytics レポートスイートのオーバーライド

  7. 次の下 条件、を選択 追加

  8. 移動 論理タイプ as 標準

  9. 移動 拡張機能 as コア

  10. を選択 条件タイプ as クエリ文字列を含まないパス

  11. 右側で、 正規表現 無効の切り替え

  12. 次の下 パスがと等しい set /content/luma/us/en.html. Luma デモサイトの場合、ルールがホームページにのみトリガーされるようにします

  13. を選択 変更を保持

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

  14. 次の下 アクション 選択 追加

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

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

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

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

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

  19. にスクロール ダウンします。 データストリーム設定の上書き セクション

  20. を残す 開発 タブが選択されました。

    note tip
    TIP
    このタブは、上書きされるタグ環境を決定します。 この演習では開発環境のみを指定しますが、実稼動環境にデプロイする場合は、必ず 実稼動 環境。

  21. 「」を選択します Sandbox チュートリアルでを使用している

  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デバッガーのエッジトレース機能を使用して、Adobe Analyticsが ECID、ページビュー、商品文字列、e コマースイベントを取り込んでいることを検証する方法について説明します。

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

Experience Platform Web SDK を使用して Analytics がデータを適切に取得していることを検証するには、次の 2 つの手順を実行する必要があります。

  1. Experience Platformデバッガーのエッジトレース機能を使用して、Platform Edge Network上の XDM オブジェクトによってデータが処理される方法を検証します
  2. Adobe Experience Platform Assurance を使用して Analytics でデータが完全に処理される方法を検証する

Experience CloudID の検証

  1. に移動します Luma デモサイト

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

  3. Experience Platformデバッガーを開き、 サイトのタグプロパティを独自の開発プロパティに切り替える

  4. Edge Trace を有効にするには、Experience Platformデバッガーの左側のナビゲーションで「」を選択します ログ ​を選択してから、 Edge tab キーを押して、 接続

    Edge Trace の接続

  5. 今のところ空になります

    接続エッジ トレース

  6. Luma ページを更新し、Experience Platformデバッガーをもう一度確認します。データが入ってくることが確認できます。 で始まる行 Analytics 自動マッピング はAdobe Analytics ビーコンです

  7. を選択して、両方の mappedQueryParams ドロップダウンと 2 つ目のドロップダウンで Analytics 変数を表示

    Analytics ビーコン Edge Trace

    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
    NOTE
    ログインしているため、認証済み ID を検証します 112ca06ed53d3db37e4cea49cc45b71e ユーザー用 test@adobe.com も同様にキャプチャされます。 c.a.x.identitymap.lumacrmid.[0].id

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

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

  1. 次を含む列を検索 上書き適用後のデータストリーム設定. ここには、プライマリレポートスイートと、レポートスイートの上書き用に設定された追加レポートスイートがあります。

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

  2. で始まる行まで下にスクロールします。 Analytics 自動マッピング を行い、 reportSuiteIds 優先設定で指定したレポートスイートを表示します

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

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

のような製品ページに移動します Didi Sport Watch 製品ページ. コンテンツページビューが Analytics によってキャプチャされていることを検証します。

  1. を検索 c.a.x.web.webpagedetails.pageviews.value=1.

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

    Analytics 製品文字列

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

ユーザーは既に製品ページを開いているので、この演習では引き続き同じ Edge Trace を使用して、製品データが Analytics によって取得されることを検証します。 製品文字列イベントと e コマースイベントの両方が、XDM 変数として Analytics に自動的にマッピングされます。 適切にマッピングしている限り productListItem XDM 変数 while Adobe Analytics用の XDM スキーマの設定は、PlatformEdge 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 製品文字列

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

  5. Experience Platform Debugger ウィンドウに戻り、下にスクロールしてまで移動します。 events 変数。に設定されます。 prodView

  6. また、次のことにも注意してください c.a.x.eventType はに設定されています。 commerce.productViews 製品ページを開いているため。

    note tip
    TIP
    この ecommerce - pdp library loaded - AA (order 20) ルールがの値を上書きしています eventType によって設定 all pages global content variables - library loaded - AA (order 1) シーケンスの後半でトリガーに設定されるルール

    Analytics 製品表示

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

  1. 追加 ディディスポーツウォッチ カートに

  2. に移動します 買い物かごページ, Edge Trace をチェックします

    • 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"
    • で設定されている購入 ID pi
    • 製品文字列 pl 製品名、数量および価格の設定

    Analytics 購入

Assurance を使用したAdobe Analyticsの検証

Adobe Experience Platform Assurance は、web サイトやモバイルアプリケーションでデータを収集したりエクスペリエンスを提供したりする方法を検査、配達確認、シミュレートおよび検証するのに役立ちます。

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

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

内 "Web SDK チュートリアル 3" Assurance Session enter "hitdebugger" をイベント検索バーに移動し、結果をAdobe Analyticsの後処理済みデータにフィルタリングします。
Assurance Adobe分析で処理後のデータを分析

Experience CloudID の検証

Adobe Analyticsが ECID を取り込んでいることを検証するには、ビーコンを選択し、ペイロードを開きます。 このビーコンの「ベンダー」は、 com.adobe.analytics.hitdebugger
Assurance を使用したAdobe Analytics検証

次に、以下までスクロールします mcvisId ECID が正しくキャプチャされていることを検証するには
Assurance によるExperience CloudID 検証

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

同じビーコンを使用して、コンテンツページビューが正しいAdobe Analytics変数にマッピングされていることを検証します。
Scroll down to pageName を検証します Page Name は正しくキャプチャされました
Assurance を使用したページ名の検証

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

上記のExperience Platformデバッガーで検証する場合と同じ検証ユースケースに従い、引き続き同じビーコンを使用して検証を行います Ecommerce Events および Product String.

  1. 次のようなペイロードを探します イベント contain prodView
    Assurance による製品文字列の検証
  2. Scroll down to product-string を検証します Product String.
    • 「」に注目してください Product SKU および Merchandizing eVar1.
  3. さらに下にスクロールして、以下を検証します prop1前の節で処理ルールを使用して設定したには、が含まれています Product SKU
    Assurance を使用したマーチャンダイジング変数の検証を含む製品文字列

買い物かご、チェックアウト、購入のイベントを確認して、実装の検証を続行します。

  1. 次のようなペイロードを探します イベント contain scView 製品文字列を検証します。
    Assurance による製品文字列の検証
  2. 次のようなペイロードを探します イベント contain scCheckout 製品文字列を検証します。
    Assurance による製品文字列の検証
  3. 次のようなペイロードを探します イベント contain purchase
    Assurance による製品文字列の検証
  4. の検証時 purchase イベント名は、 Product String 次を含める必要があります Product SKU, Product Quantity 、および Product Total Price.
  5. さらに、以下の場合： purchase を検証します purchase-id および/または purchaseId 設定済み

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

次へ：

NOTE
Adobe Experience Platform Web SDK の学習に時間を費やしていただき、ありがとうございます。 ご質問がある場合、一般的なフィードバックを共有したい場合、または将来のコンテンツに関するご提案がある場合は、このページでお知らせください Experience League コミュニティ ディスカッションの投稿
recommendation-more-help
8cbc0fd8-ca1d-433b-9c3d-bc3f113347d4