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:

• Configure an XDM schema
• Configure an identity namespace
• Configure a datastream
• Web SDK extension installed in the tag property

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:

1. Implement XDM in the data layer
2. Map to XDM in tags
3. 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:

window.adobeDataLayer.push({
"eventType": "web.webPageDetails.pageViews",
"web":{
         "webInteraction":{
            "linkClicks":{
               "id":"",
               "value":""
            },
            "URL":"",
            "name":"",
            "region":"",
            "type":""
         },
         "webPageDetails":{
            "pageViews":{
               "id":"",
               "value":"1"
            },
            "URL":"https://luma.enablementadobe.com/",
            "isErrorPage":"",
            "isHomePage":"",
            "name":"luma:home",
            "server":"enablementadobe.com",
            "siteSection":"home",
            "viewName":""
         },
         "webReferrer":{
            "URL":"",
            "type":""
         }
      }
});

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:

1. 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)

   

2. Name the data element page.pageInfo.pageName

3. Use the JavaScript Variable Data Element type to point to a value in Luma’s data layer: digitalData.page.pageInfo.pageName

4. Check the boxes for Force lowercase value and Clean text to standardize the case and remove extraneous spaces

5. Leave None as the Storage Duration setting since this value is different on every page

6. Select Save

   

Create these additional data elements by following the same steps:

• page.pageInfo.server mapped to
  digitalData.page.pageInfo.server

• page.pageInfo.hierarchie1 mapped to
  digitalData.page.pageInfo.hierarchie1

• user.profile.attributes.username mapped to
  digitalData.user.0.profile.0.attributes.username

• user.profile.attributes.loggedIn mapped to
  digitalData.user.0.profile.0.attributes.loggedIn

• product.productInfo.sku mapped to digitalData.product.0.productInfo.sku

• product.productInfo.title mapped to digitalData.product.0.productInfo.title

• cart.orderId mapped to digitalData.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:

  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:

  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:

  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;
  

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:

1. Select Add Data element

2. 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

3. Select the Adobe Experience Platform Web SDK as the Extension

4. Select the Variable as the Data Element Type

5. Select XDM as the property

6. Select the Sandbox in which you created the schema

7. Select the appropriate Schema, in this case Luma Web Event Data

8. Select Save

   

Next, create the Variable data element for your data object:

1. Select Add Data element

2. 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

3. Select the Adobe Experience Platform Web SDK as the Extension

4. Select the Variable as the Data Element Type

5. Select data as the property

6. Select the Experience Cloud solutions you wish to implement as part of this tutorial

7. Select Save

   

At the end of these steps, you should have the following data elements created:

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.

Next: Create identities