In this lesson, you will stream data using the Adobe Experience Platform Web SDK.
There are two main tasks we must complete in the Data Collection interface:
We must implement Web SDK on the Luma website to send data about visitor activity from the website to the Adobe Edge network. We will do a simple implementation using tags (formerly Launch)
We must configure a datastream, which tells the Edge network where to forward the data. We will configure it to send the data to our
Luma Web Events dataset in our Platform sandbox.
Data Engineers will need to ingest streaming data outside of this tutorial. When implementing Adobe Experience Platform’s Web or Mobile SDKs, typically a web or mobile developer is involved in the data layer creation and tag property configuration.
Before you begin the exercises, watch these two short videos to learn more about streaming data ingestion and Web SDK:
In the Configure Permissions lesson, you set up all the access controls required to complete this lesson.
First we will configure the datastream. A datastream tells the Adobe Edge network where to send the data after receiving it from the Web SDK call. For example, do you want to send the data to Experience Platform, Adobe Analytics, or Adobe Target? Datastreams are managed in the Data Collection user interface (formerly Launch) and are critical to data collection with Web SDK.
To create your datastream:
Log into the Experience Platform Data Collection user interface
Select Datastreams in the left navigation
Select the New Datastream button in the upper-right hand corner
For the Friendly Name, enter
Luma Platform Tutorial (add your name to the end, if multiple people from your company are taking this tutorial)
Select the Save button
On the next screen, you specify where you want to send data. To send data to Experience Platform:
Luma Web Events Dataset
Once the Edge Configuration has saved, the resulting screen will show three environments have been created for Development, Staging, and Production. Additional Development environments can be added:
All three environments contain the Platform details you just entered. However, these details can be configured differently per environment. For example, you could have each environment send data to a different Platform sandbox. In this tutorial, we will not do any additional customization to our datastream.
To create a property:
Luma Platform Tutorial(add your name to the end, if multiple people from your company are taking this tutorial)
Now that you have a property you can add the Web SDK using an extension. An extension is a package of code that extends the Data Collection interface and functionality. To add the extension:
data.enablementadobe.com. This setting allows you to set first party cookies with your Web SDK implementation, which is encouraged. Later in this lesson, you will map a website on the
enablementadobe.comdomain to your tag property. The CNAME for the
enablementadobe.comdomain has already been configured so that
data.enablementadobe.comwill forward to Adobe servers. When you implement Web SDK on your own website, you will need to create a CNAME for your own data collection purposes, for example,
Luma Platform Tutorialdatastream.
Now we will create a rule to send data to Platform. A rule is a combination of events, conditions, and actions that tell tags to do something. To create a rule:
All Pages - Library Loaded
Luma Web Events Schema
Next we will publish the rule to our development environment so we can verify that it works.
To create a library:
Luma Platform Tutorial
The library may take a few minutes to build and when it is complete it displays a green dot to the left of the library name:
As you can see on the Publishing Flow screen, there is a lot more to the publishing process which is beyond the scope of this tutorial. We are just going to use a single library in our Development environment.
The Experience Platform Debugger is an extension available for Chrome and Firefox browsers which helps you see the Adobe technology implemented in your web pages. Download the version for your preferred browser:
If you’ve never used the Debugger before—and this one is different from the older Adobe Experience Cloud Debugger—you might want to watch this five-minute overview video:
For this tutorial, we use a publicly hosted version of the Luma demo website. Let’s open it and bookmark it:
This hosted website is why we used
enablementadobe.com in the Domains field of our initial tag property configuration and why we used
data.enablementadobe.com as our first-party domain in the Adobe Experience Platform Web SDK extension. See, I had a plan!
The Experience Platform Debugger has a cool feature that allows you to replace an existing tag property with a different one. This is useful for validation and allows us to skip many implementation steps in this tutorial.
Make sure you have the Luma site open and select the Experience Platform Debugger extension icon
The Debugger will open and show some details of the hardcoded implementation, which is unrelated to this tutorial (you may need to reload the Luma site after opening the Debugger)
Confirm that the Debugger is “Connected to Luma” as pictured below and then select the “lock” icon to lock the Debugger to the Luma site.
Select the Sign In button on the top right to authenticate.
Now go to Launch in the left navigation
Select the Configuration tab
To the right of where it shows you the Page Embed Codes, open the Actions dropdown, and select Replace
Since you are authenticated, the Debugger is going to pull in your available Launch properties and environments. Select your
Luma Platform Tutorial property
Select the Apply button
The Luma website will now reload with your tag property. Help, I’ve been hacked! Just kidding.
Go to Summary in the left navigation, to see the details of your Launch property
Now go to AEP Web SDK in the left navigation to see the Network Requests
Open the events row
Note how we can see the
web.webpagedetails.pageView event type we specified in our Send Event action, and other, out-of-the-box variables adhering to the
AEP Web SDK ExperienceEvent Mixin format
These types of request details are also visible in the browser’s web developer tools Network tab. Open it and reload the page. Filter for calls with
interact to locate the call, select it, and then look in the Headers tab, Request Payload area.
Go to the Response tab and note how the ECID value is included in the response. Copy this value as you will use it to validate the profile information in the next exercise.
You can validate that data is landing in Platform by looking at the batches of data arriving in the
Luma Web Events Dataset. (I know, it’s called streaming data ingestion but now I’m saying it arrives in batches! It streams in real-time to Profile, so it can be used for real-time segmentation and activation, but is sent in batches every 15 minutes to the data lake.)
To validate the data:
Luma Web Events Datasetand confirm that a batch has arrived. Remember, they are sent every 15 minutes, so you might need to wait for the batch to show up.
You can also confirm that the new profile is showing up:
In the Data Collection tags interface, on the top-right corner of your
Luma Platform Tutorial property, open the Select a Working Library dropdown and select your
Luma Platform Tutorial library. This setting makes it easier to publish additional updates to our library.
Now go to Data Elements in the left navigation
Select the Create New Data Element button
As the Name, enter
As the Data Element Type, select
To help standardize the format of the values, check the boxes for Force lowercase value and Clean text
Make sure that
Luma Platform Tutorial is selected as the working library
Select Save to Library
Now we will map our page name to the Web SDK.
In order to complete this task, we need to make sure that your user first has access to the Prod sandbox. If you don’t already have access to the Prod sandbox from a different product profile, quickly open your
Luma Tutorial Platform profile and add the permission item Sandboxes > Prod. After doing so, do a SHIFT-Reload on the Data Elements page to clear your cache
On the Data Elements page:
Adobe Experience Platform Web SDK
Luma Web Events Schema
Page Namedata element
This same process is used to map additional custom data on your website to XDM fields.
Now that you have data mapped to XDM fields, you can include it in your Send Event action:
All Pages - Library Loadedrule
Adobe Experience Platform Web SDK - Send Eventaction
XDM Objectdata element
Luma Platform Tutorialselected as your working library for the last several exercises, your recent changes have been saving directly to the library. Instead of having to publish our changes via the Publishing Flow screen, you can just open the dropdown on the blue button and select Save to Library and Build
This starts building a new tag library with the three changes you just made.
You should now be able to reload the Luma homepage, while mapped to your tag property using the Debugger as you learned earlier, and see that the page name field populates in the request!
You can also validate the page name data was received in Platform, by previewing the dataset and profile.
Your Web SDK implementation is now sending events with the Experience Cloud ID (ECID) as the primary identifier. The ECID is generated automatically by the Web SDK and is unique per device and browser. A single customer can have multiple ECIDs depending on which device and browser they are using. So how can we get a unified view of this customer and link their online activity to our CRM, Loyalty, and Offline Purchase data? We do that by collecting additional identities during their session and deterministically linking their profile via identity stitching.
If you recall, I mentioned that we would be using the ECID and CRM Id as identities for our web data in the Map Identities lesson. So let’s collect the CRM Id with the Web SDK!
First we store the CRM Id in a data element:
Luma Platform Tutorialshould still be your working library)
Now that we have captured the CRM Id value, we must associate it with a special data element type called the Identity Map data element:
Add a data element named
As the Extension, select Adobe Experience Platform Web SDK
As the Data Element Type, select Identity map
As the Namespace, enter
Luma CRM Id, which is the namespace we created in an earlier lesson
The Adobe Experience Platform Web SDK extension version 2.2 allows you to select Namespace from a pre-populated dropdown using the actual values in your Platform account. Unfortunately, this feature is not yet “sandbox aware” and thus the
Luma CRM Id value may not appear in the dropdown. This may prevent you from completing this exercise. We will post a workaround once confirmed.
As the ID, select the icon to open the data element selection modal and choose your
CRM Id data element
As the Authenticated State, select Authenticated
Leave Primary unchecked. Since the CRM Id is not present for most visitors to the Luma website, you definitely do not want to override the ECID as the primary identifier. It would be a rare use case to use anything other than the ECID as the primary identifier. Usually I don’t mention the default settings in these instructions, but I am calling this one out to help you avoid headaches later on in your own implementation.
Select the Save to Library button (
Luma Platform Tutorial should still be your working library)
You can pass multiple identifiers using the Identity map data type.
There is one more data element we must update—the XDM Object data element. It may seem weird to have to update three separate data elements to pass this one identity, but this process is designed to scale for multiple identities. Don’t worry, we’re almost done with this lesson!
Luma Platform Tutorialselected as your working library for the last several exercises, your recent changes have been saving directly to the library. Instead of having to publish our changes via the Publishing Flow screen, you can open the dropdown on the blue button and select Save to Library and Build
To validate that the CRM Id is now being sent by the Web SDK:
Great job! That was a lot of information about Web SDK and Launch. There is a lot more involved in a full-blown implementation, but those are the basics to help you get started and see the results in Platform.
Now that you are done with the Streaming Ingestion lesson, you can remove the Prod sandbox from your
Luma Tutorial Platform product profile
Data Engineers, if you like you can skip ahead to the run queries lesson.
Data Architects, you can move on to merge policies!