> For the complete documentation index, see [llms.txt](https://developer.esw.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://developer.esw.com/checkout-api/resources/checkout-ui-metadata/sending-checkout-ui-metadata.md).
# Sending Checkout UI Metadata
ESW has a flexible offering whereby retailers can send across various metadata to get a variety of information available for use in analytics and marketing platforms.
More specifically, as a retailer, you can send various types of metadata to the ESW dataLayer during the checkout process via Checkout API. This metadata can be broadly categorised into two categories:
* Item (Product) Level Metadata: Information that is specific to the individual items or products in the order.If you would like to send additional metadata at an item level it will require mapping from the checkout team as well as the analytics team. See below. Examples could include:
* Product SKU
* Manufacturer Details
* Product Dimensions
* Order Level Metadata: General information about the entire order that is not tied specifically to a product or item. This metadata is sent in the ShopperCheckoutExperience section and does not require checkout mapping. See below. Examples could include:
* Shipping Method
* Promo Code Used
If you would like to add additional metadata to be sent during the checkout process please send your ESW representative the following:
1. Metadata item Sent
2. Name in dataLayer
3. Whether you would like it to be visible in the UI or not
Once this is done the Checkout or dataLayer will be mapped by the ESW team. Continue reading below to understand what happens next.
## Step 1: Checkout Step
This step is only required for item level metadata. Order level metadata is added under the in the ShopperCheckoutExperience section and does not require checkout mapping.
1. Send the additional product information via the product metadata functionality in the Checkout API request.
2. You will be then required to specify which metadata sections you would want to be hidden from the shopper and not displayed at the checkout.
3. Then you will send the metadata to the dataLayer which will then be sent to analytics tools.
You can also send custom parameters as a part of the metadata. The upcoming sections will outline how you can send custom parameters.
### Sending Standard Metadata Parameters
* If no item parameters are sent in the preorder payload, it is set to null in the datalayer.
The following is a sample pre-order payload that includes all 12 parameters for each item. There are 2 products in this pre-order under metadata. It is very important that the name matches exactly as below or the mapping will not be applied.
The following is a sample pre-order payload that includes all 12 parameters for each item. There are 2 products in this pre-order under metadata. It is very important that the name matches exactly as below or the mapping will not be applied.
Example: Complete pre-order payload for Checkout
{% code expandable="true" %}
```json
{
"retailerCartId": "5956865xxxxx",
"contactDetails": [
{
"contactDetailsType": "IsDelivery",
"contactDetailsNickName": null,
"address1": "Address 1",
"address2": "Address 2",
"address3": null,
"city": "Chisinau",
"postalCode": null,
"region": null,
"country": "AU",
"email": null,
"firstName": "First Name",
"lastName": "Last Name",
"gender": "None",
"telephone": null,
"poBox": null
}
],
"retailerPromoCodes": [
{
"promoCode": "PROMO1",
"title": "Promo 1",
"description": "Promo code #1"
}
],
"cartItems": [
{
"quantity": 1,
"estimatedDeliveryDate": "2030-05-30T10:38:26.350Z",
"lineItemId": "1",
"product": {
"productCode": "20108763660193",
"upc": null,
"title": "Black Dress",
"description": "Black Striped Dress",
"shopperCurrencyProductPriceInfo": {
"title": "Shopper price",
"description": "Shopper price info",
"price": "xxx",
"discountAmount": "xxx",
"beforeDiscount": "xxx",
"discountPercentage": null
},
"imageUrl": "assets/images/cart/cart-item1.png",
"color": "Black",
"size": "M",
"metadataItems": [
{
"name": "item_brand",
"value": "New utems brand test datalayer 1"
},
{
"name": "item_category",
"value": "Item 1 Category 1"
},
{
"name": "item_category2",
"value": "Item 1 Category 2"
},
{
"name": "item_category3",
"value": "Item 1 Category 3"
},
{
"name": "item_category4",
"value": "Item 1 Category 4"
},
{
"name": "item_category5",
"value": "Item 1 Category 5"
},
{
"name": "item_list_id",
"value": "111"
},
{
"name": "item_list_name",
"value": "New items list name for the product 1"
},
{
"name": "location_id",
"value": "555"
},
{
"name": "promotion_id",
"value": "123"
},
{
"name": "promotion_name",
"value": "New Promotion items 1"
},
{
"name": "item_variant",
"value": "items 1"
}
],
"isNonStandardCatalogItem": true
},
"cartGrouping": "Group 1",
"metadataItems": []
},
{
"quantity": 2,
"estimatedDeliveryDate": "2030-05-28T15:08:09.964Z",
"lineItemId": "2",
"product": {
"productCode": "3701018206001",
"upc": null,
"title": "Red Dress",
"description": "Red Striped Dress",
"shopperCurrencyProductPriceInfo": {
"title": "Shopper price",
"description": "Shopper price info",
"price": "xxx",
"discountAmount": "xxx",
"beforeDiscount": "xxx",
"discountPercentage": null
},
"imageUrl": "assets/images/cart/cart-item1.png",
"color": "Red",
"size": "38",
"metadataItems": [{
"name": "item_brand",
"value": "New utems brand test datalayer 1"
},
{
"name": "item_category",
"value": "Item 2 Category 1"
},
{
"name": "item_category2",
"value": "Item 2 Category 2"
},
{
"name": "item_category3",
"value": "Item 2 Category 3"
},
{
"name": "item_category4",
"value": "Item 2 Category 4"
},
{
"name": "item_category5",
"value": "Item 2 Category 5"
},
{
"name": "item_list_id",
"value": "222"
},
{
"name": "item_list_name",
"value": "New items list name for the product 2"
},
{
"name": "location_id",
"value": "777"
},
{
"name": "promotion_id",
"value": "12345"
},
{
"name": "promotion_name",
"value": "New Promotion items 2"
},
{
"name": "item_variant",
"value": "items 2"
}],
"isNonStandardCatalogItem": true
},
"cartGrouping": "Group 2",
"metadataItems": null
}
],
"cartDiscounts": [
{
"shopperCurrencyCartDiscountAmount": {
"title": "Discount title",
"description": "Shopper discount title",
"price": "xxx",
"discountAmount": "xxx",
"beforeDiscount": "xxx",
"discountPercentage": null
}
}
],
"retailerCheckoutExperience": {
"retailerCheckoutExperienceId": "EXP001",
"backToCartUrl": "https://md.maxmara.com/cart/1",
"continueShoppingUrl": "https://md.maxmara.com/continue/1",
"metadataItems": []
},
"shopperCurrencyIso": "AUD",
"retailerCurrencyIso": "EUR",
"retailerFxGroupId": 0,
"deliveryCountryIso": "AU",
"retailerPricingConfigurationId": null,
"shopperCheckoutExperience": {
"useDeliveryContactDetailsForPaymentContactDetails": true,
"emailMarketingOptIn": true,
"registeredProfileId": "PROF 0001",
"shopperCultureLanguageIso": "en-IE",
"expressPaymentMethod": "Paypal",
"metadataItems": []
},
"DeliveryOptions": [],
"retailerDeliveryOptions": null
}
```
{% endcode %}
Parameters for the first product:
Parameters for the second product:
#### Events At Checkout UI With Standard Metadata Parameters
1. begin\_checkout: All parameters are displayed under the items level in the dataLayer.
2. add\_shipping\_info: Shoppers select their shipping method.
3. add\_payment\_info event: This event is triggered after clicking on the Pay Now button. The event can be checked [using datalayer checker extension in chrome](https://chrome.google.com/webstore/detail/datalayer-checker/ffljdddodmkedhkcjhpmdajhjdbkogke). This extension can be found at the Chrome Web Store.
The ESW checkout jumps from the add\_payment\_info event to the order confirmation page quickly. So, the dataLayer checker chrome extension persists the event details easily.
4. purchase event: Shoppers complete the purchase.
### Sending Custom Metadata Parameters
* Refer to [Checkout API documentation](https://know.esw.com/space/TDR/1234633660) around how to send this data with an API request.
* If no item parameters are sent in the preorder payload, it is set to null in the datalayer.
Metadata must be sent via either the shopperCheckoutExperience section or as part of the metadata for cart items. Do not use the retailerCheckoutExperience or Contact Details sections while sending an API request. The following is a sample payload:
**Example: Payload for sending custom metadata parameters.**
#### Events At Checkout UI With Custom Metadata Parameters
1. Checkout\_load: It is displayed under the customShopperData parameter in the data layer for different events on different checkout pages.
## Step 2: Analytics Step
After you share the metadata that you are sending to the dataLayer with ESW, the following will occur:
1. ESW analytics team and you will perform quality analysis and assurance for the staging and production sites to check if the metadata is being correctly captured in the dataLayer.
2. The ESW analytics team will check to ensure that the metadata is being captured in the ESW Google Analytics for staging and production properties.
3. Troubleshoot any discrepancies.
4. Once the quality tests pass, the analytics step will be signed off in collaboration with you.
Reach out to your ESW point of contact for more information around this step.
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://developer.esw.com/checkout-api/resources/checkout-ui-metadata/sending-checkout-ui-metadata.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.