ストリーミングデータの取り込み

最終更新日: 2023-09-25
  • 作成対象:
  • Beginner
    Intermediate
    Developer

このレッスンでは、Adobe Experience Platform Web SDK を使用してデータをストリーミングします。

データ収集インターフェイスでは、主に次の 2 つの作業を実行する必要があります。

  • Web サイトからAdobe Edgeネットワークに訪問者のアクティビティに関するデータを送信するには、Luma Web サイトに Web SDK を実装する必要があります。 タグ(以前の Launch)を使用して、シンプルな実装をおこないます。

  • Edge ネットワークにデータを転送する場所を指示するデータストリームを設定する必要があります。 データをアドビの Luma Web Events データセットを Platform サンドボックスに含めます。

データエンジニア このチュートリアル以外で、ストリーミングデータを取り込む必要があります。 Adobe Experience Platform Web または Mobile SDK を実装する場合、通常、Web またはモバイルの開発者がデータレイヤーの作成とタグプロパティの設定に関与します。

演習を開始する前に、次の 2 つの短いビデオを見て、ストリーミングデータ取り込みと Web SDK の詳細を確認してください。

メモ

このチュートリアルでは、Web SDK を使用した Web サイトからのストリーミング取り込みに焦点を当てていますが、 Adobeモバイル SDK, Apache Kafka Connectなどのメカニズムを使用できます。

必要な権限

Adobe Analytics の 権限の設定 レッスンでは、このレッスンを完了するために必要なすべてのアクセス制御を設定します。

データストリームの設定

まず、データストリームを設定します。 データストリームは、Web SDK 呼び出しからデータを受け取った後、データをどこに送信するかをAdobe Edgeネットワークに伝えます。 例えば、Experience Platform、Adobe Analytics、Adobe Targetにデータを送信しますか? データストリームは、データ収集ユーザーインターフェイス(以前の Launch)で管理され、Web SDK を使用したデータ収集にとって重要です。

次の手順で datastream:

  1. にログインします。 Experience Platformデータ収集ユーザーインターフェイス

  2. 選択 データストリーム 左のナビゲーションで

  3. を選択します。 新規データストリーム ボタンを右上に置く

    左側のナビゲーションでデータストリームを選択

  4. わかりやすい名前,と入力します。 Luma Platform Tutorial (会社の複数の担当者がこのチュートリアルを受け取る場合は、名前を末尾に追加します)。

  5. を選択します。 保存 ボタン

    データストリームに名前を付けて保存する

次の画面で、データを送信する場所を指定します。 データをExperience Platformに送信するには:

  1. オンに切り替え Adobe Experience Platform 追加のフィールドを表示します。
  2. の場合 サンドボックス​を選択します。 Luma Tutorial
  3. の場合 イベントデータセット​を選択します。 Luma Web Events Dataset
  4. 他のAdobeアプリケーションを使用する場合は、他のセクションを自由に参照して、これらの他のソリューションの Edge 設定で必要な情報を確認してください。 Web SDK は、データをExperience Platformにストリーミングする目的だけでなく、他のAdobeアプリケーションで使用される以前の JavaScript ライブラリをすべて置き換える目的で開発されました。 Edge 設定は、データの送信先となる各アプリケーションのアカウント詳細を指定するために使用します。
  5. 保存」を選択します
    データストリームの設定と保存

エッジ設定が保存されると、開発、ステージング、実稼動用に 3 つの環境が作成されたことを示す画面が表示されます。 その他の開発環境を追加できます。
各 Edge 設定には複数の環境を設定できます
3 つの環境すべてに、入力した Platform の詳細が含まれます。 ただし、これらの詳細は、環境ごとに異なる設定が可能です。 例えば、各環境で異なる Platform サンドボックスにデータを送信するように設定できます。 このチュートリアルでは、データストリームをさらにカスタマイズすることはしません。

Web SDK 拡張機能のインストール

プロパティを追加する

まず、タグプロパティ(以前のタグプロパティ)を作成する必要があります。 プロパティは、Web ページから詳細を収集して様々な場所に送信するために必要な、すべての JavaScript、ルールおよびその他の機能のコンテナです。

プロパティを作成するには:

  1. に移動します。 プロパティ 左のナビゲーションで
  2. を選択します。 新しいプロパティ ボタン
    新しいプロパティを追加
  3. 名前,と入力します。 Luma Platform Tutorial (会社の複数の担当者がこのチュートリアルを受け取る場合は、名前を末尾に追加します)。
  4. ドメイン,と入力します。 enablementadobe.com (後述)
  5. 保存」を選択します
    プロパティの詳細

Web SDK 拡張機能の追加

これで、プロパティが作成され、拡張機能を使用して Web SDK を追加できます。 拡張機能は、データ収集インターフェイスと機能を拡張するコードのパッケージです。 拡張機能を追加するには:

  1. タグプロパティを開く
  2. に移動します。 拡張機能 左のナビゲーションで
  3. 次に移動: カタログ タブ
  4. タグには、多くの拡張機能を使用できます。 キーワードでカタログをフィルター Web SDK
  5. Adobe Analytics の Adobe Experience Platform Web SDK 拡張機能の場合は、 インストール ボタン
    Adobe Experience Platform Web SDK 拡張機能のインストール
  6. Web SDK 拡張機能にはいくつかの設定を使用できますが、このチュートリアルで設定するのは 2 つだけです。 を更新します。 Edge ドメイン から data.enablementadobe.com. この設定を使用すると、Web SDK の実装でファーストパーティ cookie を設定できます(推奨)。 このレッスンの後半では、 enablementadobe.com ドメインをタグプロパティに追加します。 の CNAME enablementadobe.com ドメインは既に次のように設定されています: data.enablementadobe.com がAdobeサーバーに転送されます。 独自の Web サイトに Web SDK を実装する場合、例えば、独自のデータ収集目的(例: )で CNAME を作成する必要があります。 data.YOUR_DOMAIN.com
  7. 次から: Datastream ドロップダウンで、 Luma Platform Tutorial データストリーム。
  8. その他の設定オプションを自由に確認できます(ただし、変更しないでください)。 次に、「 保存

データを送信するルールを作成する

次に、データを Platform に送信するルールを作成します。 ルールとは、タグに何らかの処理を指示するイベント、条件およびアクションを組み合わせたものです。 ルールを作成するには:

  1. に移動します。 ルール 左のナビゲーションで
  2. を選択します。 新規ルールの作成 ボタン
    ルールの作成
  3. ルール名を設定します。All Pages - Library Loaded
  4. の下 イベント​を選択し、 追加 ボタン
    ルールに名前を付けてイベントを追加する
  5. 以下を使用します。 コア 拡張 を選択し、 読み込まれたライブラリ(ページ上部) として イベントタイプ. この設定は、Launch ライブラリがページに読み込まれるたびにルールが起動することを意味します。
  6. 選択 変更を保持 メインのルール画面に戻るには
    「Library Loaded」イベントの追加
  7. 終了 条件 空の場合、このルールを指定した名前に従って、すべてのページで実行する必要があるので、
  8. の下 アクション​を選択し、 追加 ボタン
  9. 以下を使用します。 Adobe Experience Platform Web SDK 拡張 を選択し、 イベントの送信 として アクションタイプ
  10. 右側で、「 」を選択します。 web.webpagedetails.pageViews から タイプ ドロップダウン。 これは、 Luma Web Events Schema
  11. 選択 変更を保持 メインのルール画面に戻るには
    「イベントを送信」アクションの追加
  12. 選択 保存 ルールを保存するには
    ルールの保存

ライブラリでのルールの公開

次に、ルールを開発環境に公開し、動作することを確認できます。

ライブラリを作成するには:

  1. に移動します。 公開フロー 左のナビゲーションで
  2. 選択 ライブラリを追加
    「ライブラリを追加」を選択します。
  3. 名前,と入力します。 Luma Platform Tutorial
  4. 環境​を選択します。 Development
  5. を選択します。 変更されたリソースをすべて追加 」ボタンをクリックします。 ( Adobe Experience Platform Web SDK 拡張機能と All Pages - Library Loaded ルールの場合は、 コア 拡張機能が追加されました。この拡張機能には、すべての Launch Web プロパティで必要な基本 JavaScript が含まれています。)
  6. を選択します。 開発用に保存およびビルド ボタン
    ライブラリの作成とビルド

ライブラリのビルドには数分かかる場合があり、完了すると、ライブラリ名の左側に緑の点が表示されます。
ビルドが完了しました

ご覧のように 公開フロー 画面、公開プロセスには、このチュートリアルの範囲外の多くの点があります。 開発環境で 1 つのライブラリを使用するだけです。

リクエスト内のデータの検証

Adobe Experience Platform Debuggerを追加

Experience Platformデバッガーは、Web ページに実装されているAdobeテクノロジーを確認するのに役立つ、Chrome および Firefox ブラウザーで使用できる拡張機能です。 使用するブラウザーのバージョンをダウンロードします。

以前に Debugger を使用したことがなく、これが以前のAdobe Experience Cloud Debugger とは異なる場合は、この 5 分間の概要ビデオを視聴できます。

Luma の Web サイトを開きます。

このチュートリアルでは、Luma デモ Web サイトの公開ホストバージョンを使用します。 それを開いて、ブックマークに追加します。

  1. 新しいブラウザータブで、 Luma Web サイト.
  2. このチュートリアルの残りの部分で使用するページをブックマークに追加します。

このホスト Web サイトは、 enablementadobe.com (内) ドメイン 最初のタグプロパティ設定のフィールドと、使用理由 data.enablementadobe.com を Adobe Experience Platform Web SDK 拡張子。 ほら、計画があったのよ!

Luma のホームページ

Experience Platformデバッガーを使用してタグプロパティにマッピングする

Experience PlatformDebugger には、既存のタグプロパティを別のタグプロパティに置き換えることができる優れた機能があります。 これは検証に役立ち、このチュートリアルで多くの実装手順をスキップできます。

  1. Luma サイトが開いていることを確認し、「デバッガー拡張機能」Experience Platformを選択します。

  2. デバッガーが開き、ハードコードされた実装の詳細が表示されます。これは、このチュートリアルとは無関係です(デバッガーを開いた後に Luma サイトをリロードする必要が生じる場合があります)。

  3. デバッガーが「Luma に接続済み」をクリックし、「ロック「 」アイコンを使用して、デバッガーを Luma サイトにロックします。

  4. を選択します。 ログイン ボタンをクリックして認証します。

  5. 次に移動: Launch 左のナビゲーションで

  6. 「設定」タブを選択します。

  7. の右側に表示されます。 ページ埋め込みコード​をクリックし、 アクション ドロップダウンと選択 置換
    アクション/置換を選択します。

  8. 認証されているので、デバッガーは使用可能な Launch のプロパティおよび環境を取り込みます。 を選択します。 Luma Platform Tutorial プロパティ

  9. を選択します。 Development 環境

  10. を選択します。 適用 ボタン
    代替タグのプロパティを選択

  11. Luma Web サイトがリロードされます。 をタグプロパティと共に使用. 助けて、私はハッキングされた! 冗談です。
    タグプロパティが置き換えられました

  12. に移動します。 概要 左側のナビゲーションで、 Launch プロパティ
    「概要」タブ

  13. 次に移動: AEP Web SDK 左側のナビゲーションで、 ネットワークリクエスト

  14. を開きます。 イベント

    Adobe Experience Platform Web SDK リクエスト

  15. 表示方法 web.webpagedetails.pageView イベントタイプを指定した イベントの送信 アクション、および AEP Web SDK ExperienceEvent Mixin 形式
    イベントの詳細

  16. これらのタイプのリクエストの詳細は、ブラウザーの Web 開発者ツールにも表示されます ネットワーク タブをクリックします。 ページを開き、ページをリロードします。 次を含む呼び出しのフィルター interact 呼び出しを見つけるには、呼び出しを選択し、 ヘッダー タブ、 リクエストペイロード 領域。
    「ネットワーク」タブ

  17. 次に移動: 応答 」タブに移動し、ECID 値が応答にどのように含まれるかを確認します。 この値をコピーします。次の演習では、この値を使用して縦断情報を検証します。
    「ネットワーク」タブ

データの検証のExperience Platform

Platform でデータがランディングされていることを検証するには、 Luma Web Events Dataset. ( ストリーミングデータ取り込みと呼ばれていますが、今はバッチで届くと言っています! リアルタイムでプロファイルにストリーミングされるので、リアルタイムのセグメント化やアクティブ化に使用できますが、15 分ごとにバッチでデータレイクに送信されます。)

データを検証するには、次の手順に従います。

  1. Platform ユーザーインターフェイスで、に移動します。 データセット 左のナビゲーションで
  2. を開きます。 Luma Web Events Dataset をクリックし、バッチが到着したことを確認します。 忘れずに、15 分ごとに送信されるので、バッチが表示されるのを待つ必要が生じる場合があります。
  3. を選択します。 データセットをプレビュー ボタン
    データセットを開く
  4. プレビューモーダルで、左側のスキーマの異なるフィールドを選択して、これらの特定のデータポイントをプレビューする方法に注意してください。
    フィールドをプレビュー

また、新しいプロファイルが表示されていることを確認することもできます。

  1. Platform ユーザーインターフェイスで、に移動します。 プロファイル 左のナビゲーションで
  2. を選択します。 ECID 名前空間を作成し、ECID 値を検索します(応答からコピーします)。 プロファイルには、ECID とは別に独自の ID が割り当てられます。
  3. を選択します。 プロファイル ID プロファイルを開くには
    プロファイルを検索して開く
  4. を選択します。 イベント タブをクリックして、表示したページを確認します。
    プロファイルイベント\

イベントにカスタムデータを追加する

ページ名のデータ要素の作成

  1. データ収集タグインターフェイスで、 Luma Platform Tutorial プロパティを開くには、 作業ライブラリを選択 ドロップダウンを選択し、 Luma Platform Tutorial ライブラリ。 この設定により、ライブラリに追加の更新を簡単に公開できます。

  2. 次に移動: データ要素 左のナビゲーションで

  3. を選択します。 新しいデータ要素を作成 ボタン

    新しいデータ要素の作成

  4. 名前,と入力します。 Page Name

  5. データ要素タイプ​を選択します。 JavaScript Variable

  6. JavaScript 変数名,と入力します。 digitalData.page.pageInfo.pageName

  7. 値の形式を標準化するのに役立つように、 強制的に小文字に変換値 および クリーンテキスト

  8. 次を確認します。 Luma Platform Tutorial が作業ライブラリとして選択されています

  9. 選択 ライブラリに保存
    ページ名のデータ要素の作成

ページ名を XDM オブジェクトデータ要素にマッピングします

次に、ページ名を Web SDK にマッピングします。

重要

このタスクを完了するには、ユーザーが最初に Prod サンドボックスにアクセスできることを確認する必要があります。 別の製品プロファイルから Prod Sandbox へのアクセス権をまだ持っていない場合は、すばやく Luma Tutorial Platform プロファイルを作成し、権限項目を追加する サンドボックス > Prod. その後、データ要素ページで Shift キーを押しながらリロードして、キャッシュをクリアします。
製品サンドボックスの追加

次の日: データ要素 ページ:

  1. 新しいデータ要素の作成
  2. 名前,と入力します。 XDM Object
  3. 拡張​を選択します。 Adobe Experience Platform Web SDK
  4. データ要素タイプ​を選択します。 XDM object
  5. サンドボックス​を選択し、 Luma Tutorial sandbox
  6. スキーマ​を選択し、 Luma Web Events Schema
  7. を選択します。 web.webPageDetails.name フィールド
  8. 、「 」アイコンを選択してデータ要素選択モーダルを開き、 Page Name データ要素
  9. 選択 ライブラリに保存
    ページ名を XDM オブジェクトデータ要素にマッピングします

同じ手順を使用して、Web サイト上の追加のカスタムデータを XDM フィールドにマッピングします。

「Send Event」アクションに XDM データを追加する

これで、データが XDM フィールドにマッピングされ、「イベントを送信」アクションに含めることができます。

  1. 次に移動: ルール screen
  2. を開きます。 All Pages - Library Loaded ルール
  3. を開きます。 Adobe Experience Platform Web SDK - Send Event アクション
  4. XDM データ、「 」アイコンを選択してデータ要素選択モーダルを開き、 XDM Object データ要素
  5. を選択します。 変更を保持 ボタン
    「Send Event」アクションに XDM データを追加する
  6. さて、君は Luma Platform Tutorial 最後のいくつかの演習の作業用ライブラリとして選択されたので、最近の変更はライブラリに直接保存されました。 公開フロー画面で変更を公開する代わりに、青いボタンのドロップダウンを開いて「 」を選択するだけで済みます。 ライブラリに保存してビルドする
    ライブラリに保存してビルドする

これにより、先ほど 3 つの変更を加えた新しいタグライブラリが構築されます。

XDM データの検証

これで、前述のようにデバッガーを使用してタグプロパティにマッピングした状態で、Luma ホームページを再読み込みし、ページ名フィールドがリクエストに入力されることを確認できます。
XDM データの検証

また、データセットとプロファイルをプレビューして、Platform で受け取ったページ名データを検証することもできます。

追加の ID の送信

Web SDK 実装では、Experience CloudID(ECID) を主識別子として持つイベントが送信されます。 ECID は Web SDK によって自動的に生成され、デバイスおよびブラウザーごとに一意です。 1 人の顧客が使用しているデバイスとブラウザーに応じて、複数の ECID を持つことができます。 では、この顧客の全体像を把握し、その顧客のオンラインアクティビティを CRM、ロイヤリティ、オフライン購入の各データにリンクさせるにはどうすればよいですか? それには、セッション中に追加の ID を収集し、ID ステッチを通じてプロファイルを決定的にリンクします。

ECID と CRM ID を、 ID をマッピング レッスン。 Web SDK を使用して CRM ID を収集しましょう。

CRM ID にデータ要素を追加

まず、データ要素に CRM ID を格納します。

  1. タグインターフェイスで、という名前のデータ要素を追加します。 CRM Id
  2. データ要素タイプ​を選択します。 JavaScript 変数
  3. JavaScript 変数名,と入力します。 digitalData.user.0.profile.0.attributes.username
  4. を選択します。 ライブラリに保存 ボタン (Luma Platform Tutorial は、作業ライブラリである必要があります )
    CRM ID にデータ要素を追加

CRM ID を ID マップデータ要素に追加する

CRM ID 値を取り込んだので、この値を、 ID マップ データ要素:

  1. という名前のデータ要素を追加します。 Identities

  2. 拡張​を選択します。 Adobe Experience Platform Web SDK

  3. データ要素タイプ​を選択します。 ID マップ

  4. 名前空間,と入力します。 Luma CRM Id( これは、 名前空間 前のレッスンで作成した

    警告

    Adobe Experience Platform Web SDK 拡張機能バージョン 2.2 では、Platform アカウント内の実際の値を使用して、事前入力されたドロップダウンから「 Namespace 」を選択できます。 残念ながら、この機能はまだ「サンドボックス対応」ではないので、 Luma CRM Id の値がドロップダウンに表示されない場合があります。 これにより、この演習を完了できなくなる場合があります。 確認後、回避策を投稿します。

  5. ID、「 」アイコンを選択してデータ要素選択モーダルを開き、 CRM Id データ要素

  6. 認証済み状態​を選択します。 認証済み

  7. 終了 プライマリ オフ. Luma Web サイトのほとんどの訪問者には CRM ID が存在しないので、間違いなく ECID をプライマリ識別子として上書きしない. ECID 以外のものをプライマリ識別子として使用するのは、まれなケースです。 通常、これらの手順のデフォルトの設定は言及しませんが、後で独自の実装で頭痛を避けるために、この設定を呼び出しています。

  8. を選択します。 ライブラリに保存 ボタン (Luma Platform Tutorial は、作業ライブラリである必要があります )
    CRM ID を ID マップデータ要素に追加する

メモ

複数の識別子を渡すには、 ID マップ データタイプ。

XDM オブジェクトへの ID マップデータ要素の追加

更新が必要なデータ要素として、XDM オブジェクトデータ要素が 1 つ以上あります。 この 1 つの ID を渡すために 3 つの異なるデータ要素を更新する必要があるとは奇妙に思えるかもしれませんが、このプロセスは複数の ID に対して拡大・縮小するように設計されています。 このレッスンはもう少しで終わりです!

  1. XDM オブジェクトデータ要素を開きます。
  2. IdentityMap XDM フィールドを開きます。
  3. データ要素、「 」アイコンを選択してデータ要素選択モーダルを開き、 Identities データ要素
  4. さて、君は Luma Platform Tutorial 最後のいくつかの演習の作業用ライブラリとして選択されたので、最近の変更はライブラリに直接保存されました。 公開フロー画面で変更を公開する代わりに、青いボタンのドロップダウンを開いて、「 」を選択することもできます。 ライブラリに保存してビルドする
    XDM オブジェクトへの IdentityMap データ要素の追加

ID の検証

Web SDK が CRM ID を送信していることを検証するには:

  1. を開きます。 Luma Web サイト
  2. 前述の手順に従って、デバッガーを使用してタグプロパティにマッピングします。
  3. を選択します。 ログイン Luma Web サイトの右上にあるリンク
  4. 資格情報を使用してログイン test@adobe.com/test
  5. 認証が完了したら、 Debugger (Adobe Experience Platform Web SDK > ネットワークリクエスト > イベント 」と表示されます )。 lumaCrmId:
    デバッガーでの ID の検証
  6. ECID 名前空間と値を使用してユーザープロファイルを再度検索します。 プロファイルには、CRM ID とロイヤリティ ID、および名前や電話番号などのプロファイルの詳細が表示されます。 すべての ID とデータが単一のリアルタイム顧客プロファイルに結び付けられました。
    Platform での ID の検証

その他のリソース

お疲れ様でした。これは、Web SDK および Launch に関する多くの情報でした。 本格的な実装にはさらに関わりがありますが、これらは、Platform での作業を開始し、結果を確認するのに役立つ基本事項です。

メモ

これで、「ストリーミング取得」レッスンが完了したので、 Prod のサンドボックス Luma Tutorial Platform 製品プロファイル

データエンジニア ( 必要に応じて、 クエリ実行レッスン.

データアーキテクトは、以下に進むことができます。 結合ポリシー!

このページ