DocumentationExperience PlatformWeb SDK Tutorial

Set up Adobe Analytics with Adobe Experience Platform Web SDK

Last update: Fri May 31 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

CREATED FOR:

  • Beginner
  • Intermediate
  • Developer

Learn how to set up Adobe Analytics using Adobe 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.

Web SDK to Adobe Analytics diagram

Learning objectives

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

  • Configure a datastream to enable Adobe Analytics
  • Know which standard XDM fields auto-map to Analytics variables
  • Set Analytics variables in the data object
  • Send data to another report suite by overriding the datastream
  • Validate Adobe Analytics variables using Debugger and Assurance

Prerequisites

To complete this lesson, you must first:

  • Be familiar with and have access to Adobe Analytics.

  • Have 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.

  • Complete the earlier lessons in the Initial Configuration and Tags Configuration sections of this tutorial.

Configure the datastream

Platform Web SDK sends data from your website to Platform Edge Network. Your datastream then tells Platform Edge Network to which Adobe Analytics report suites your data should be sent.

  1. Go to Data Collection interface

  2. On the left navigation, select Datastreams

  3. Select the previously created Luma Web SDK: Development Environment 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 Adobe Analytics report suite for your development environment. When you create datastreams for your own website, you should create additional datastreams and report suites for your staging and production environments.

Set Analytics variables

There are several ways to set Analytics variables in a Web SDK implementation:

  1. Automatic mapping of XDM fields to Analytics variables (automatic).
  2. Set fields in the data object (recommended).
  3. Map XDM fields to Analytics variables in Analytics processing rules (no longer recommended).
  4. Map to Analytics variables directly in the XDM schema (no longer recommended).

As of May 2024, you no longer need to create an XDM schema to implement Adobe Analytics with Platform Web SDK. The data object (and the data.variable data element you created in the Create data elements lesson) can be used to set all custom Analytics variables. Setting these variables in the data object will be familiar to existing Analytics customers, is more efficient than using processing rules interface, and prevents unnecessary data taking up space in Real-Time Customer Profiles (important if you have Real-Time Customer Data Platform or Journey Optimizer).

Automatically mapped fields

Many XDM fields are automatically mapped to Analytics variables. For the most up-to-date list of mappings, please see Analytics variable mapping in Adobe Experience Edge.

This occurs if even if you have not defined a custom schema. Experience Platform Web SDK automatically collects some data and sends it to Platform Edge Network as XDM fields. For example, Web SDK reads the current page URL and sends it as the XDM field web.webPageDetails.URL. This field is forwarded to Adobe Analytics and it automatically populates the Page URL reports in Adobe Analytics.

If you implement Web SDK for Adobe Analytics with an XDM schema, as you have in this tutorial, some of the XDM fields you have custom-implemented auto-map to Analytics variables, as outlined in this table:

XDM to Analytics auto-mapped variables
Adobe Analytics variable
identitymap.ecid.[0].id
mid
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;;

The individual sections of the Analytics product string are set through different XDM variables under the productListItems object.

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

Set variables in the data object

But what about evars, props, and events? Setting variables in the data object is the recommended way to set these Analytics variables with Web SDK. Setting variables in the data object can also overwrite any of the automatically-mapped variables.

First of all, what is the data object? In any Web SDK event you can send two objects with custom data, the xdm object and the data object. Both are sent to Platform Edge Network, but only the xdm object is sent to the Experience Platform dataset. Properties in the data object can be mapped on the Edge to xdm fields using the Data Prep for Data Collection feature, but otherwise are not sent to Experience Platform. This makes it an ideal way to send data to applications like Analytics, which aren’t natively built on Experience Platform.

Here are the two objects in a generic Web SDK call:

data and xdm objects

Adobe Analytics is configured to look for any properties in the data.__adobe.analytics object and use them for Analytics variables.

Now let’s see how this works. Let’s set eVar1 and prop1 with our page name and see how XDM-mapped value can be overwritten

  1. Open the tag rule all pages - library loaded - set global variables - 1
  2. Add a new Action
  3. Select Adobe Experience Platform Web SDK extension
  4. Select Action Type as Update variable
  5. Select data.variable as the Data element
  6. Select the analytics object
  7. Set eVar1 as the page.pageInfo.pageName data element
  8. Set prop1 to copy the value of eVar1
  9. To test the overwriting of XDM-mapped values, in the Additional property section set the Page name as a static value test
  10. Save the rule

Now, we need to include the data object in our send event rule.

  1. Open the tag rule all pages - library loaded - send event - 50
  2. Open the Send Event action
  3. Select data.variable as the Data
  4. Select Keep Changes
  5. Select Save

Send data to a different report suite

You might want to change which Adobe Analytics report suite data is sent to when visitors are on certain pages. This requires a configuration in both the datastream and a rule.

Configure the datastream for a report suite override

To configure the Adobe Analytics report suite override setting in the datastream:

  1. Open your datastream

  2. Edit the Adobe Analytics configuration by opening the more menu and then selecting Edit

    Overwrite the datastream

  3. Select Advanced Options to open Report Suite Overrides

  4. Select the report suites that you would like to override. In this case, Web SDK Course Dev and Web SDK Course Stg

  5. Select Save

    Overwrite the datastream

Configure a rule for a report suite override

Let’s create a rule to send an additional page view call to a different report suite. Use the datastream override feature to change the report suite for a page using the Send Event Action.

  1. Create a new rule, name it homepage - library loaded - AA report suite override - 51

  2. Select the plus sign under Event to add a new trigger

  3. Under Extension, select Core

  4. Under Event Type, select Library Loaded (Page Top)

  5. Select to open Advanced Options, type in 51. This ensures the rule runs after the all pages - library loaded - send event - 50 that sets the baseline XDM with the Update variable action type.

  6. Select Keep Changes

    Analytics Report Suite Override

  7. Under Conditions, select to Add

  8. Leave Logic Type as Regular

  9. Leave Extensions as Core

  10. Select Condition Type as Path Without Query String

  11. On the right, leave the Regex toggle disabled

  12. Under path equals set /content/luma/us/en.html. For the Luma demo site, it ensures the rule only triggers on the home page

  13. Select Keep Changes

    Analytics report suite override condition

  14. Under Actions select Add

  15. As the Extension, select Adobe Experience Platform Web SDK

  16. As the Action Type, select Send Event

  17. As the XDM data, select the xdm.variable.content data element you created in the Create data elements lesson

  18. As the Data, select the data.variable data element you created in the Create data elements lesson

    Analytics datastream override

  19. Scroll down to the Datastream Configurations Overrides section

  20. Leave the Development tab selected.

    note tip
    TIP
    This tab determines in which tags environment the override occurs. For this excerise, you only specify the Development environment but when you deploy this to production remember to also do it in the Production environment.

  21. Select the Sandbox you are using for the tutorial

  22. Select the Datastream, in this case Luma Web SDK: Development Environment

  23. Under Report suites, select the report site you would like to use to override for. In this case, tmd-websdk-course-stg.

  24. Select Keep Changes

  25. And Save your rule

    Analytics datastream override

Build your Development environment

Add your updated rules to your Luma Web SDK Tutorial tag library and rebuild your development environment.

Congratulations! The next step is to validate your Adobe Analytics Implementation via Experience Platform Web SDK.

Validate Adobe Analytics with Debugger

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.

In the Debugger lesson, you learned how to inspect the client-side XDM request with the Platform Debugger and browser developer console, which is similar to how you debug an AppMeasurement.js Analytics implementation. You also learned about validating Platform Edge Network server-side requests sent to Adobe applications, and how to view a fully processed payload using Assurance.

To validate Analytics is capturing data properly through Experience 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 fully processed by Analytics using Adobe Experience Platform Assurance

Experience Cloud ID validation

  1. Go to the Luma demo site

  2. Select the login button on the top right, and use credentials u: test@adobe.com p: test to authenticate

  3. Open the Experience Platform Debugger and switch the tag property on the site to your own development property

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

  5. It will be empty for now

    Connected Edge Trace

  6. Refresh the Luma page and check Experience Platform Debugger again, you should see data come through. The row starting with Analytics Automatic Mapping is the Adobe Analytics beacon

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

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

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

  10. On the Luma site,

    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

Report suite override validation

Above you configured a datastream override for the Luma homepage. To validate this configuration

  1. Look for a row with Datastream config after override was applied. Here you find the primary report suite and the additional report suite(s) that were configured for the report suite overrides.

    Analytics Report Suite Override List Validation

  2. Scroll down to the row starting with Analytics Automatic Mapping and verify that the reportSuiteIds shows the report suite you specified in your override configurations

    Analytics Report Suite Override Call Validation

Content page views validation

Go to a product page like the Didi Sport Watch product page. Validate that content page views are captured by Analytics.

  1. Look for c.a.x.web.webpagedetails.pageviews.value=1.

  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 validation

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.

First validate that the Product String is set

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

  2. Also look for c.a.x.productlistitems.[0]._experience.analytics.customdimensions.evars.evar1. The variable captures the data element value you mapped to productListItems.item1._experience.analytics.customdimensions.evars.evar1

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

  4. Note that product name from the data layer is mapped both to the c.a.x.productlistitems.[0].sku and the product parameter of the products string. In addition, the product title from the data layer is mapped to merchandising evar1 in the products string.

    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.

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

  6. Also note c.a.x.eventType is set to commerce.productViews since you are on a product page.

    note tip
    TIP
    The ecommerce - pdp library loaded - AA (order 20) rule is overwriting the value of eventType set by the all pages global content variables - library loaded - AA (order 1) rule as it is set to trigger later in the sequence

    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

    • eventType set to commerce.productListViews
    • events: "scView", and
    • the product string is set

    Analytics Cart View

  3. Proceed to checkout, check Edge Trace for

    • eventType set to commerce.checkouts
    • events: "scCheckout", and
    • the product string is set

    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

    • eventType set to commerce.purchases
    • 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

Validate Adobe Analytics using Assurance

Adobe Experience Platform Assurance helps you inspect, proof, simulate, and validate how you collect data or serve experiences with your website and mobile application.

In the previous exercise you validated 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. Next you validate those same events using Adobe Experience Platform Assurance, an alternative interface to access the same data in Edge Trace.

As you learned in the Assurance lesson, there are several ways to initiate an Assurance session. Since you already have Adobe Experience Platform Debugger open with an Edge Trace session initiated from the last exercise, we recommend accessing Assurance through the Debugger:
Assurance through Adobe Experience Platform Data Collection

Within the “Web SDK Tutorial 3” Assurance Session enter “hitdebugger” into the Events Search Bar to filter the results to the Adobe Analytics Post Processed data.
Assurance Adobe Analyitcs Post Processed Data

Experience Cloud ID validation

To validate Adobe Analytics is capturing the ECID, select a beacon and open the Payload. The Vendor for this beacon should be com.adobe.analytics.hitdebugger
Adobe Analytics validation with Assurance

Then scroll down to mcvisId to validate that the ECID is correctly captured
Experience Cloud ID validation with Assurance

Content page views validation

Using the same beacon, validate that content page views are mapped to the correct Adobe Analytics variable.
Scroll down to pageName to validate that the Page Name is correctly captured
Page name validation with Assurance

Product string and e-commerce events validation

Following the same validation use cases used when validating with the Experience Platform Debugger above, continue using the same beacon to validate the Ecommerce Events and the Product String.

  1. Look for payload where the events contain prodView
    Product String validation with Assurance
  2. Scroll down to product-string to validate the Product String.
    • Note the Product SKU and Merchandizing eVar1.
  3. Scroll down further and validate that prop1, which you configured using processing rules in the previous section, contains the Product SKU
    Product String with Merchandizing Variables validation with Assurance

Continue to validate your implementation by reviewing the cart, checkout, and purchase events.

  1. Look for payload where the events contain scView and validate the product string.
    Product String validation with Assurance
  2. Look for payload where the events contain scCheckout and validate the product string.
    Product String validation with Assurance
  3. Look for payload where the events contain purchase
    Product String validation with Assurance
  4. When validating the purchase event, note that the Product String should contain the Product SKU, Product Quantity , and Product Total Price.
  5. In addition, for the purchase validate that the purchase-id and/or purchaseId are set

Congratulations! You did it! 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, please share them on this Experience League Community discussion post
recommendation-more-help
8cbc0fd8-ca1d-433b-9c3d-bc3f113347d4