AEP Use Case: Sending data from AEM to AEP through Web SDK

Real time data is vital in providing personalized experiences to the end user. Adobe Experience Platform helps organize the customer data in a standard way. It can send and receive data from different systems. This article focuses on the steps required in sending data from AEM to AEP taking user email as an example.

Pre-requisite:

• User’s email address is available in the data layer object.

Steps Involved:

1. Create Schema and Dataset on Adobe Experience Platform
2. Configure Datastream on AEP Data Collection
3. Configure tag property on AEP Data Collection
4. Embed the JS library to the AEM page.

Creating Schema and Dataset:

Ensure that you have the required permissions to Adobe Experience Platform and Adobe Experience Platform Data Collection Products.

Log into https://experience.adobe.com/. Click on Experience Platform to open the Adobe Experience Platform Interface.

Click on the sandbox dropdown in the top right corner of the window and select the sandbox you are going to work with.

A Schema defines the structure of the data. To create a schema, click Schemas option available on the left navigation. If you can’t find the option there, then you don’t have enough permissions to manage schemas. Check your permissions again and proceed to the next steps.

Click on Create Schema in the top right corner. It will display three options.

1. Individual Profile
2. Experience Event
3. Custom

Through Web SDK, we can send data only to the Experience Event type dataset. So, you need to create a schema of Experience Event type.

Select Experience Event type and click Next. Enter the name for Schema and click Finish.

Add Personal Contact Details Field Group to the newly created schema. In the personal contact details field group, you can see a field for email under personalEmail -> address. Save the changes.

Now, navigate to the Datasets section through the left rail. Click on Create dataset. You are provided with two options. Select Create dataset from schema.

Search for the schema created and select it. Click on Next. Enter the name for Dataset and click Finish.

Now you have successfully created the schema and dataset.

Configure Datastream on AEP Data Collection:

A datastream is required to let the Adobe Edge Network know where to forward the requested data. We need the data to be sent to Adobe Experience Platform. We will configure a datastream for AEP.

Navigate to the AEP Data Collection Interface through the link available on the top right corner or follow the link https://experience.adobe.com/launch/.

Navigate to Datastreams through left navigation. Click on New Datastream.

Give any name and select the sandbox created previously. Click Save.

It would have created a new datastream and you must add AEP to that datastream.

Click Add Service. Select Adobe Experience Platform in the Service dropdown. Select the dataset created in the Event dataset dropdown. Then Click Save.

Now you have added AEP to the new Datastream which will forward the data to Experience Platform.

Configure Tag Property:

A Tag property will give a JS library that contains the rules required to collect the data from the webpage.

Go to Tags through left navigation. Click New Property on the right side. Give any name to the tag property and add your web domain. Click Save.

From the list of tag properties, search for the property you created and click to open it.

Go to Extension through the left rail. Core Extension should be available by default. You need to add the AEP Web SDK extension to the tag property.

Click on Catalog Tab. Search for web sdk. Select the Adobe Experience Platform Web SDK extension.

Click Install. In the new window, select the sandbox you are using and the datastream which was created before for all the environments and save the changes.

Now go to Rules. Click Create New Rule. Enter any name for the rule.

Click Add below the Events. Select Core in the Extension and Window Loaded as Event type. Save changes.

No need to add any conditions if you want the rule to fire on all pages.

Click Add below the Actions. Select Adobe Experience Platform Web SDK in the extension and Sent Event as Action type. Select ‘Web Webpagedetails Page Views’ as Type on the right side. Keep the changes.

Save the rule.

Go to the Publishing flow. Click Add Library. Give any name and select Development in the environment dropdown. Click Add All Changed Resources. You should see the rule added.

Click Save & Build to Development. You should see the library as Active (Green Dot) in the Development Column.

Now you need to create data elements to collect the data from AEM. We are going to create one element for user email. Go to Data Elements and click Create New Data Element.

Give any name or Email. Select Core in the Extension and Java Script Variable as Data Element Type. Say there is a datalayer object called pageDataLayerObject like below (it can be different for you; it should be used).

{
  "properties": {
    "@type": "<sample-project-base>/components/structure/page/basepage",
    "repo:modifyDate": "2023–11–21T18:38:05Z",
    "dc:title": "Home Page",
    "dc:description": "Home Page",
    "xdm:template": "/conf/<sample-project>/settings/wcm/templates/freeform",
    "xdm:language": "en",
    "xdm:tags": [],
    "repo:path": "/content/<sample-project>/language-masters/en.html",
    "canonicalUrl": "https://<sample-project>.com/language-masters/en.html",
    "pageName": "homepage",
    "pageType": "freeform",
    "siteSection": " homepage",
    "localTimestamp": "2024–01–16T13:08:39",
    "user": {
      "email": "test-user@gmail.com"
    }
  }
}

Email can be accessed like this pageDataLayerObject.properties.user.email and the same can be provided to the Javascript variable name. Save the changes.

Now we have a data element which will hold the value of an email. But it should be mapped to the XDM schema field.

For that purpose, create another data element XDM Object. Select Adobe Experience Platform Web SDK in the extension and XDM Object as Data Element Type.

Select the Sandbox and schema. It will display the selected schema structure. Go to personalEmail > address. For the value of the address field, select the data element where you have captured the user email address. Save the changes.

Now the data is available in the XDM schema format through the XDM Object data element. And it must be sent to Adobe Experience Platform Dataset.

Go to Rules, Open the rule created and click the send event action. Map the XDM Object data element to the XDM field available on the right side. Keep the changes.

Whenever there is a change in the rule, build it again. Select the library you created on the top. Click Save to Library dropdown and select Save to Library and Build.

You have successfully created the tag property.

Embed the JS library:

Tag property is a JavaScript library that can be embedded onto the AEM page. It gets triggered based on the rule set up in the tag property. To find the library, Go to Environments. In the Development Environment, select the option in the Install column. You can find the JS library there and embed it inside the head tag.

We can use the Adobe Experience Platform Debugger to validate the data ingestion.

Install the Adobe Experience Platform Debugger extension. Open the debugger and sign in. At the bottom, you can see the connected page.

If you want to connect to a different page, open the page in another tab and lock it in the debugger so the debugger is not switching to another page when the browser tab is changed and remains connected to the same page.

Now to include the JS library in the page, go to Experience Platform Tags in the debugger. Switch to Configuration Tab. Click Add new embed code under Injected Embed Codes.

Select the created Tag property from the dropdown. Select Development in the environment. Click Apply.

Once it is applied, the library would have been embedded onto the page. Since the page is refreshed by this action and the window is loaded again, a request has been sent with the data. You can verify it using the Network tab in developer console.

Now the data will be available in the created dataset. It can take up to 15 minutes for the data to be available on the Adobe Experience platform.

Go to Datasets in AEP and open the dataset created. You can see that the data is ingested.

Click Preview dataset to preview the data that has been ingested at the last run.

You have successfully sent the data from AEM Page to Experience platform.