DocumentationExperience PlatformWeb SDK Tutorial

Stream data to Experience Platform with Web SDK

Last update: Tue Mar 05 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

CREATED FOR:

  • Beginner
  • Intermediate
  • Developer
CAUTION
We expect to publish major changes to this tutorial on Friday March 15, 2024. After that point many exercises will change and you may need to restart the tutorial from the beginning in order to complete all of the lessons.

Learn how to stream web data to Adobe Experience Platform with Platform Web SDK.

Experience Platform is the backbone of all new Experience Cloud applications, such as Adobe Real-Time Customer Data Platform, Adobe Customer Journey Analytics, and Adobe Journey Optimizer. These applications are designed to use Platform Web SDK as their optimal method of web data collection.

Experience Platform uses the same XDM schema you created earlier to capture event data from the Luma website. When that data is sent to Platform Edge Network, the datastream configuration can forward it to Experience Platform.

Learning objectives

At the end of this lesson, you will be able to:

  • Create a dataset within Adobe Experience Platform
  • Configure the datastream to send Web SDK data to Adobe Experience Platform
  • Enable streaming web data for Real-Time Customer Profile
  • Validate the data has landed both in the Platform dataset and in Real-Time Customer Profile

Prerequisites

You should have already completed the following lessons:

Create a dataset

All data that is successfully ingested into Adobe Experience Platform is persisted within the data lake as datasets. A dataset is a storage and management construct for a collection of data, typically a table, that contains a schema (columns) and fields (rows). Datasets also contain metadata that describes various aspects of the data they store.

In this exercise, you create a dataset to track content and e-commerce details for the Luma demo site.

WARNING
You must have already created the Luma Web Event Data schema, as instructed in the previous lesson, Configure an XDM schema.

  1. Go to the Experience Platform interface

  2. Confirm you are in the development sandbox you are using for this tutorial

  3. Open Datasets from the left navigation

  4. Select Create dataset

    Create schema

  5. Select the Create dataset from schema option

    Create dataset from schema

  6. Select the Luma Web Event Data schema created in the earlier lesson and then select Next

    Dataset, select schema

  7. Provide a Name and optional Description for the dataset. For this exercise, use Luma Web Event Data, then select Finish

    Dataset Name

A dataset is now configured to start collecting data from your Platform Web SDK implementation.

Configure the datastream

Now you can configure your datastream to send data to Adobe Experience Platform. The datastream is the link between your tag property, the Platform Edge Network, and the Experience Platform dataset.

  1. Open the Data Collection interface

  2. Select Datastreams from the left navigation

  3. Open the datastream you created in the Configure a datastream lesson, Luma Web SDK

    Select the Luma Web SDK datastream

  4. Select Add Service
    Add a service to the datastream

  5. Select Adobe Experience Platform as the Service

  6. Select Luma Web Event Data as the Event Dataset

  7. Select Save.

    Datastream Config

As you generate traffic in on the Luma Demo Site mapped to your tag property, the data will populate the dataset in Experience Platform!

Validate the dataset

This step is critical to make sure that the data has landed in the dataset. There are two aspects of validating data sent to the dataset.

  • Validate using Experience Platform Debugger
  • Validate using Preview Dataset
  • Validate using Query Service

Experience Platform Debugger

These steps are more or less the same as what you did in the Debugger lesson. However, since data will only be sent to Platform after you have enabled it in the datastream, you must generate some more sample data:

  1. Open the Luma demo site and select the Experience Platform Debugger extension icon

  2. Configure the Debugger to map the tag property to your Development environment, as described in the Validate with Debugger lesson

    Your Launch development environment shown in Debugger

  3. Log into the Luma site using the credentials test@adobe.com/test

  4. Return to the Luma homepage

  5. Within the Platform Web SDK network beacons shown by the debugger, select the “events” row to expand details in a pop-up

    Web SDK in Debugger

  6. Search for the “identityMap” within the pop-up. Here you should see lumaCrmId with three keys of authenticatedState, id, and primary
    Web SDK in Debugger

Now data should be populated in the Luma Web Event Data dataset and ready for ‘Preview Dataset’ validation.

Preview the dataset

To confirm that the data has landed in Platform’s data lake, a quick option is to use the Preview dataset feature. Web SDK data is micro-batched to the data lake and refreshed in the Platform interface on a periodic basis. It might take 10-15 minutes to see the data that you generated.

  1. In the Experience Platform interface, select Datasets in the left-navigation to open the Datasets dashboard.

    The dashboard lists all available datasets for your organization. Details are displayed for each listed dataset, including its name, the schema the dataset adheres to, and status of the most recent ingestion run.

  2. Select your Luma Web Event Data dataset to open its Dataset activity screen.

    Dataset Luma Web Event

    The activity screen includes a graph visualizing the rate of messages being consumed as well as a list of successful and failed batches.

  3. From the Dataset activity screen, select Preview dataset near the top-right corner of your screen to preview up to 100 rows of data. If the dataset is empty, the preview link is deactivated.

    Dataset Preview

    In the preview window, the hierarchical view of the schema for the dataset is shown on the right.

    Dataset Preview 1

INFO
Adobe Experience Platform’s query service is a more robust method to validate data in the lake, but is beyond the scope of this tutorial. For more details, see Explore data in the Platform tutorials section.

Enable the dataset and schema for Real-Time Customer Profile

The next step is to enable the dataset and schema for Real-Time Customer Profile. Data streaming from Web SDK will be one of many data sources flowing into Platform and you want to join your web data with other data sources to build 360-degree customer profiles. To learn more about Real-Time Customer Profile, watch this short video:

https://video.tv.adobe.com/v/27251?learn=on&captions=eng

CAUTION
When working with your own website and data, we recommend more robust validation of data before enabling it for Real-Time Customer Profile.

To enable the dataset:

  1. Open the dataset you created, Luma Web Event Data

  2. Select the Profile Toggle to turn it on

    Profile Toggle

  3. Confirm you want to Enable the dataset

    Profile Enable Toggle

To enable the schema:

  1. Open the schema you created, Luma Web Event Data

  2. Select the Profile Toggle to turn it on

    Profile Toggle

  3. Select Data for this schema will contain a primary identity in the identityMap field.

    note important
    IMPORTANT
    Primary identities are required in every record sent to Real-Time Customer Profile. Typically, identity fields are labeled within the schema. When using identity maps, however, the identity fields are not visible within the schema. This dialog is to confirm that you have a primary identity in mind and that you will specify it in an identity map when sending your data. As you know, Web SDK uses an identity map, and the Experience Cloud Id (ECID) is the default primary identity.

  4. Select Enable

    Profile Enable Toggle

  5. Select Save to save the updated schema

Now the schema is also enabled for profile.

IMPORTANT
Once a schema is enabled for Profile, it cannot be disabled or deleted. Also, fields cannot be removed from the schema after this point. These implications are important to keep in mind later on when you are working with your own data in your Production environment. You should be using a development sandbox in this tutorial, which can be deleted at any time.
When working with your own data, we recommend you do things in the following order:
  • First, ingest some data into your datasets.
  • Address any issues that arise during the data ingestion process (for example, data validation or mapping issues).
  • Enable your datasets and schemas for Profile
  • Re-ingest the data

Validate a profile

You can look up a customer profile in the Platform interface (or Journey Optimizer interface) to confirm that the data has landed in Real-Time Customer Profile. As the name suggests, profiles populate in real-time, so there is no delay like there was with validating data in the dataset.

First you must generate more sample data. Repeat the steps from earlier in this lesson to log into the Luma website when it is mapped to your tag property. Inspect the Platform Web SDK request to make sure it sends data with the lumaCRMId.

  1. In the Experience Platform interface, select Profiles in the left-navigation

  2. As the Identity namespace use lumaCRMId

  3. Copy & paste the value of the lumaCRMId passed in the call you inspected in the Experience Platform Debugger (probably 112ca06ed53d3db37e4cea49cc45b71e).

    Profile

  4. If there is a valid value in the Profile for lumaCRMId, a Profile ID populates in the console:

    Profile

  5. Click into the Profile ID and a Customer profile console populates. Here you can see all the identities linked to the lumaCRMId, such as the ECID:

    Customer profile

You have now enabled Platform Web SDK for Experience Platform (And Real-Time CDP! And Customer Journey Analytics! And Journey Optimizer!)!

Next: Set up Adobe Analytics

NOTE
Thank you for investing your time in learning about Adobe Experience Platform Web SDK. If you have questions, want to share general feedback, or have suggestions on future content, share them on this Experience League Community discussion post
recommendation-more-help
8cbc0fd8-ca1d-433b-9c3d-bc3f113347d4