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 に接続 次の図のように「」を選択してから、「」を選択します ロック「アイコンでデバッガーを Luma サイトにロックします。
-
「」を選択します ログイン ボタンを押し、AdobeID を使用してAdobe Experience Cloudにログインします。
-
さあ、行きなさい Experience Platformタグ 左側のナビゲーションで
-
「」を選択します 設定 タブ
-
表示される場所の右側 ページ埋め込みコード を開きます。 アクション ドロップダウンから選択 置換
-
認証されたので、Debugger は使用可能なタグプロパティと環境を取り込みます。 プロパティを選択
-
を選択
Development0.9511122 -
「」を選択します 適用 ボタン
-
Luma web サイトがリロードされます 独自のタグプロパティを使用.
チュートリアルを続ける際は、この手法を使用して、Luma サイトを独自のタグプロパティにマッピングし、Platform Web SDK 実装を検証します。 独自の web サイトでタグを使用する場合、これと同じ手法を使用して、実稼動 web サイトで開発タグライブラリを検証できます。
Experience Platform Debugger を使用したクライアントサイドのネットワークリクエストの検証
Debugger を使用して、Platform Web SDK 実装からトリガーされたクライアントサイドビーコンを検証し、Platform Edge Networkに送信されたデータを確認できます。
-
に移動 概要 左側のナビゲーションで、タグプロパティの詳細を表示します。
-
さあ、行きなさい Web SDK のExperience Platform 左側のナビゲーションでを表示します ネットワークリクエスト
-
を開きます イベント 行
-
次のように表示されます
web.webpagedetails.pageViewで指定したイベントタイプ 変数を更新 アクション、およびに準拠しているその他の標準変数AEP Web SDK ExperienceEventフィールドグループ
-
にスクロール ダウンします。
webオブジェクトを選択して開き、webPageDetails.name,webPageDetails.server、およびwebPageDetails.siteSection. これらは、対応するdigitalDataホームページ上のデータレイヤー変数
digitalData ホームページ上のデータレイヤー- Luma ホームページで、ブラウザー開発者ツールを開きます。 Chrome の場合、「」ボタンを選択します
F12キーボード上 - 「」を選択します コンソール タブ
- Enter
digitalDataを選択して、Enterキーボードでデータレイヤーの値を表示する
ID マップの詳細を検証することもできます。
-
資格情報を使用して Luma サイトにログインします
test@adobe.com/test -
Luma のホームページに戻ります。
-
を開きます Web SDK のExperience Platform 左側のナビゲーションの「」セクション
-
「」を選択します イベント ポップアップで詳細を開く行
-
を検索 identityMap ポップアップ内。 ここに以下が表示されます
lumaCrmIdauthenticatedState、id、および primary の 3 つのキーを持つ：
ブラウザー開発ツールを使用したクライアントサイドリクエストの検証
これらのタイプのリクエストの詳細は、ブラウザーの 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 tab キーを押して、 接続
-
今のところ空です
-
を更新 Luma ホームページ とチェック Experience Platformデバッガー ここでも、データを確認します。
この時点では、データストリームでを有効にしていないため、Adobeアプリケーションに送信される Platform Edge Networkリクエストを表示できません。 今後のレッスンでは、Edge Trace を使用して、Adobeアプリケーションやイベント転送への送信サーバーサイドリクエストを表示します。 ただし、最初に、Platform Edge Networkが行ったサーバーサイドリクエストを検証する別のツールであるAdobe Experience Platform Assurance について説明します。