DocumentationExperience PlatformWeb SDK Tutorial

Set up Adobe Analytics with Platform Web SDK

Last update: Tue Mar 05 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

CREATED FOR:

  • Beginner
  • Intermediate
  • Developer
CAUTION
We expect to publish major changes to this tutorial on Friday March 15, 2024. After that point many exercises will change and you may need to restart the tutorial from the beginning in order to complete all of the lessons.

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:

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:

XDM to Analytics auto-mapped variables
Adobe Analytics variable
identitymap.ecid.[0].id
mid
web.webPageDetails.pageViews.value
a page view s.t() call
web.webPageDetails.name
s.pageName
web.webPageDetails.server
s.server
web.webPageDetails.siteSection
s.channel
commerce.productViews.value
prodView
commerce.productListViews.value
scView
commerce.checkouts.value
scCheckout
commerce.purchases.value
purchase
commerce.order.currencyCode
s.currencyCode
commerce.order.purchaseID
s.purchaseID
productListItems[].SKU
s.products=;product name;;;; (primary - see Note below)
productListItems[].name
s.products=;product name;;;; (fallback - see Note below)
productListItems[].quantity
s.products=;;product quantity;;;
productListItems[].priceTotal
s.product=;;;product price;;
NOTE
The individual sections of the Analytics product string are set through different XDM variables under the productListItems object.
As of August 18, 2022, productListItems[].SKU takes priority for mapping to the product name in the s.products variable.
The value set to productListItems[].name is mapped to the product name only if productListItems[].SKU does not exist. Otherwise, it is unmapped and available in context data.
Do not set an empty string or null to productListItems[].SKU. This has the undesired effect of mapping to the product name in the s.products variable.

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

    Select the Luma Web SDK datastream

  4. Select Add Service
    Add a service to the datastream

  5. Select Adobe Analytics as the Service

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

  7. Select Save

    Datastream save analytics

    note tip
    TIP
    Adding more report suites by selecting Add Report Suite is equivalent to multi-suite tagging.
WARNING
In this tutorial, you only configure the development Adobe Analytics report suite. When you create datastreams for your own website, you would create additional datastreams and report suites for your staging and production environments.

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

    Custom Code Data Element

  9. Copy-and-paste the following code

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

  10. Select Save to save the custom code

    Custom Code Product SKU

  11. Select Save to save the data element

Follow the same steps to create these additional data elements:

  • product.productInfo.title

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

  • cart.productInfo

    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,
"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:

Data Elements
cart.orderId
cart.productInfo
identityMap.loginID
page.pageInfo.hierarchie1
page.pageInfo.pageName
page.pageInfo.server
product.productInfo.sku
product.productInfo.title
user.profile.attributes.loggedIn
user.profile.attributes.username
xdm.content
IMPORTANT
In this tutorial, you will create a different XDM object for each event. That means you must remap variables that would be considered to be “globally” available on every hit, such as page name and identityMap. However, you may Merge Objects or use Mapping Tables to manage your XDM objects more efficiently in a real-life situation. For this lesson, the global variables are considered as:

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

    Page Views XDM object

TIP
This field is equivalent to sending an s.t() page view beacon for Analytics using AppMeasurement.js. For a link click beacon, set the webInteraction.linkClicks.value to 1

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.

Page Views 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

    Data Element Mapping to XDM object

    note tip
    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

    Setting product view event

    note caution
    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%

    Product SKU XDM object Variable

    note important
    IMPORTANT
    Before you save this XDM object, make sure you set the “global” variables and page view incrementer as well:
    Re-setting global variables in XDM

  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):

XDM object array format

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

IMPORTANT
Note how numeric variables are translated, with string values in the data layer such as price and qty reformatted to numbers in the data element. These format requirements are important for data integrity in Platform and are determined during the configure schemas step. In the example, quantity uses the Integer data type.
XDM schema data type

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

    note tip
    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

    Entire array mapping to XDM object

    note important
    IMPORTANT
    Before you save this XDM object, make sure you set the “global” variables and page view incrementer as well:
    Re-setting global variables in XDM

  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.

TIP
This step is equivalent to setting scCheckout event in Analytics

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

    Setting purchaseID for Analytics

    note tip
    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

    note tip
    TIP
    This is equivalent to setting purchase event in Analytics
    note important
    IMPORTANT
    Before you save this XDM object, make sure you set the “global” variables and page view incrementer as well:
    Re-setting global variables in XDM

  7. Select Save

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

XDM object data elements
xdm.commerce.cartView
xdm.commerce.checkout
xdm.commerce.prodView
xdm.commerce.purchase
xdm.content

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

    Analytics XDM rules

  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

    Analytics XDM rules

  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

    note tip
    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

    Analytics XDM rules

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

    Analytics XDM rules

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.

Analytics XDM rules

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

    note warning
    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

    Connect Edge Trace

  3. It will be empty for now

    Connected Edge Trace

  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

    Analytics beacon Edge Trace

    note tip
    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.

    Analytics ECID

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

    Analytics product string

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

    Analytics product string

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

    Analytics Product View

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

    Analytics Cart View

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

    Analytics Checkout

  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

    Analytics Purchase

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

    Analytics Purchase

  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

    Analytics Purchase

    note important
    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

    Analytics Purchase

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

    Page Views
    Real-Time Content

    Product Views
    Real-Time Product Views

    Purchases
    Real-Time Purchase

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

    Full e-commerce flow

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

NOTE
Thank you for investing your time in learning about Adobe Experience Platform Web SDK. If you have questions, want to share general feedback, or have suggestions on future content, share them on this Experience League Community discussion post
recommendation-more-help
8cbc0fd8-ca1d-433b-9c3d-bc3f113347d4