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

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

Platformにデータをストリーミングするその他の一般的な方法

WARNING
このチュートリアルで使用されているLuma web サイトは、2026年2月16日の週に置き換えられる予定です。 このチュートリアルの一部として行われた作業は、新しいweb サイトには適用されない場合があります。

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

  • Web サイトからExperience Platform Edge ネットワークに訪問者のアクティビティに関するデータを送信するには、Luma Web サイトにWeb SDKを実装する必要があります。 タグを使用した簡単な実装を行います(以前のLaunch)

  • データストリームを設定する必要があります。これは、Edge ネットワークにデータの転送先を指示します。 Platform サンドボックスのLuma Web Events データセットにデータを送信するように設定します。

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

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

NOTE
このチュートリアルでは、Web SDKを使用するweb サイトからのストリーミング取得に焦点を当てていますが、​ モバイル SDKEdge Network Server APIHTTP APIを使用してデータをストリーミングすることもできます。

権限が必要です

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

データストリームの設定

まず、データストリームを設定します。 データストリームは、Web SDK呼び出しからデータを受け取った後、データをどこに送るべきかをExperience Platform Edge Networkに伝えます。 例えば、データをExperience Platform、Adobe Analytics、またはAdobe Targetに送信しますか? データストリームは、データ収集ユーザーインターフェイス(旧Adobe Experience Platform Launch)で管理され、Web SDKでのデータ収集に不可欠です。

Web SDK、データストリーム、Edge Network図

​ データストリーム ​を作成するには:

  1. Experience Platform Data Collection ユーザーインターフェイス ​にログインします

  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. 保存​を選択
    データストリームを設定して保存

Edge設定が保存されると、結果として表示される画面には、開発、ステージング、実稼動用に3つの環境が作成されています。 追加の開発環境を追加できます。
各Edge設定には、複数の環境を設定できます
3つの環境すべてには、入力したばかりのプラットフォームの詳細が含まれています。 ただし、これらの詳細は、環境ごとに異なる設定が可能です。 たとえば、各環境から異なる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 Experience Platform Web SDK​拡張機能で、インストール ボタンを選択します
    Adobe Experience Platform Web SDK拡張機能のインストール
  6. Web SDK拡張機能には、いくつかの設定がありますが、このチュートリアル用に設定するのは2つだけです。 Edge ドメイン​をdata.enablementadobe.comに更新します。 この設定を使用すると、Web SDKの実装で1st パーティ Cookieを設定できます。これは推奨されます。 このレッスンの後半では、enablementadobe.com ドメインのweb サイトをタグプロパティにマッピングします。 enablementadobe.comがAdobe サーバーに転送されるように、data.enablementadobe.com ドメインのCNAMEは既に設定されています。 Web SDKを独自のWeb サイトに実装する場合は、独自のデータ収集目的でCNAMEを作成する必要があります(例:data.YOUR_DOMAIN.com
  7. データストリーム ドロップダウンから、Luma Platform Tutorial データストリームを選択します。
  8. 他の設定オプションを自由に確認し(ただし、変更しないでください)、保存​を選択します

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

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

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

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

次に、ルールを開発環境に公開して、ルールが機能することを確認します。

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

  1. 左側のナビゲーションの​ 公開フロー ​に移動します
  2. ライブラリを追加」を選択
    ライブラリの追加を選択
  3. Name​に対して、Luma Platform Tutorialと入力します
  4. 環境​で、Developmentを選択します
  5. 変更されたすべてのリソースを追加」ボタンを選択します。 (Adobe Experience Platform Web SDK拡張機能とAll Pages - Library Loaded規則に加えて、Core拡張機能も追加され、すべてのLaunch web プロパティで必要なベース JavaScriptが含まれています)。
  6. 開発用に保存してビルド」ボタンを選択します
    ライブラリの作成と作成

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

公開フロー画面で見ることができるように、このチュートリアルの範囲を超える公開プロセスには、さらに多くのものが含まれています。 開発環境で単一のライブラリを使用するだけです。

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

Adobe Experience Platform Debuggerを追加

Experience Platform Debuggerは、Chromeで利用できる拡張機能で、web ページに実装されているAdobe テクノロジを確認するのに役立ちます。 お好みのブラウザーのバージョンをダウンロードします。

デバッガーをまだ使用したことがない場合、およびこれが古いAdobe Experience Cloud デバッガーとは異なる場合は、この5分間の概要動画をご覧ください。

Luma web サイトを開く

このチュートリアルでは、公開されているLuma デモ web サイトを使用します。 開いてブックマークを付けます:

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

このホストされているweb サイトでは、最初のタグプロパティ設定のenablementadobe.com ドメイン ​ フィールドにを使用し、data.enablementadobe.comAdobe Experience Platform Web SDK拡張機能でを1st パーティドメインとして使用した理由を説明します。 やっぱり計画はあったよ!

Luma ホームページ

Experience Platform Debuggerを使用して、タグプロパティにマッピングします

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

  1. Luma サイトを開いて、Experience Platform Debugger拡張機能アイコンを選択します

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

  3. デバッガーが下の図のように「Luma​に接続されています」であることを確認し、「lock」アイコンを選択してデバッガーを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でのデータの検証

Luma Web Events Datasetに到着するデータのバッチを確認して、データがPlatformに着陸していることを検証できます。 (ストリーミングデータ収集と呼ばれていますが、バッチで取得すると言っています。 リアルタイムでプロファイルにストリーミングされるため、リアルタイムのセグメンテーションやアクティベーションに使用できますが、データレイクには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. Name​として、Page Nameと入力します

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

  6. JavaScript変数名​として、digitalData.page.pageInfo.pageNameと入力します

  7. 値の形式を標準化するには、小文字の値を強制​および​ テキストを整理 ​のチェックボックスをオンにします

  8. Luma Platform Tutorialが作業ライブラリとして選択されていることを確認してください

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

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

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

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

データ要素 ページ:

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

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

イベントを送信アクションにXDM データを追加する

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

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

先ほどの3つの変更を加えて新しいタグライブラリを構築します。

XDM データの検証

これで、Luma ホームページをリロードできるようになりました。先ほど説明したように、デバッガーを使用してタグプロパティにマッピングしながら、ページ名フィールドがリクエストに入力されていることを確認してください。
XDM データの検証

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

追加IDを送信

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

思い出すと、Map Identities レッスンで、ECIDとCRM IDをweb データのIDとして使用すると言いました。 Web SDKでCRM IDを収集しましょう。

CRM IDのデータ要素の追加

まず、CRM IDをデータ要素に保存します。

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

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

CRM Id値を取得したので、それをID マップ ​ データ要素と呼ばれる特殊なデータ要素タイプに関連付ける必要があります。

  1. データ要素Identitiesを追加

  2. 拡張機能​として、Adobe Experience Platform Web SDK​を選択します

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

  4. 名前空間​として、前のレッスンで作成したLuma CRM Id名前空間であるを入力します

    note warning
    WARNING
    Adobe Experience Platform Web SDK拡張機能バージョン 2.2では、Platform アカウントの実際の値を使用して、事前入力されたドロップダウンから名前空間を選択できます。 残念ながら、この機能はまだ「サンドボックス対応」ではないため、Luma CRM Id値がドロップダウンに表示されない場合があります。 これにより、この演習を完了できなくなる可能性があります。 確認したら、回避策を投稿します。
  5. ID​として、アイコンを選択してデータ要素の選択モーダルを開き、CRM Id データ要素を選択します

  6. 認証状態​として、認証済み​を選択します

  7. プライマリ​を確認

    note tip
    TIP
    Adobeでは、Luma CRM Idなどの個人を表すIDをprimaryIDとして送信することをお勧めします。
    ID マップに人物識別子(例:Luma CRM Id)が含まれている場合、その人物識別子は​ プライマリ ​ IDになります。 それ以外の場合、ECIDは​ プライマリ ​IDになります。
  8. ライブラリに保存」ボタンを選択します(Luma Platform Tutorialは作業中のライブラリである必要があります)
    ID マップ データ要素にCRM IDを追加

NOTE
ID マップ ​ データ型を使用して、複数の識別子を渡すことができます。

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

更新する必要があるデータ要素がもうひとつあります。それが、XDM Object データ要素です。 この1つのIDを渡すために3つのデータ要素を更新する必要があるのは奇妙に思えるかもしれませんが、このプロセスは複数のIDに対して拡張するように設計されています。 心配しないでください、私たちはこのレッスンをほぼ完了しました!

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

IDの検証

CRM IDがWeb SDKから送信されていることを検証するには、次の手順を実行します。

  1. Luma web サイトを開く
  2. 前述の手順に従って、デバッガーを使用してタグプロパティにマッピングします
  3. Luma web サイトの右上にある​ログイン リンクを選択します
  4. 資格情報test@test.com/testを使用してログインします
  5. 認証が完了したら、デバッガー(Adobe Experience Platform Web SDK > Network Requests > events)でExperience Platform Web SDK呼び出しを調べ、lumaCrmIdを確認します。
    デバッガーでIDを検証する
  6. ECID名前空間と値を使用して、ユーザープロファイルを再度検索します。 プロファイルには、CRM ID、ロイヤルティ ID、名前や電話番号などのプロファイルの詳細も表示されます。 あらゆるIDとデータをつなぎ合わせて、単一のリアルタイム顧客プロファイルを構築しました。
    Platform でIDを検証します

その他のリソース

お疲れ様でした。 Web SDKとAdobe Experience Platform Launchの。 本格的な実装にはさらに多くの要素が関わっていますが、基本は次のとおりです。Platformで開始して結果を確認する際に役立ちます。

NOTE
ストリーミング取り込みレッスンを完了したので、製品プロファイルから製品Luma Tutorial Platform サンドボックスを削除できます

データエンジニアは、実行クエリのレッスン ​にスキップできます。

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

recommendation-more-help
513160b6-bf42-4c58-abdd-4f817b1cccad