DocumentationExperience PlatformWeb SDK Tutorial

Set up Adobe Analytics with Adobe Experience Platform Web SDK

Last update: Fri Apr 26 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 custom Analytics variables using the Adobe Analytics ExperienceEvent Template field group or processing rules
  • 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.

XDM schemas and Analytics variables

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

But you might be wondering, how do I set all my props, evars and events?

There are several approaches, which can be used simultaneously:

  1. Set standard XDM fields and some will automatically map to Analytics variables.
  2. Map additional XDM fields to Analytics variables in Analytics processing rules.
  3. Map to Analytics variables directly in the XDM schema.

Automatically mapped fields

Many XDM fields are automatically mapped to Analytics variables.

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

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.

For the most up-to-date list of mappings, please see Analytics variable mapping in Adobe Experience Edge.

Map to Analytics variables with processing rules

All fields in the XDM schema become available to Adobe Analytics as Context Data Variables with the following prefix a.x.. For example, a.x.web.webinteraction.region

In this exercise, you map one XDM variable to a prop. Follow these same steps for any custom mapping that you must do for any eVar, prop, event, or variable accessible via Processing Rules.

  1. Go to the Analytics interface

  2. Go to Admin > Admin Tools > Report Suites

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

    Analytics Purchase

  4. Create a rule to Overwrite value of Product SKU (prop1) to a.x.productlistitems.0.sku. Remember to add a note about 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.

Map to Analytics variables using the Adobe Analytics field group

An alternative to processing rules is to map to Analytics variables in the XDM schema using the Adobe Analytics ExperienceEvent Template field group. This approach has gained popularity because many users find it simpler than configuring processing rules, however, by increasing the size of the XDM payload it could in turn increase the profile size in other applications like Real-Time CDP.

To add the Adobe Analytics ExperienceEvent Template field group to your schema:

  1. Open the Data Collection interface
  2. Select Schemas from the left navigation
  3. Make sure you are in the sandbox you are using from the tutorial
  4. Open your Luma Web Event Data schema
  5. In the Field Groups section, select Add
  6. Find the Adobe Analytics ExperienceEvent Template field group and add it to your schema

Now, set a merchandising eVar in the product string. With the Adobe Analytics ExperienceEvent Template field group, you are able to map variables to merchandising eVars or events within the product string. This is also known as setting Product Syntax Merchandising.

  1. Go back to your tag property

  2. Open the rule ecommerce - library loaded - set product details variables - 20

  3. Open the Set Variable action

  4. Select to open _experience > analytics > customDimensions > eVars > eVar1

  5. Set the Value to %product.productInfo.title%

  6. Select Keep Changes

    Product SKU XDM object Variable

  7. Select Save to save the rule

As you just saw, basically all of the Analytics variables can be set in the Adobe Analytics ExperienceEvent Template field group.

NOTE
Notice the _experience object under productListItems > Item 1. Setting any variable under this object sets Product Syntax eVars or Events.

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 the Advance 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

  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.

    Analytics Report Suite Override

  6. Under Conditions, select to Add

  7. Leave Logic Type as Regular

  8. Leave Extensions as Core

  9. Select Condition Type as Path Without Query String

  10. On the right, leave the Regex toggle disabled

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

  12. Select Keep Changes

    Analytics report suite override condition

  13. Under Actions select Add

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

  15. As the Action Type, select Send Event

  16. As the Type, select web.webpagedetails.pageViews

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

    Analytics datastream override

  18. Scroll down to the Datastream Configurations Overrides section

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

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

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

  22. Select Keep Changes

  23. And Save your rule

    Analytics datastream override

Build your Development environment

Add your new data elements and 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