Experience Platformデバッガーを使用した Web SDK 実装の検証
Adobe Experience Platform デバッガ―を使用して Adobe Experience Platform Web SDK 実装を検証する方法について説明します。
Experience Platformデバッガーは、Chromeおよび Firefox ブラウザーで使用できる拡張機能で、web ページに実装されたAdobeテクノロジーを確認するのに役立ちます。 使用するブラウザーのバージョンをダウンロードします。
デバッガーをまだ使用したことがない場合は、次の 5 分間の概要ビデオをご覧ください。
このレッスンでは、Adobe Experience Platform Debugger拡張機能を使用して、Luma デモサイトでハードコードされたタグプロパティを独自のプロパティに置き換えます。
この手法は環境の切り替えと呼ばれるもので、後で自分の web サイトでタグを使用する際に役立ちます。 これにより、ブラウザーに実稼動 web サイトを読み込み、開発 タグライブラリを使用できます。 この機能を使用すると、通常のコードリリースとは別に、タグの変更を自信を持って行い、検証できます。 結局のところ、マーケティングタグリリースと通常のコードリリースの分離は、顧客がそもそもタグを使用する主な理由の 1 つです。
学習目標
このレッスンを終了すると、デバッガを使用して次の操作を実行できるようになります。
- 代替タグライブラリの読み込み
- クライアントサイド XDM イベントが、Platform Edge Networkに対して期待どおりにデータを取得して送信していることを検証します
- Edge Trace を有効にして、Platform Edge Networkーから送信されたサーバーサイドリクエストを表示します
前提条件
データ収集タグと Luma デモサイトに精通し、チュートリアルの前のレッスンを完了しました。
Debugger での代替タグライブラリの読み込み
Experience Platformデバッガーには、既存のタグライブラリを別のライブラリで置き換えることができる優れた機能があります。 この手法は、検証に役立ち、このチュートリアルの多くの実装手順をスキップできます。
-
Luma デモ Web サイトが開いていることを確認し、Experience Platformデバッガー拡張機能アイコンを選択します
-
デバッガーが開き、ハードコーディングされた実装の詳細が表示されます（デバッガーを開いた後に Luma サイトをリロードする必要が生じる場合があります）
-
次の図に示すように、デバッガーが「Luma に接続」されていることを確認し、「lock」アイコンを選択して、デバッガーを Luma サイトにロックします。
-
「ログイン」ボタンを選択し、AdobeID を使用してAdobe Experience Cloudにログインします。
-
左側のナビゲーションの Experience Platformタグ に移動します
-
「設定」タブを選択します。
-
ページ埋め込みコード が表示されている場所の右側で、「アクション」ドロップダウンを開き、「置換」を選択します
-
認証されたので、Debugger は使用可能なタグプロパティと環境を取り込みます。 プロパティを選択
-
Development環境を選択します -
「適用 ボタンを選択します
-
Luma web サイトが 独自のタグプロパティを使用して 再読み込みされるようになりました。
チュートリアルを続ける際は、この手法を使用して、Luma サイトを独自のタグプロパティにマッピングし、Platform Web SDK 実装を検証します。 独自の web サイトでタグを使用する場合、これと同じ手法を使用して、実稼動 web サイトで開発タグライブラリを検証できます。
Experience Platform Debugger を使用したクライアントサイドのネットワークリクエストの検証
Debugger を使用して、Platform Web SDK 実装からトリガーされたクライアントサイドビーコンを検証し、Platform Edge Networkに送信されたデータを確認できます。
-
左側のナビゲーションの 概要 に移動して、タグプロパティの詳細を確認します
-
左側のナビゲーションで Experience PlatformWeb SDK に移動して、ネットワークリクエスト を確認します
-
events 行を開きます
-
変数を更新 アクション、および
AEP Web SDK ExperienceEventフィールドグループに準拠するその他の標準変数で指定したweb.webpagedetails.pageViewイベントタイプを確認する方法をメモします
-
webオブジェクトまで下にスクロールし、選択して開き、webPageDetails.name、webPageDetails.server、webPageDetails.siteSectionを調べます。 ホームページの対応するdigitalDataデータレイヤーの変数と一致する必要があります
digitalData のデータレイヤーを表示して比較するには：- Luma ホームページで、ブラウザー開発者ツールを開きます。 Chromeの場合は、キーボードの
F12ボタンを選択します - 「コンソール」タブを選択します。
digitalDataと入力し、キーボードでEnterを選択してデータレイヤーの値を表示します
ID マップの詳細を検証することもできます。
-
資格情報
test@adobe.com/testを使用して Luma サイトにログインします。 -
Luma のホームページに戻ります。
-
左側のナビゲーションで「Experience Platform Web SDK」セクションを開きます
-
events 行を選択して、ポップアップで詳細を開きます
-
ポップアップ内で identityMap を検索します。 ここでは、authenticatedState、id、および primary の 3 つのキーを持つ
lumaCrmIdが表示されます。
ブラウザー開発ツールを使用したクライアントサイドリクエストの検証
これらのタイプのリクエストの詳細は、ブラウザーの web デベロッパーツールの ネットワーク タブにも表示されます（web サイトがタグライブラリを読み込んでいると仮定）。
-
ブラウザーの web 開発者ツールの「ネットワーク」タブを開き、ページをリロードします。
/eeを使用して呼び出しをフィルターし、呼び出しを見つけて選択し、「ヘッダー」タブと「ペイロード」タブを探します
-
「応答」タブに移動し、ECID 値が応答にどのように含まれるかを確認します。
note note NOTE ECID 値は、ネットワーク応答に表示されます。 これは、ネットワークリクエストの identityMapの部分には含まれず、この形式で cookie に格納されることもありません。
Debugger を使用したサーバーサイドのネットワークリクエストのExperience Platform化
データストリームの設定のレッスンで学んだように、Platform Web SDK は、まずデジタルプロパティから Platform Edge Networkにデータを送信します。 次に、Platform Edge Networkは、データストリームで有効になっている対応するサービスに対して、サーバーサイドのリクエストを追加します。 Platform Debugger でEdge Trace を使用すると、Platform Edge Networkによって行われたサーバーサイドリクエストを検証できます。
Edge Trace の有効化
Edge Trace を有効にする手順は次のとおりです。
-
Experience Platform デバッガーの左側のナビゲーションで [ログ] を選択します
-
「Edge」タブを選択し、「接続」を選択します
-
今のところ空です
-
Luma ホームページを更新し、Experience Platformーデバッガー を再度確認して、データが渡されることを確認します。
この時点では、データストリームでを有効にしていないため、Adobeアプリケーションに送信される Platform Edge Networkリクエストを表示できません。 今後のレッスンでは、Edge Trace を使用して、Adobeアプリケーションやイベント転送への送信サーバーサイドリクエストを確認します。 ただし、最初に、Platform Edge Networkが行ったサーバーサイドリクエストを検証する別のツールであるAdobe Experience Platform Assurance について説明します。