While you can use the Data Connection extension to publish and subscribe to storefront events, some merchants might already be using a data collection solution, such as the Adobe Experience Platform tags. For those merchants, Adobe Commerce provides a publishing only option in the Data Connection extension that uses the Adobe Commerce Event SDK.
Data Connection Extension Data Flow with Tags
In this topic, you will learn how to map the storefront event values provided by the Data Connection extension to the Adobe Experience Platform tags solution you are already using.
To collect Commerce event data:
Install the Adobe Commerce Events SDK. For PHP storefronts, see the install topic. For PWA Studio storefronts, see the PWA Studio guide.
Do not configure the Organization ID and Datastream ID.
To map Commerce storefront data to Adobe Experience Platform, configure and install the following from within Adobe Experience Platform tags:
Set up a tag property in Adobe Experience Platform Data Collection.
Under Authoring, select Extensions and install and configure the following extensions:
Publish tag to your development environment.
Follow the Event Mapping steps below to configure data elements and rules for specific events.
Because data collection using tags is different from using the Adobe Commerce Event SDK, it is important to understand the equivalent terms used in both frameworks.
Adobe Experience Platform tags term | Adobe Commerce Event SDK term |
---|---|
data elements | context |
rules | event |
rule conditions - event listeners (from ACDL) rule actions - event handlers (send to Adobe Experience Platform) |
When you update the data elements and rules in Adobe Experience Platform tags with Adobe Commerce-specific event data, there are some common steps you will take.
For example, let’s add the Adobe Commerce signOut
event to Adobe Experience Platform tags. The steps outlined below, except for specific values you set, describe how to add data elements and rules, which apply to all Adobe Commerce events you are adding to tags.
Create a Data Element:
Create New Data Element
Set Name to sign out
.
Set Extension to Adobe Experience Platform Web SDK
.
Set Data Element Type to XDM object
.
Select the Sandbox and Schema that you want to update.
Under userAccount > logout, set the value in Visitor Logout to 1
.
Update Sign out value
Select Save.
Create a Rule:
Create New Rule
Select Add under EVENTS.
Set Extension to Adobe Client Data Layer
.
Set Event Type to Data Pushed
.
Select Specific Event and set the Event/Key to register for to sign-out
.
Select Keep Changes to save the new rule.
Add an action.
Set Extension to Adobe Experience Platform Web SDK
.
Set Action Type to Send Event
.
Set Instance to Alloy
.
Set Type to userAccount.logout
.
Set XDM data to %sign out%
.
Click Save.
You created a data element in your schema for the signOut
event from Adobe Commerce. Also, you created a rule with a specific action that should occur when that event is fired from the Adobe Commerce storefront.
Repeat the above steps in tags for each of the Adobe Commerce events described below.
For each of the following events, map the Adobe Commerce events to your XDM by following the above steps.
signOut
signIn
createAccount
editAccount
pageView
productView
searchRequestSent
searchResponseReceived
addToCart
openCart
viewCart
removeFromCart
initiateCheckout
placeOrder
Triggered when a shopper attempts to sign out.
Create the following data element:
Sign out:
Sign out
Adobe Experience Platform Web SDK
XDM object
userAccount
> logout
1
Sign out
Adobe Client Data Layer
Data Pushed
sign-out
Adobe Experience Platform Web SDK
Send event
userAccount.logout
%sign-out%
Triggered when a shopper attempts to sign in.
Create the following data elements:
Account email:
account email
Adobe Client Data Layer
Data Layer Computed State
accountContext.emailAddress
Account type:
account type
Adobe Client Data Layer
Data Layer Computed State
accountContext.accountType
Account ID:
account id
Adobe Client Data Layer
Data Layer Computed State
accountContext.accountId
Sign in:
sign in
Adobe Experience Platform Web SDK
XDM object
person
> accountID
%account id%
person
> accountType
%account type%
person
> personalEmailID
%account email%
personalEmail
> address
%account email%
userAccount
> login
1
sign in
Adobe Client Data Layer
Data Pushed
sign-in
Adobe Experience Platform Web SDK
Send event
userAccount.login
%sign in%
Triggered when a shopper attempts to create an account.
Create the following data elements:
Account email:
account email
Adobe Client Data Layer
Data Layer Computed State
accountContext.emailAddress
Account type:
account type
Adobe Client Data Layer
Data Layer Computed State
accountContext.accountType
Account ID:
account id
Adobe Client Data Layer
Data Layer Computed State
accountContext.accountId
Create account:
Create account
Adobe Experience Platform Web SDK
XDM object
person
> accountID
%account id%
person
> accountType
%account type%
person
> personalEmailID
%account email%
personalEmail
> address
%account email%
userAccount
> createProfile
1
Create account
Adobe Client Data Layer
Data Pushed
create-account
Adobe Experience Platform Web SDK
Send event
userAccount.createProfile
%create account%
Triggered when a shopper attempts to edit an account.
Create the following data elements:
Account email:
account email
Adobe Client Data Layer
Data Layer Computed State
accountContext.emailAddress
Account type:
account type
Adobe Client Data Layer
Data Layer Computed State
accountContext.accountType
Account ID:
account id
Adobe Client Data Layer
Data Layer Computed State
accountContext.accountId
Edit account:
Edit account
Adobe Experience Platform Web SDK
XDM object
person
> accountID
%account id%
person
> accountType
%account type%
person
> personalEmailID
%account email%
personalEmail
> address
%account email%
userAccount
> updateProfile
1
Edit account
Adobe Client Data Layer
Data Pushed
edit-account
Adobe Experience Platform Web SDK
Send event
userAccount.updateProfile
%edit account%
Triggered when any page loads.
Create the following data elements:
Page name:
page name
Adobe Client Data Layer
Data Layer Computed State
pageContext.pageName
page view
Adobe Client Data Layer
Data Pushed
page-view
Adobe Experience Platform Web SDK
Send event
web.webPageDetails.pageViews
%page view%
Triggered when any product page loads.
Create the following data elements:
Product name:
product name
Adobe Client Data Layer
Data Layer Computed State
productContext.name
Product SKU:
product sku
Adobe Client Data Layer
Data Layer Computed State
productContext.sku
Product Image URL:
product image
Adobe Client Data Layer
Data Layer Computed State
productContext.mainImageUrl
Product currency:
product currency
Adobe Client Data Layer
Data Layer Computed State
productContext.pricing.currencyCode
Currency code:
currency code
Core
Custom Code
return _satellite.getVar('product currency') || _satellite.getVar('storefront').storeViewCurrencyCode
Special price:
special price
Adobe Client Data Layer
Data Layer Computed State
productContext.pricing.specialPrice
Regular price:
regular price
Adobe Client Data Layer
Data Layer Computed State
productContext.pricing.regularPrice
Product price:
product price
Core
Custom Code
return _satellite.getVar('product regular price') || _satellite.getVar('product special price')
Product view:
product view
Adobe Experience Platform Web SDK
XDM object
productListItems
. Select Provide individual items and click the Add item button. Because this view is for a PDP, you can populate with a single item.productListItems
> name
%product name%
productListItems
> SKU
%product sku%
productListItems
> priceTotal
%product price%
productListItems
> currencyCode
%currency code%
productListItems
> ProductImageUrl
%product image%
commerce
> productViews
> value
1
product view
Adobe Client Data Layer
Data Pushed
product-page-view
Adobe Experience Platform Web SDK
Send event
commerce.productViews
%product view%
Triggered by events in the “search as you type” popover and by events on search results pages.
Create the following data elements:
Search input
search input
Adobe Client Data Layer
Data Layer Computed State
searchInputContext.units[0]
Search input phrase
search input phrase
Core
Custom Code
return _satellite.getVar('search input').phrase;
Search input sort
search input sort
Core
Custom Code
const searchInput = _satellite.getVar('search input');
const sortFromInput = searchInput ? searchInput.sort : [];
const sort = sortFromInput.map((searchSort) => {
return {
attribute: searchSort.attribute,
order: searchSort.direction,
};
});
return sort;
Search input filters
search input filters
Core
Custom Code
const searchInput = _satellite.getVar('search input');
const filtersFromInput = searchInput ? searchInput.filter : [];
const filters = filtersFromInput.map(
(searchFilter) => {
let value = [];
let isRange = false;
if (searchFilter.eq) {
value.push(searchFilter.eq);
} else if (searchFilter.in) {
value = searchFilter.in;
} else if (searchFilter.range) {
isRange = true;
value.push(String(searchFilter.range.from));
value.push(String(searchFilter.range.to));
}
return {
attribute: searchFilter.attribute,
value,
isRange,
};
}
);
return filters;
Search request:
search request
Adobe Experience Platform Web SDK
XDM object
siteSearch
> phrase
siteSearch
> sort
. Select Provide entire object.siteSearch
> filter
. Select Provide entire object.searchRequest
> id
%search request ID%
searchRequest
> value
1
search request sent
Adobe Client Data Layer
Data Pushed
search-request-sent
Adobe Experience Platform Web SDK
Send event
searchRequest
%search request%
Triggered when Live Search returns results for the “search as you type” popover or search results page.
Create the following data elements:
Search results:
search results
Adobe Client Data Layer
Data Layer Computed State
searchResultsContext.units[0]
Search result number of products:
search result number of products
Core
Custom Code
return _satellite.getVar('search result').products.length;
Search result products:
search result products
Core
Custom Code
const searchResult = _satellite.getVar('search result');
const productsFromResult = searchResult.products ? searchResult.products : [];
const products = productsFromResult.map(
(product) => {
return { SKU: product.sku, name: product.name };
}
);
return products;
Search result suggestions:
search result products
Core
Custom Code
const searchResult = _satellite.getVar('search result');
const suggestionsFromResult = searchResult.suggestions ? searchResult.suggestions : [];
const suggestions = suggestionsFromResult.map((suggestion) => suggestion.suggestion);
return suggestions;
Product Image URL:
product image
Adobe Client Data Layer
Data Layer Computed State
productContext.mainImageUrl
Search response:
search response
Adobe Experience Platform Web SDK
XDM object
siteSearch
> suggestions
. Select Provide entire object.%search result suggestions%
siteSearch
> numberOfResults
%search result number of products%
productListItems
. Select Provide entire object.productListItems
> ProductImageUrl
%product image%
%search result products%
searchResponse
> id
%search response ID%
searchResponse
> value
1
search response received
Adobe Client Data Layer
Data Pushed
search-response-received
Adobe Experience Platform Web SDK
Send event
searchResponse
%search response%
Triggered when a product is added to a cart or every time the quantity of a product in the cart is incremented.
Create the following data elements:
Product name:
product name
Adobe Client Data Layer
Data Layer Computed State
productContext.name
Product sku:
product sku
Adobe Client Data Layer
Data Layer Computed State
productContext.sku
Currency code:
currency code
Adobe Client Data Layer
Data Layer Computed State
productContext.pricing.currencyCode
Product special price:
product special price
Adobe Client Data Layer
Data Layer Computed State
productContext.pricing.specialPrice
Product Image URL:
product image
Adobe Client Data Layer
Data Layer Computed State
productContext.mainImageUrl
Product regular price:
product regular price
Adobe Client Data Layer
Data Layer Computed State
productContext.pricing.regularPrice
Product price:
product price
Core
Custom Code
return _satellite.getVar('product regular price') || _satellite.getVar('product special price')
Cart:
cart
Adobe Client Data Layer
Data Layer Computed State
shoppingCartContext
Cart id:
cart id
Core
Custom Code
return _satellite.getVar('cart').id
Add to cart:
add to cart
Adobe Experience Platform Web SDK
XDM object
productListItems
. Select Provide individual items and click the Add item button. Because this view is for a PDP, you can populate with a single item.productListItems
> name
%product name%
productListItems
> SKU
%product sku%
productListItems
> priceTotal
%product price%
productListItems
> currencyCode
productListItems
> ProductImageUrl
%product image%
%currency code%
commerce
> cart
> cartID
%cart id%
commerce
> productListAdds
> value
1
add to cart
Adobe Client Data Layer
Data Pushed
add-to-cart
Adobe Experience Platform Web SDK
Send event
commerce.productListAdds
%add to cart%
Triggered when a new cart is created, which happens when a product is added to an empty cart.
Create the following data element:
Open cart:
open cart
Adobe Experience Platform Web SDK
XDM object
commerce
> productListOpens
> value
1
commerce
> cart
> cartID
%cart id%
productListItems
. For productListItems
, multiple items can be precomputed. Select productListItems > Provide entire array.open cart
Adobe Client Data Layer
Data Pushed
open-cart
Adobe Experience Platform Web SDK
Send event
commerce.productListOpens
%open cart%
Triggered when any cart page loads.
Create the following data elements:
Storefront:
storefront
Adobe Client Data Layer
Data Layer Computed State
storefrontInstanceContext
Product Image URL:
product image
Adobe Client Data Layer
Data Layer Computed State
productContext.mainImageUrl
cart
Adobe Client Data Layer
Data Layer Computed State
shoppingCartContext
Cart id:
cart id
Core
Custom Code
return _satellite.getVar('cart').id
Product list items:
product list items:
Core
Custom Code
const storefrontContext = _satellite.getVar('storefront');
const cart = _satellite.getVar('cart');
const returnList = [];
cart.items.forEach(item => {
const selectedOptions = [];
item.configurableOptions?.forEach(option => {
selectedOptions.push({
attribute: option.optionLabel,
value: option.valueLabel,
});
});
const productListItem = {
SKU: item.product.sku,
name: item.product.name,
quantity: item.quantity,
priceTotal: item.prices.price.value * item.quantity,
currencyCode: item.prices.price.currency ? item.prices.price.currency : storefrontContext.storeViewCurrencyCode,
selectedOptions: selectedOptions,
};
returnList.push(productListItem);
});
return returnList;
View cart:
view cart
Adobe Experience Platform Web SDK
XDM object
productListItems
. For productListItems
, there can be multiple items that are precomputed. Select productListItems > Populate entire array.%product list items%
productListItems
> ProductImageUrl
%product image%
commerce
> cart
> cartID
%cart id%
commerce
> productListViews
> value
1
view cart
Adobe Client Data Layer
Data Pushed
shopping-cart-view
Adobe Experience Platform Web SDK
Send event
commerce.productListViews
%view cart%
Triggered when a product is removed from a cart or every time the quantity of a product in the cart is decremented.
Create the following data elements:
Product name:
product name
Adobe Client Data Layer
Data Layer Computed State
productContext.name
Product sku:
product sku
Adobe Client Data Layer
Data Layer Computed State
productContext.sku
Currency code:
currency code
Adobe Client Data Layer
Data Layer Computed State
productContext.pricing.currencyCode
Product special price:
product special price
Adobe Client Data Layer
Data Layer Computed State
productContext.pricing.specialPrice
Product regular price:
product regular price
Adobe Client Data Layer
Data Layer Computed State
productContext.pricing.regularPrice
Product price:
product price
Core
Custom Code
return _satellite.getVar('product regular price') || _satellite.getVar('product special price')
Cart:
cart
Adobe Client Data Layer
Data Layer Computed State
shoppingCartContext
Cart id:
cart id
Core
Custom Code
return _satellite.getVar('cart').id
Remove from cart:
remove from cart
Adobe Experience Platform Web SDK
XDM object
productListItems
. Select Provide individual items and click the Add item button. Because this view is for a PDP, you can populate with a single item.productListItems
> name
%product name%
productListItems
> SKU
%product sku%
productListItems
> priceTotal
%product price%
productListItems
> currencyCode
%currency code%
commerce
> cart
> cartID
%cart id%
commerce
> productListRemovals
> value
1
remove from cart
Adobe Client Data Layer
Data Pushed
remove-from-cart
Adobe Experience Platform Web SDK
Send event
commerce.productListRemovals
%remove from cart%
Triggered when the shopper clicks a checkout button.
Create the following data elements:
Storefront:
storefront
Adobe Client Data Layer
Data Layer Computed State
storefrontInstanceContext
Product Image URL:
product image
Adobe Client Data Layer
Data Layer Computed State
productContext.mainImageUrl
Cart:
cart
Adobe Client Data Layer
Data Layer Computed State
shoppingCartContext
Cart id:
cart id
Core
Custom Code
return _satellite.getVar('cart').id
Product list items:
product list items
Core
Custom Code
const storefrontContext = _satellite.getVar('storefront');
const cart = _satellite.getVar('cart');
const returnList = [];
cart.items.forEach(item => {
const selectedOptions = [];
item.configurableOptions?.forEach(option => {
selectedOptions.push({
attribute: option.optionLabel,
value: option.valueLabel,
});
});
const productListItem = {
SKU: item.product.sku,
name: item.product.name,
quantity: item.quantity,
priceTotal: item.prices.price.value * item.quantity,
currencyCode: item.prices.price.currency ? item.prices.price.currency : storefrontContext.storeViewCurrencyCode,
selectedOptions: selectedOptions,
};
returnList.push(productListItem);
});
return returnList;
Initiate checkout:
initiate checkout
Adobe Experience Platform Web SDK
XDM object
productListItems
. For productListItems
, there can be multiple items that are precomputed. Select productListItems > Populate entire array.%product list items%
productListItems
> ProductImageUrl
%product image%
commerce
> cart
> cartID
%cart id%
commerce
> checkouts
> value
1
initiate checkout
Adobe Client Data Layer
Data Pushed
initiate-checkout
Adobe Experience Platform Web SDK
Send event
commerce.checkouts
%initiate checkout%
Triggered when the shopper places an order.
Create the following data elements:
Account email:
account email
Adobe Client Data Layer
Data Layer Computed State
accountContext.emailAddress
Storefront:
storefront
Adobe Client Data Layer
Data Layer Computed State
storefrontInstanceContext
Product Image URL:
product image
Adobe Client Data Layer
Data Layer Computed State
productContext.mainImageUrl
Cart:
cart
Adobe Client Data Layer
Data Layer Computed State
shoppingCartContext
Cart id:
cart id
Core
Custom Code
return _satellite.getVar('cart').id
Order:
order
Adobe Client Data Layer
Data Layer Computed State
orderContext
Commerce order:
commerce order
Core
Custom Code
const order = _satellite.getVar('order');
const storefront = _satellite.getVar('storefront');
if (order.payments && order.payments.length) {
payments = order.payments.map(payment => {
return {
paymentAmount: payment.total,
paymentType: payment.paymentMethodCode,
transactionID: order.orderId.toString(),
};
});
} else {
payments = [
{
paymentAmount: order.grandTotal,
paymentType: order.paymentMethodCode,
transactionID: order.orderId.toString(),
},
];
}
return {
purchaseID: order.orderId.toString(),
currencyCode: storefront.storeViewCurrencyCode,
payments,
};
Order shipping:
order shipping
Core
Custom Code
const order = _satellite.getVar('order');
return {
shippingMethod: order.shipping.shippingMethod,
shippingAmount: order.shipping.shippingAmount || 0,
}
Promotion id:
promotion id
Core
Custom Code
return _satellite.getVar('order').appliedCouponCode
Product list items:
product list items
Core
Custom Code
const storefrontContext = _satellite.getVar('storefront');
const cart = _satellite.getVar('cart');
const returnList = [];
cart.items.forEach(item => {
const selectedOptions = [];
item.configurableOptions?.forEach(option => {
selectedOptions.push({
attribute: option.optionLabel,
value: option.valueLabel,
});
});
const productListItem = {
SKU: item.product.sku,
name: item.product.name,
quantity: item.quantity,
priceTotal: item.prices.price.value * item.quantity,
currencyCode: item.prices.price.currency ? item.prices.price.currency : storefrontContext.storeViewCurrencyCode,
selectedOptions: selectedOptions,
};
returnList.push(productListItem);
});
return returnList;
Place order:
place order
Adobe Experience Platform Web SDK
XDM object
productListItems
. For productListItems
, there can be multiple items that are precomputed. Select productListItems > Populate entire array.%product list items%
productListItems
> ProductImageUrl
%product image%
commerce
> order
%commerce order%
commerce
> shipping
%order shipping%
commerce
> promotionID
%promotion id%
commerce
> purchases
> value
1
%account email%
personalEmail
> address
%account email%
place order
Adobe Client Data Layer
Data Pushed
place-order
Adobe Experience Platform Web SDK
Send event
commerce.order
%place order%
Storefront events contain profile information based on the personalEmail
(for account events) and identityMap
(for all other storefront events) fields. The Data Connection extension joins and generates profiles based on these two fields. Each field, however, has different steps to follow to create profiles:
If you have a previous setup that relies on different fields, you can continue to use those.
personalEmail
- Applies to account events only. Follow the steps, rules, and actions outlined aboveidentityMap
- Applies to all other storefront events. See the following example.The following steps show how to configure a pageView
event with identityMap
in Data Connection extension:
Configure data element with custom code for ECID:
Configure data element with custom code
Select Open Editor and add the following custom code:
return alloy("getIdentity").then((result) => {
var identityMap = {
ECID: [
{
id: ecid,
primary: true
}
],
email: [
{
id: email,
primary: false
}
]
};
_satelite.setVar("identityMap", identityMap);
});
Update XDM schema with identityMap
set as ECID:
Set identityMap as ECID
Define rule actions that retrieve ECID:
Retrieve ECID
Unlike storefront events that use ECID to identity and link profile information, back office event data is SaaS-based and therefore no ECID is available. For back office events, you must use email to uniquely identify shoppers. In this section, you will learn how to link back office event data to an ECID using email.
Create an identity map element.
Create back office identity map
Select Open Editor and add the following custom code:
const IdentityMap = {
"ECID": [
{
id: _satellite.getVar('ECID'),
primary: true,
},
],
};
if (_satellite.getVar('account email')) {
IdentityMap.email = [
{
id: _satellite.getVar('account email'),
primary: false,
},
];
}
return IdentityMap;
Add this new element to each identityMap
field.
Update each identityMap
When you install the Data Connection extension in Adobe Commerce, data collection consent is enabled by default. Opt-out is managed through the mg_dnt
cookie. You can follow the steps outlined here if you choose to use mg_dnt
to manage consent. The Adobe Experience Platform Web SDK documentation has several additional options for managing consent.
Create a Core Custom Code data element (%do not track cookie%
) for the mg_dnt
cookie:
Create do not track data element
Create a Core Custom Code data element (%consent%
) that returns out
if cookie is set and in
otherwise:
Create consent data element
Configure Adobe Experience Platform Web SDK Extension with %consent%
data element:
Update SDK with consent