Set up Adobe Analytics with Platform Web SDK

Learn how to set up Adobe Analytics using Experience Platform Web SDK, create tag rules to send data to Adobe Analytics, and validate that Analytics is capturing data as expected.

Adobe Analytics is an industry-leading application that empowers you to understand your customers as people and steer your business with customer intelligence.

Learning objectives

At the end of this lesson, you will be able to:

• Configure an XDM schema for Adobe Analytics and understand the difference between auto-mapped and manually mapped XDM variables for Analytics
• Configure a datastream to enable Adobe Analytics
• Map individual or entire array data elements to the XDM object
• Capture page views in Adobe Analytics with the XDM object
• Capture e-commerce data with the XDM object for the Adobe Analytics product string
• Validate Adobe Analytics variables are set with the XDM object using Experience Platform Debugger
• Use Adobe Analytics processing rules to set custom variables
• Validate data is captured by Adobe Analytics using Real-Time Reports

Prerequisites

You are familiar with tags, Adobe Analytics, and the Luma demo site login and shopping functionality.

You need at least one test/dev report suite ID. If you don’t have a test/dev report suite that you can use for this tutorial, please create one.

You must have completed all the steps from the previous sections in the tutorial:

• Initial Configuration
  • Configure permissions
  • Configure an XDM schema
  • Configure an identity namespace
  • Configure a datastream
• Tags Configuration
  • Install Web SDK extension
  • Create data elements
  • Create a tag rule
  • Validate with Adobe Experience Platform debugger

XDM schemas and Analytics’ variables

Congratulations! You already configured a schema compatible with Adobe Analytics in the Configure a schema lesson!

Implementing Platform Web SDK should be as product-agnostic as possible. For Adobe Analytics, mapping eVars, props, and events doesn’t occur during schema creation, nor during the tag rules configuration as it has been done traditionally. Instead, every XDM key-value pair becomes a Context Data Variable that maps to an Analytics variable in one of two ways:

1. Automatically mapped variables using reserved XDM fields
2. Manually mapped variables using Analytics Processing Rules

To understand what XDM variables are auto-mapped to Adobe Analytics, please see Variables automatically mapped in Analytics. Any variable that is not auto-mapped must be manually mapped.

The schema created in the Configure a schema lesson contains a few auto-mapped to Analytics variables, as outlined in this table:

Configure the datastream

Platform Web SDK sends data from your website to Platform Edge Network. Your datastream then tells Platform Edge Network where to forward that data, in this case, which of your Adobe Analytics report suites.

1. Go to Data Collection interface

2. On the left navigation, select Datastreams

3. Select the previously created Luma Web SDK datastream

   

4. Select Add Service
   

5. Select Adobe Analytics as the Service

6. Enter the Report Suite ID of your development report suite

7. Select Save

   

   TIP

   Adding more report suites by selecting Add Report Suite is equivalent to multi-suite tagging.

Create additional data elements

Next, capture additional data from the Luma data layer and send it to the Platform Edge Network. While the lesson focuses on common Adobe Analytics requirements, all data captured can easily be sent to other destinations based on your datastream configuration. For example, if you completed the Adobe Experience Platform lesson, the additional data you capture in this lesson is also sent to Platform.

Create e-commerce data elements

During the Create data elements lesson, you created JavaScript data elements that captured content and identity details. Now you will create additional data elements to capture e-commerce data. Because the Luma demo site uses different data layer structures for product detail pages and products in the cart, you must create data elements for each scenario. You will have to create some custom code data elements to grab what you need from the Luma data layer, which may or may not be necessary when implementing on your own site. In this case, you need to loop through an array of shopping cart items to grab specific details of each product. Use the provided code snippets below:

1. Open the tag property you are using for the tutorial

2. Go to Data Elements

3. Select Add Data Element

4. Name it product.productInfo.sku

5. Use the Custom Code Data Element Type

6. Leave check boxes for Force lowercase value and Clean text unchecked

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

8. Select Open Editor

   

9. Copy-and-paste the following code

   var cart = digitalData.product;
   var cartItem;
   cart.forEach(function(item){
   cartItem = item.productInfo.sku;
   });
   return cartItem;
   

10. Select Save to save the custom code

    

11. Select Save to save the data element

Follow the same steps to create these additional data elements:

• product.productInfo.title

  var cart = digitalData.product;
  var cartItem;
  cart.forEach(function(item){
  cartItem = item.productInfo.title;
  });
  return cartItem;
  

• cart.productInfo

  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,
  "name":item.title,
  "quantity":qty,
  "priceTotal":price
  });
  });
  return cartItem;
  

After adding these data elements and having created the previous ones in the Create Data Elements lesson, you should have the following data elements:

Increment page views

In the Create Data Elements lesson, you created an xdm.content data element to capture content dimensions. Since you are now sending data to Adobe Analytics, you must also map an extra XDM field to indicate that a beacon should be processed as an Analytics’ page view.

1. Open your xdm.content data element

2. Scroll down and select to open until web.webPageDetails

3. Select to open the pageViews object

4. Set value to 1

5. Select Save

   

Set the product string

Before you map to the product string, it is important to understand there are two main objects within the XDM schema that are used for capturing e-commerce data which have special relationships with Adobe Analytics:

1. The commerce object sets Analytics events such as prodView, scView, and purchase
2. The productListItems object sets Analytics dimensions such as productID.

See Collect Commerce and Products Data for more details.

It is also important to understand that you can provide individual attributes to individual XDM fields or provide an entire array to an XDM object.

Map individual attributes to an XDM object

You can map to individual variables to capture data on the product details page of the Luma Demo site:

1. Create an XDM object Data Element Type named xdm.commerce.prodView

2. Select the same Platform sandbox and XDM schema used in previous lessons

3. Open the commerce object

4. Open the productViews object and set value to 1

   

   TIP

   This step is equivalent to setting prodView event in Analytics

5. Scroll down to and select productListItems array

6. Select Provide individual items

7. Select Add Item

   

   CAUTION

   The productListItems is an array data type so it expects data to come in as a collection of elements. Because of the Luma demo site’s data layer structure and because it’s only possible to view one product at a time on the Luma site, you will add items individually. When implementing on your own website, depending on your data layer structure, you may be able to provide an entire array.

8. Select to open Item 1

9. Map the following XDM variables to data elements

   • productListItems.item1.SKU to %product.productInfo.sku%
   • productListItems.item1.name to %product.productInfo.title%

   

   IMPORTANT

   Before you save this XDM object, make sure you set the “global” variables and page view incrementer as well:
   

10. Select Save

Map an entire array to an XDM object

As noted earlier, the Luma Demo site uses a different data layer structure for products in the cart. The custom code data element cart.productInfo data element you created earlier loops through the digitalData.cart.cartEntries data layer object and translates it into the required XDM object schema required. The new format must exactly match the schema defined by the productListItems object of the XDM schema.

To illustrate, see the comparison below of the Luma site data layer (left) to the translated data element (right):

Compare the data element to the productListItems structure (hint, it should match).

Now back to mapping the XDM object to an entire array. Create an XDM object data element to capture products on the cart page:

1. Create an XDM object Data Element Type named xdm.commerce.cartView

2. Select the same Platform sandbox and XDM schema you are using for this tutorial

3. Open the commerce object

4. Open the productListViews object and set value to 1

   TIP

   This step is equivalent to setting scView event in Analytics

5. Scroll down to and select productListItems array

6. Select Provide entire array

7. Map to cart.productInfo data element

   

   IMPORTANT

   Before you save this XDM object, make sure you set the “global” variables and page view incrementer as well:
   

8. Select Save

Create another XDM object Data Element Type for checkouts called xdm.commerce.checkout. This time set the commerce.checkouts.value to 1, map productListItems to cart.productInfo like you just did, and add the “global” variables and page view counter.

There are additional steps for capturing the purchase event:

1. Create another XDM object Data Element Type for purchases called xdm.commerce.purchase

2. Open commerce object

3. Open the order object

4. Map purchaseID to the cart.orderId data element

5. Set currencyCode to the hardcoded value USD

   

   TIP

   This is equivalent to setting s.purcahseID and s.currencyCode variables in Analytics

6. Select to open the purchases object and set value to 1

   TIP

   This is equivalent to setting purchase event in Analytics

   IMPORTANT

   Before you save this XDM object, make sure you set the “global” variables and page view incrementer as well:
   

7. Select Save

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

Create additional rules for Platform Web SDK

With the multiple XDM object data elements created, you are ready to set the beacons using rules. In this exercise, you create individual rules per e-commerce event and use conditions so the rules fire on the right pages. Let’s start with a Product View event.

1. From the left navigation, select Rules and then select Add Rule

2. Name it product view - library load - AA

3. Under Events, select Library Loaded (Page Top)

4. Under Conditions, select to Add

   

5. Leave Logic Type as Regular

6. Leave Extensions as Core

7. Select Condition Type as Path Without Query String

8. On the right, enable the Regex toggle

9. Under path equals set /products/. For the Luma demo site, it ensures the rule only triggers on product pages

10. Select Keep Changes

    

11. Under Actions select Add

12. Select Adobe Experience Platform Web SDK extension

13. Select Action Type as Send event

14. The Type field has a drop-down list of values to choose from. Select commerce.productViews

    TIP

    The value selected here has no effect on how data is mapped to Analytics, however it is recommended to thoughtfully apply this variable, as it is used in Adobe Experience Platform’s segment builder interface. The value selected is available to use in the c.a.x.eventtype context data variable downstream.

15. Under XDM Data, select the xdm.commerce.prodView XDM object data element

16. Select Keep Changes

    

17. Your rule should look similar to the below. Select Save

    

Repeat the same for all other e-commerce events using the following parameters:

Rule name: cart view - library load - AA

• Event Type: Library Loaded (Page Top)
• Condition: /content/luma/us/en/user/cart.html
• Type value under Web SDK - Send Action: commerce.productListViews
• XDM data for Web SDK - Send Action: %xdm.commerce.cartView%

Rule name: checkout - library load - AA

• Event Type: Library Loaded (Page Top)
• Condition /content/luma/us/en/user/checkout.html
• Type for Web SDK - Send Action: commerce.checkouts
• XDM data for Web SDK - Send Action: %xdm.commerce.checkout%

Rule name: purchase - library load - AA

• Event Type: Library Loaded (Page Top)
• Condition /content/luma/us/en/user/checkout/order/thank-you.html
• Type for Web SDK - Send Action: commerce.purchases
• XDM data for Web SDK - Send Action: %xdm.commerce.purchase%

When you are done, you should see the following rules created.

Build your Development environment

Add your new data elements and rules to your Luma Web SDK Tutorial tag library and rebuild your development environment.

Validate Adobe Analytics for Platform Web SDK

In the Debugger lesson, you learned how to inspect the client-side XDM object beacon with the Platform Debugger and browser developer console, which is similar to how you debug an AppMeasurement.js Analytics implementation. To validate Analytics is capturing data properly through Platform Web SDK, you must go two steps further to:

1. Validate how data is processed by the XDM object on the Platform Edge Network, using Experience Platform Debugger’s Edge Trace feature
2. Validate how data is processed by Analytics using Processing Rules and Real-Time reports.

Use Edge Trace

Learn how to validate that Adobe Analytics is capturing the ECID, page views, the product string, and e-commerce events with the Edge Trace feature of the Experience Platform Debugger.

Experience Cloud ID validation

1. Go to the Luma demo site and use the Experience Platform Debugger to switch the tag property on the site to your own development property

   WARNING

   Before you keep going, make sure you are logged into the Luma site. If you are not logged in, the Luma site does not allow you to checkout.

   1. On Luma, select the login button on the top right, and use credentials u: test@adobe.com p: test to authenticate

   2. You will be automatically redirected to the Didi Sport Watch product page on the next page load

2. To enable the Edge Trace, go to Experience Platform Debugger, in the left navigation select Logs, then select the Edge tab, and select Connect

   

3. It will be empty for now

   

4. Refresh the Didi Sport Watch product page and check Experience Platform Debugger again, you should see data come through. The row starting with Analytics Automatic Mapping RSIDs is the Adobe Analytics beacon

5. Select to open both the mappedQueryParams dropdown and the second dropdown to view Analytics variables

   

   TIP

   The second dropdown corresponds to the Analytics report suite ID you are sending data to. It should match your own report suite, not the one in the screenshot.

6. Scroll down to find c.a.x.identitymap.ecid.[0].id. It is a Context Data Variable that captures ECID

7. Keep scrolling down until you see the Analytics mid variable. Both IDs match with your device’s Experience Cloud ID.

   

   NOTE

   Since you are logged in, take a moment to validate the authenticated ID 112ca06ed53d3db37e4cea49cc45b71e for the user test@adobe.com is captured as well in the c.a.x.identitymap.lumacrmid.[0].id

Content page views

You use the same beacon to validate content page views are captured by Analytics.

1. Look for c.a.x.web.webpagedetails.pageviews.value=1. It tells you an s.t() page view beacon is being sent to Analytics

2. Scroll down to see the gn variable. It is the Analytics dynamic syntax for the s.pageName variable. It captures the page name from the data layer.

   

Product string and e-commerce events

Since you are already on a product page, this exercise continues to use the same Edge Trace to validate product data is captured by Analytics. Both the product string and e-commerce events are automatically mapped XDM variables to Analytics. As long as you have mapped to the proper productListItem XDM variable while configuring an XDM schema for Adobe Analytics, the Platform Edge Network takes care of mapping the data to the proper analytics variables.

1. First validate that the Product String is set

2. Look for c.a.x.productlistitems.[0].sku. The variable captures the data element value you mapped to the productListItems.item1.sku earlier in this lesson

3. Scroll down to see the pl variable. It is the dynamic syntax of the Analytics product string variable

4. Both values match to the product name available in the data layer

   

The Edge Trace treats commerce events slightly differently than productList dimensions. You do not see a Context Data Variable mapped the same way you see the product name mapped to c.a.x.productlistitem.[0].name above. Instead, the Edge Trace shows the final event auto-mapping in the Analytics event variable. Platform Edge Network maps it accordingly as long as you map to the proper XDM commerce variable while configuring the schema for Adobe Analytics; in this case the commerce.productViews.value=1.

1. Back on the Experience Platform Debugger window, scroll down to the event variable, it is set to prodView

   

Validate the rest of e-commerce events and product strings are set for Analytics.

1. Add Didi Sport Watch to cart

2. Go to the Cart Page, check Edge Trace for events: "scView" and the product string

   

3. Proceed to checkout, check Edge Trace for events: "scCheckout" and the product string

   

4. Fill out just the First Name and Last Name fields on the shipping form and select Continue. On the next page, select Place Order

5. On confirmation page, check Edge Trace for

   • Purchase event being set events: "purchase"
   • Currency Code variable being set cc: "USD"
   • Purchase ID being set in pi
   • Product string pl setting the product name, quantity, and price

   

Processing Rules and Real-Time reports

Now that you validated the Analytics beacons with Edge Trace, you can also validate the data is processed by Analytics using the Real-Time reports. Before you check the real-time reports, you must configure Processing rules for Analytics props as needed.

Processing Rules for custom Analytics mappings

In this exercise, you map one XDM variable to a prop so you can view in Real-Time reports. Follow these same steps for any custom mapping you must do for any eVar, prop, event, or variable accessible via Processing Rules.

1. In the Analytics UI, go to Admin > Admin Tools > Report Suites

2. Select the dev/test report suite you are using for the tutorial > Edit Settings > General > Processing Rules

   

3. Create a rule to Overwrite value of Product Name (prop1) to a.x.productlistitems.0.name. Remember to add your note why you are creating the rule and name your rule title. Select Save

   

   IMPORTANT

   The first time you map to a processing rule the UI does not show you the context data variables from the XDM object. To fix that select any value, Save, and come back to edit. All XDM variables should now appear.

4. Go to Edit Settings > Real-Time. Configure all three with the following parameters shown below so that you can validate content page views, product views, and purchases

   

5. Repeat the validation steps and you should see that Real-Time reports populate data accordingly.

   Page Views
   

   Product Views
   

   Purchases
   

6. In the Workspace UI, create a table to view the full e-commerce flow of the product you purchased

   

To learn more about mapping XDM fields to Analytics variables, see the video Map Web SDK variables into Adobe Analytics.

Congratulations! This is the end of the lesson and now you are ready to implement Adobe Analytics with Platform Web SDK for your own website.

Next: Add Adobe Audience Manager

Business.Adobe.com resources