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:
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:
- Automatically mapped variables using reserved XDM fields
- 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:
identitymap.ecid.[0].id
web.webPageDetails.pageViews.value
web.webPageDetails.name
web.webPageDetails.server
web.webPageDetails.siteSection
commerce.productViews.value
commerce.productListViews.value
commerce.checkouts.value
commerce.purchases.value
commerce.order.currencyCode
commerce.order.purchaseID
productListItems[].SKU
productListItems[].name
productListItems[].quantity
productListItems[].priceTotal
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.
-
Go to Data Collection interface
-
On the left navigation, select Datastreams
-
Select the previously created
Luma Web SDK
datastream -
Select Add Service
-
Select Adobe Analytics as the Service
-
Enter the Report Suite ID of your development report suite
-
Select Save
note tip 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:
-
Open the tag property you are using for the tutorial
-
Go to Data Elements
-
Select Add Data Element
-
Name it
product.productInfo.sku
-
Use the Custom Code Data Element Type
-
Leave check boxes for Force lowercase value and Clean text unchecked
-
Leave
None
as the Storage Duration setting since this value is different on every page -
Select Open Editor
-
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;
-
Select Save to save the custom code
-
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:
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
- identityMap to capture the authenticated ID as per the Create Identity Map Data Element exercise in the Create Data Elements lesson.
- web object to capture content as per the content XDM object exercise in the Create Data Elements lesson on every data element above.
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.
-
Open your
xdm.content
data element -
Scroll down and select to open until
web.webPageDetails
-
Select to open the pageViews object
-
Set value to
1
-
Select Save
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:
- The
commerce
object sets Analytics events such asprodView
,scView
, andpurchase
- The
productListItems
object sets Analytics dimensions such asproductID
.
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:
-
Create an XDM object Data Element Type named
xdm.commerce.prodView
-
Select the same Platform sandbox and XDM schema used in previous lessons
-
Open the commerce object
-
Open the productViews object and set value to
1
note tip TIP This step is equivalent to setting prodView
event in Analytics -
Scroll down to and select
productListItems
array -
Select Provide individual items
-
Select Add Item
note caution CAUTION The productListItems
is anarray
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. -
Select to open Item 1
-
Map the following XDM variables to data elements
productListItems.item1.SKU
to%product.productInfo.sku%
productListItems.item1.name
to%product.productInfo.title%
note important IMPORTANT Before you save this XDM object, make sure you set the “global” variables and page view incrementer as well:
-
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).
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.Now back to mapping the XDM object to an entire array. Create an XDM object data element to capture products on the cart page:
-
Create an XDM object Data Element Type named
xdm.commerce.cartView
-
Select the same Platform sandbox and XDM schema you are using for this tutorial
-
Open the commerce object
-
Open the productListViews object and set
value
to1
note tip TIP This step is equivalent to setting scView
event in Analytics -
Scroll down to and select productListItems array
-
Select Provide entire array
-
Map to
cart.productInfo
data elementnote important IMPORTANT Before you save this XDM object, make sure you set the “global” variables and page view incrementer as well:
-
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.
scCheckout
event in AnalyticsThere are additional steps for capturing the purchase
event:
-
Create another XDM object Data Element Type for purchases called
xdm.commerce.purchase
-
Open commerce object
-
Open the order object
-
Map purchaseID to the
cart.orderId
data element -
Set currencyCode to the hardcoded value
USD
note tip TIP This is equivalent to setting s.purcahseID
ands.currencyCode
variables in Analytics -
Select to open the
purchases
object and setvalue
to1
note tip TIP This is equivalent to setting purchase
event in Analyticsnote important IMPORTANT Before you save this XDM object, make sure you set the “global” variables and page view incrementer as well:
-
Select Save
At the end of these steps, you should have the following five XDM object data elements created:
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.
-
From the left navigation, select Rules and then select Add Rule
-
Name it
product view - library load - AA
-
Under Events, select Library Loaded (Page Top)
-
Under Conditions, select to Add
-
Leave Logic Type as Regular
-
Leave Extensions as Core
-
Select Condition Type as Path Without Query String
-
On the right, enable the Regex toggle
-
Under path equals set
/products/
. For the Luma demo site, it ensures the rule only triggers on product pages -
Select Keep Changes
-
Under Actions select Add
-
Select Adobe Experience Platform Web SDK extension
-
Select Action Type as Send event
-
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. -
Under XDM Data, select the
xdm.commerce.prodView
XDM object data element -
Select Keep Changes
-
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:
- Validate how data is processed by the XDM object on the Platform Edge Network, using Experience Platform Debugger’s Edge Trace feature
- 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
-
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. -
On Luma, select the login button on the top right, and use credentials u: test@adobe.com p: test to authenticate
-
You will be automatically redirected to the Didi Sport Watch product page on the next page load
-
-
To enable the Edge Trace, go to Experience Platform Debugger, in the left navigation select Logs, then select the Edge tab, and select Connect
-
It will be empty for now
-
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
-
Select to open both the
mappedQueryParams
dropdown and the second dropdown to view Analytics variablesnote 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. -
Scroll down to find
c.a.x.identitymap.ecid.[0].id
. It is a Context Data Variable that captures ECID -
Keep scrolling down until you see the Analytics
mid
variable. Both IDs match with your device’s Experience Cloud ID.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 thec.a.x.identitymap.lumacrmid.[0].id
Content page views
You use the same beacon to validate content page views are captured by Analytics.
-
Look for
c.a.x.web.webpagedetails.pageviews.value=1
. It tells you ans.t()
page view beacon is being sent to Analytics -
Scroll down to see the
gn
variable. It is the Analytics dynamic syntax for thes.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.
-
First validate that the
Product String
is set -
Look for
c.a.x.productlistitems.[0].sku
. The variable captures the data element value you mapped to theproductListItems.item1.sku
earlier in this lesson -
Scroll down to see the
pl
variable. It is the dynamic syntax of the Analytics product string variable -
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
.
-
Back on the Experience Platform Debugger window, scroll down to the
event
variable, it is set toprodView
Validate the rest of e-commerce events and product strings are set for Analytics.
-
Add Didi Sport Watch to cart
-
Go to the Cart Page, check Edge Trace for
events: "scView"
and the product string -
Proceed to checkout, check Edge Trace for
events: "scCheckout"
and the product string -
Fill out just the First Name and Last Name fields on the shipping form and select Continue. On the next page, select Place Order
-
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
- Purchase event being set
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.
-
In the Analytics UI, go to Admin > Admin Tools > Report Suites
-
Select the dev/test report suite you are using for the tutorial > Edit Settings > General > Processing Rules
-
Create a rule to Overwrite value of
Product Name (prop1)
toa.x.productlistitems.0.name
. Remember to add your note why you are creating the rule and name your rule title. Select Savenote 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. -
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
-
Repeat the validation steps and you should see that Real-Time reports populate data accordingly.
Page Views
Product Views
Purchases
-
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