Debugger を使用した Web SDK の実装のExperience Platform
Adobe Experience Platform Debuggerを使用して Platform Web SDK の実装を検証する方法について説明します。
Experience Platformデバッガーは、Web ページに実装されているAdobeテクノロジーを確認するのに役立つ、Chrome および Firefox ブラウザーで使用できる拡張機能です。 使用するブラウザーのバージョンをダウンロードします。
以前のAdobe Experience Cloud Debugger とは異なるデバッガーを使用したことがない場合は、次の 5 分間の概要ビデオを視聴できます。
このレッスンでは、 Adobe Experience Platform Debugger拡張 タグプロパティを Luma デモサイト を独自のプロパティに追加します。
この手法は環境の切り替えと呼ばれ、後で独自の Web サイトでタグを使用する際に役立ちます。 実稼働用 Web サイトをブラウザーに読み込むには、 開発 タグ環境 この機能を使用すると、通常のコードリリースとは独立し、自信を持ってタグを変更し、検証できます。 結局、マーケティングタグリリースを通常のコードリリースから分離できることは、顧客がタグを最初に使用する主な理由の 1 つです。
学習内容
このレッスンを終了すると、デバッガーを使用して次のことをおこなえるようになります。
- 代替タグライブラリの読み込み
- XDM オブジェクトが期待どおりにデータを取得して送信していることを検証します。
前提条件
データ収集タグと Luma デモサイト とは、このチュートリアルの以前のレッスンを完了していること。
Debugger を使用した代替タグライブラリの読み込み
このチュートリアルでは、公開ホストバージョンの Luma デモ Web サイト. ホームページを開き、ブックマークします。
Experience Platformデバッガーには、既存のタグライブラリを別のタグライブラリに置き換えることができるクールな機能があります。 この手法は検証に役立ち、このチュートリアルで多くの実装手順をスキップできます。
-
Luma サイトが開いていることを確認し、「デバッガー拡張機能」Experience Platformを選択します。
-
デバッガーが開き、ハードコードされた実装の詳細が表示されます。これは、このチュートリアルとは無関係です（デバッガーを開いた後に Luma サイトをリロードする必要が生じる場合があります）。
-
デバッガーが「Luma に接続済み」をクリックし、「ロック「 」アイコンを使用して、デバッガーを Luma サイトにロックします。
-
を選択します。 ログイン ボタンをクリックし、AdobeID を使用してAdobe Experience Cloudにログインします。
-
次に移動： Experience Platformタグ 左のナビゲーションで
-
を選択します。 設定 タブ
-
の右側に表示されます。 ページ埋め込みコード をクリックし、 アクション ドロップダウンと選択 置換
-
認証されたので、Debugger は使用可能なタグのプロパティと環境を取り込みます。 を選択します。
Web SDK Courseプロパティ -
を選択します。
Development環境 -
を選択します。 適用 ボタン
-
Luma Web サイトがリロードされます。 をタグプロパティと共に使用.
チュートリアルを続ける際は、この方法を使用して、Luma サイトを独自のタグプロパティにマッピングし、Platform Web SDK 実装を検証します。 実稼動用 Web サイトでタグの使用を開始する場合、同じ方法を使用して変更を検証できます。
Debugger での実装の検証Experience Platform
デバッガーを使用すると、Platform Web SDK の実装を検証し、Platform Edge Network に送信されるデータを表示することができます。
-
に移動します。 概要 左側のナビゲーションで、タグプロパティの詳細を表示します。
-
次に移動： Experience PlatformWeb SDK 左側のナビゲーションで、 ネットワークリクエスト
-
を開きます。 イベント 行（このスクリーンショットに表示されるリクエストの数が自分より多い場合は、今後のレッスンからのリクエストも含まれ、現時点では無視できます）
-
表示方法
web.webpagedetails.pageViewイベントタイプを指定した イベントの送信 アクション、およびAEP Web SDK ExperienceEvent Mixin形式
-
下にスクロールして、
webオブジェクトを選択し、開いて検査します。webPageDetails.name,webPageDetails.server、およびwebPageDetails.siteSection. ホームページ上の対応する digitalData データレイヤー変数に一致する必要があります。
また、ID マップの詳細を検証することもできます。
-
資格情報（
test@adobe.com／test）を使用して Luma サイトにログインします。 -
Luma のホームページに戻ります。
-
を開きます。 Experience PlatformWeb SDK セクション（左側のナビゲーション）
-
を選択します。 イベント 行を使用して詳細をポップアップで開く
-
を検索します。 identityMap をクリックします。 ここで、
lumaCrmId認証済み状態、id、プライマリの 3 つのキーを持つ
ブラウザー開発ツールを使用した検証
これらのタイプのリクエストの詳細は、ブラウザーの Web 開発者ツールにも表示されます ネットワーク 」タブ（Web サイトがタグライブラリを読み込むと仮定）に表示されます。
-
ブラウザーの Web 開発者ツールを開きます。 ネットワーク 「 」タブをタブに移動して、ページをリロードします。 次を含む呼び出しのフィルター
/ee呼び出しを見つけるには、呼び出しを選択し、 ヘッダー タブ、および ペイロード タブ
-
次に移動： 応答 」タブに移動し、ECID 値が応答にどのように含まれるかを確認します。 この値をコピーします。次の演習では、この値を使用して縦断情報を検証します。
note note NOTE 上のスクリーンショットと同じ量のペイロードリクエストが表示されない場合があります。 この格差は、今後の教訓によるものです。 Target の設定 は、スクリーンショットの撮影時に完了しました。 現時点では、この違いは無視できます。
ページで XDM オブジェクトが実行されるようになりました。また、データ収集の検証方法を知っていれば、Platform Web SDK を使用して個々のAdobeアプリケーションを設定する準備が整いました。