Create data elements
Learn how to create data elements in tags for content, commerce, and identity data on the Luma demo site. Then populate fields in your XDM schema with the Adobe Experience Platform Web SDK extension Variable data element type.
Learning objectives
At the end of this lesson, you are able to:
- Understand different approaches to mapping a data layer to XDM
- Create data elements to capture data
- Map data elements to an XDM object
Prerequisites
You have an understanding of what a data layer is and have completed the previous lessons in the tutorial:
digitalData
data layer on the Luma site. To view the data layer, open your developer console and type in digitalData
to see the full data layer available.
Data layer approaches
There are multiple ways to map data from your data layer to XDM using the tags functionality of Adobe Experience Platform. Below are a few pros and cons of three different approaches. It is possible to combine approaches, if desired:
- Implement XDM in the data layer
- Map to XDM in tags
- Map to XDM in the datastream
Implement XDM in the data layer
This approach involves using the fully defined XDM object as the structure for your data layer. Then you map the entire data layer to an XDM object data element in tags. If your implementation is not using a tag manager, this approach may be ideal because you can send data to XDM directly from your application using the XDM sendEvent command. If you do use tags, you can create a custom code data element capturing the entire data layer as a pass-through JSON object to the XDM. Then, you map the pass-through JSON to the XDM object field in the Send Event Action.
Below is an example of how the data layer would look like using the Adobe Client Data Layer format:
code language-json |
---|
|
Pros
- Eliminates additional steps remap to data layer variables to XDM
- It may be quicker to deploy if your web development team also owns tagging digital behavior
Cons
- Complete reliance on development team and dev cycle for updating what data goes to XDM
- Limited flexibility as XDM receives the exact payload from the data layer
- Cannot use built-in tags features, such as scraping, persistence, features for quick deployments
- Harder to use the data layer for third-party pixels (but you might want to move these pixels to event forwarding!
- No ability to transform the data between the data layer and XDM
Map data layer in tags
This approach involves mapping individual data layer variables OR data layer objects to data elements in tags and eventually to XDM. This is the traditional approach to implementation using a tag management system.
Pros
- The most flexible approach as you can control individual variables and transform data before it gets to XDM
- Can use Adobe tags triggers and scraping functionality to pass data to XDM
- Can map data elements to third-party pixels client-side
Cons
- Takes time to reconstruct the data layer as data elements
Map to XDM in the datastream
This approach uses functionality built-into the datastream configuration called Data Prep for Data Collection and skips mapping data layer variables to XDM in tags.
Pros
- Flexible as you can map individual variables to XDM
- Ability to compute new values or transform data types from a data layer before it goes to XDM
- Leverage a Mapping UI to map fields in your source data to XDM with a point-and-click UI
Cons
- Cannot use data layer variables as data elements for client-side third-party pixels, but can use them with event forwarding
- Cannot use the scraping functionality of the tags feature of Adobe Experience Platform
- Maintenance complexity increases if mapping the data layer both in tags and in datastream
Create data elements to capture the data layer
Before you create the XDM object, create the following set of data elements for the Luma demo site data layer:
-
Go to Data Elements and select Add Data Element (or Create New Data Element if there are no existing data elements in the tag property)
-
Name the data element
page.pageInfo.pageName
-
Use the JavaScript Variable Data Element type to point to a value in Luma’s data layer:
digitalData.page.pageInfo.pageName
-
Check the boxes for Force lowercase value and Clean text to standardize the case and remove extraneous spaces
-
Leave
None
as the Storage Duration setting since this value is different on every page -
Select Save
Create these additional data elements by following the same steps:
-
page.pageInfo.server
mapped todigitalData.page.pageInfo.server
-
page.pageInfo.hierarchie1
mapped todigitalData.page.pageInfo.hierarchie1
-
user.profile.attributes.username
mapped todigitalData.user.0.profile.0.attributes.username
-
user.profile.attributes.loggedIn
mapped todigitalData.user.0.profile.0.attributes.loggedIn
-
product.productInfo.sku
mapped todigitalData.product.0.productInfo.sku
-
product.productInfo.title
mapped todigitalData.product.0.productInfo.title
-
cart.orderId
mapped todigitalData.cart.orderId
-
product.category
using the Custom Code Data Element type and the following custom code to parse the site URL for the top-level category:code language-javascript var cat = location.pathname.split(/[/.]+/); if (cat[5] == 'products') { return (cat[6]); } else if (cat[5] != 'html') { return (cat[5]); }
-
cart.productInfo
using the following custom code:code language-javascript var cart = digitalData.cart.cartEntries; var cartItem = []; cart.forEach(function(item, index, array){ cartItem.push({ "SKU": item.sku }); }); return cartItem;
-
cart.productInfo.purchase
using the following custom code:code language-javascript var cart = digitalData.cart.cartEntries; var cartItem = []; cart.forEach(function(item, index, array){ var qty = parseInt(item.qty); var price = parseInt(item.price); cartItem.push({ "SKU": item.sku, "quantity": qty, "priceTotal": price }); }); return cartItem;
digitalData.user[0].profile[0].attributes.username
will not work.Create Variable data elements for XDM and data objects
The data elements you just created will be used to build an XDM object (for Platform applications) and a data object (for Analytics, Target, and Audience Manager). These objects have their own special data elements called Variable data elements which are very easy to create.
To create the Variable data element for XDM, you tie it to the schema you created in the Configure a schema lesson:
-
Select Add Data element
-
Name your Data Element
xdm.variable.content
. It is recommended you prefix with “xdm” the Data Elements specific to XDM to better organize your tag property -
Select the Adobe Experience Platform Web SDK as the Extension
-
Select the Variable as the Data Element Type
-
Select XDM as the property
-
Select the Sandbox in which you created the schema
-
Select the appropriate Schema, in this case
Luma Web Event Data
-
Select Save
Next, create the Variable data element for your data object:
-
Select Add Data element
-
Name your Data Element
data.variable
. It is recommended you prefix with “data” the Data Elements specific to data object to better organize your tag property -
Select the Adobe Experience Platform Web SDK as the Extension
-
Select the Variable as the Data Element Type
-
Select data as the property
-
Select the Experience Cloud solutions you wish to implement as part of this tutorial
-
Select Save
At the end of these steps, you should have the following data elements created:
cart.orderId
data.variable
cart.productInfo
xdm.variable.content
cart.productInfo.purchase
page.pageInfo.hierarchie1
page.pageInfo.pageName
page.pageInfo.server
product.category
product.productInfo.sku
product.productInfo.title
user.profile.attributes.loggedIn
user.profile.attributes.username
With these data elements in place, you are ready to start sending data to Platform Edge Network with a tags rule. But first, learn about collecting identities with Web SDK.