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

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

Last update: Tue Jul 16 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • トピック：

作成対象：

  • 初心者
  • 中級
  • 開発者

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 を実装する場合、次の表に示すように、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 製品文字列の個々のセクションは、productListItems オブジェクトの下の様々な XDM 変数を介して設定されます。

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

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

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

まず、data のオブジェクトは何ですか？ どの Web SDK イベントでも、カスタムデータを含んだ 2 つのオブジェクト（xdm オブジェクトと data オブジェクト）を送信できます。 両方とも Platform Edge Networkに送信されますが、Experience Platformデータセットに送信されるのは xdm オブジェクトのみです。 data オブジェクトのプロパティは、データ収集用のデータ準備機能を使用して、Edgeで 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. アクションタイプ を 変数を更新 として選択します
  5. データ要素 として data.variable を選択します
  6. analytics オブジェクトを選択します
  7. eVar1 を page.pageInfo.pageName データ要素として設定します
  8. prop1 を設定して、eVar1 の値をコピーします
  9. XDM マッピング値の上書きをテストするには、「追加のプロパティ」セクションで、ページ名を静的な値 test として設定します
  10. ルールの保存

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

  1. タグルール all pages - library loaded - send event - 50 を開きます。
  2. イベントを送信 アクションを開きます
  3. Data として data.variable を選択します
  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. Extension で Core を選択します。

  4. イベントタイプ で、「ライブラリの読み込み（ページのトップ）」 Library Loaded （Page Top） を選択します。

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

  6. 「変更を保持」を選択します

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

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

  8. 論理タイプ は 標準 のままにします

  9. 拡張機能 は コア のままにします

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

  11. 右側で、「正規表現 トグルを無効のままに ます

  12. path equals で /content/luma/us/en.html を設定します。 Luma デモサイトの場合、ルールがホームページにのみトリガーされるようにします

  13. 「変更を保持」を選択します

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

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

  15. Extension として、「Adobe Experience Platform Web SDK」を選択します

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

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

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

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

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

  1. Experience PlatformデバッガーのEdge トレース機能を使用して、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」タブを選択し、「接続」を選択します

    Connect Edge Trace

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

    Connected Edge Trace

  6. Luma ページを更新し、Experience Platformデバッガーをもう一度確認します。データが入ってくることが確認できます。 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
    NOTE
    ログインしたので、c.a.x.identitymap.lumacrmid.[0].id でも取得されたユーザーの認証済み ID 112ca06ed53d3db37e4cea49cc45b71e を検証 test@adobe.com ます

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

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

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

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

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

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

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

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

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

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

    Analytics 製品文字列

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

ユーザーは既に商品ページを開いているので、この演習では引き続き同じEdge Trace を使用して、商品データが Analytics によって取得されることを検証します。 製品文字列イベントと e コマースイベントの両方が、XDM 変数として Analytics に自動的にマッピングされます。 Platform 用の XDM スキーマの設定中に適切な productListItem XDM 変数にマッピングしている限り、Adobe Analytics 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 変数に最終的なイベントの自動マッピングを表示します。 Adobe Analytics用のスキーマの設定時に適切な XDM commerce 変数にマッピングする限り、Platform Edge Networkはそれに応じてマッピングします。この場合、commerce.productViews.value=1 です。

  5. Experience Platformデバッガーウィンドウに戻り、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. Didi Sport Watch をカートに追加します

  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" に設定されている通貨コード変数
    • pi で設定されている購入 ID
    • 製品名、数量および価格を設定するた pl の製品文字列

    Analytics 購入

Assurance を使用したAdobe Analyticsの検証

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

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

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

"Web SDK Tutorial 3" Assurance Session 内で、イベント検索バーに "hitdebugger" と入力し、結果をAdobe Analytics Post処理済みデータにフィルタリングします。
Assurance Adobe分析Postで処理されたデータ

Experience CloudID の検証

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

次に、mcvisId まで下にスクロールして、ECID が正しく取り込まれていることを検証します
Assurance によるExperience Cloud ID 検証

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

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

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

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

  1. events に prodView が含まれるペイロードを探します
    Assurance による製品文字列の検証
  2. product-string までスクロールして、Product String を検証します。
    • Product SKU と Merchandizing eVar1 をメモしておきます。
  3. さらに下にスクロールして、前の節の処理ルールを使用して設定した prop1 に Product SKU が含まれていることを確認します
    Assurance を使用したマーチャンダイジング変数の検証を含む製品文字列

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

  1. events に scView が含まれているペイロードを探し、製品文字列を検証します。
    Assurance による製品文字列の検証
  2. events に scCheckout が含まれているペイロードを探し、製品文字列を検証します。
    Assurance による製品文字列の検証
  3. events に 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