DocumentationExperience PlatformWeb SDK Tutorial

Stream data to Experience Platform with Web SDK

Last update: Fri May 31 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

CREATED FOR:

  • Beginner
  • Intermediate
  • Developer

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.

Web SDK and Adobe Experience Platform diagram

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
  • Ingest sample loyalty program data into Platform
  • Build a simple Platform audience

Prerequisites

To complete this lesson, you must first:

  • Have access to an Adobe Experience Platform application like Real-Time Customer Data Platform, Journey Optimizer, or Customer Journey Analytics
  • Complete the earlier lessons in the Initial Configuration and Tags Configuration sections of this tutorial.
NOTE
If you don’t have any Platform applications, you can skip this lesson or read along.

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.

Let’s set up a dataset for your Luma web event data:

  1. Go to the Experience Platform or Journey Optimizer interface

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

  3. Open Data Management > 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 on the Luma Demo Site mapped to your tag property, the data populates 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 Data Management > 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

Query the data

  1. In the Experience Platform interface, select Data Management > Queroes in the left-navigation to open the Queries screen.
  2. Select Create query
  3. First, run a query to see all of the names of the tables in the data lake. Enter SHOW TABLES in the query editor and click the play icon to rn the query.
  4. In the results, notice how the name of the table is something like luma_web_event_data
  5. Now query the table with a simple query referencing your table (note that by default the query will be limited to 100 results): SELECT * FROM "luma_web_event_data"
  6. After a few moments you should see sample records of your web data.
ERROR
If you get a “Table not provisioned” error, double-check the name of your table. It could also be that the micro-batch of data has not yet landed in the data lake. Try again in 10-15 minutes.
INFO
For more details about Adobe Experience Platform’s query service, see Explore data in the Platform tutorials section.

Enable the dataset and schema for Real-Time Customer Profile

For customers of Real-Time Customer Data Platform and Journey Optimizer, 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 with the Experience Cloud Id (ECID) as the default primary identity and an authenticated id as the primary identity when available.

  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 without resetting or deleting the entire sandbox. Also, fields cannot be removed from the schema after this point.
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, if needed

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 Customer > Profiles in the left-navigation

  2. As the Identity namespace use lumaCRMId

  3. Copy & paste the value of the lumaCRMId passed in the call that you inspected in the Experience Platform Debugger, in this case 112ca06ed53d3db37e4cea49cc45b71e.

    Profile

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

    Profile

  5. To view the full Customer Profile for each ID, select the Profile ID in the main window.

    note note
    NOTE
    Note you can select the hyperlink of the Profile ID, or if you select the row then a right menu opens where you can select the Profile ID hyperlink
    Customer profile

    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 Journey Optimizer! And Customer Journey Analytics!).

Create a Loyalty schema and ingest sample data

Completion of this exercise is expected for customers of Real-Time Customer Data Platform and Journey Optimizer.

When Web SDK data is ingested into Adobe Experience Platform, it can be enriched by other data sources you have ingested into Platform. For example, when a user logs into the Luma site, an identity graph is constructed in Experience Platform and all other profile-enabled datasets can potentially be joined together to build Real-Time Customer Profiles. To see this in action, quickly create another dataset in Adobe Experience Platform with some sample loyalty data so that you can use Real-Time Customer Profiles with Real-Time Customer Data Platform and Journey Optimizer. Since you have already done similar exercises, the instructions will be brief.

Create the loyalty schema:

  1. Create a new schema

  2. Choose Individual Profile as the base class

  3. Name the schema Luma Loyalty Schema

  4. Add the Loyalty Details field group

  5. Add the Demographic Details field group

  6. Select the Person ID field and mark it as an Identity and Primary identity using the Luma CRM Id Identity namespace.

  7. Enable the schema for Profile. If you can’t find the Profile toggle, try clicking on the schema name on the top left.

  8. Save the schema

    Loyalty schema

To create the dataset and ingest the sample data:

  1. Create a new dataset from the Luma Loyalty Schema

  2. Name the dataset Luma Loyalty Dataset

  3. Enable the dataset for Profile

  4. Download the sample file luma-loyalty-forWeb.json

  5. Drag-and-drop the file into your dataset

  6. Confirm that the data successfully ingested

    Loyalty schema

Create an audience

Audiences group profiles together around common traits. Build a quick audience you can use in your web campaign:

  1. In the Experience Platform or Journey Optimizer interface, go to Customer > Audiences in the left navigation

  2. Select Create audience

  3. Select Build rule

  4. Select Create

    Create an audience

  5. Select Attributes

  6. Find the Loyalty > Tier field and drag it onto the Attributes section

  7. Define the audience as users whose tier is gold

  8. Name the audience Luma Loyalty Rewards – Gold Status

  9. Select Edge as the Evaluation method

  10. Select Save

    Define the audience

Since this is a very simple audience, we can use the Edge evaluation method. Edge audiences evaluate on the edge, so in the same request made by the Web SDK to Platform Edge Network, we can evaluate the audience definition and confirm immediately if the user will qualify.

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, please share them on this Experience League Community discussion post
recommendation-more-help
8cbc0fd8-ca1d-433b-9c3d-bc3f113347d4