WooCommerce Data Layer Examples
Learn more about how ListenLayer generates powerful data layers from activity on your website, specifically from WooCommerce shopping activity.
GA4 Data Layer Ecommerce Events
The WooCommerce Listener automatically generates data layer events required for GA4 e-commerce tracking. These events, and their subsequent data, are perfect for automating your GA4 tracking and can also be used to power e-commerce analytics across other marketing data platforms.
Detailed data layer examples for each event are shown below. In addition, this Listener also supports Enhanced Ecommerce (details provided further down the page).
GA4 Data Layer 'purchase' Event
ListenLayer automatically generates data layer activity for the GA4 purchase event. Here is an example of the data structure supported with a streamlined GTM structure that you can import easily inside your ListenLayer account – simply turn on the WooCommerce Listener.
event: 'purchase',
ecomAutomaticValues: {
ecommerce: {
transaction_id: 295,
value: 813,
tax: 14,
shipping: 100,
status: 'processing',
discount: 0,
cart_level_discount: 0,
billing_address: {
billing_first_name: 'test',
billing_last_name: 'test',
billing_company: 'test',
billing_email: '[email protected]',
billing_phone: 410442605,
billing_address_1: '1234 Main st',
billing_postcode: 80111,
billing_city: 'denver',
billing_state: 'CO',
billing_country: 'US'
},
shipping_address: {
shipping_first_name: 'test',
shipping_last_name: 'test',
shipping_company: 'test',
shipping_address_1: '1234 Main st',
shipping_postcode: 80111,
shipping_city: 'denver',
shipping_state: 'CO',
shipping_country: 'US'
},
currency: 'USD',
items: [
{
item_id: 210,
item_name: 'Iphone 12 256GB',
quantity: 1,
price: 699,
discount: 0,
index: 1,
item_category: 'Iphone',
item_category1: 'Iphone 12'
}
]
},
ecomLocation: {
url: 'https://demo.hostedstaging.com/checkout/order-received/295/?key=wc_order_KRps9VsJNNfIp',
tld: 'hostedstaging.com',
hostname: 'demo.hostedstaging.com',
pathname: '/checkout/order-received/295/',
queryString: '?key=wc_order_KRps9VsJNNfIp',
parameters: {key: 'wc_order_KRps9VsJNNfIp'},
fragment: null,
protocol: 'https',
originPathName: 'https://demo.hostedstaging.com/checkout/order-received/295/'
}
},
ecomCustomValues: {}GA4 Data Layer 'begin_checkout' Event
ListenLayer automatically generates data layer activity for the GA4 begin_checkout event. Here is an example of the data structure supported with a streamlined GTM structure that you can import easily inside your ListenLayer account – simply turn on the WooCommerce Listener.
event: 'begin_checkout',
ecomAutomaticValues: {
ecommerce: {
items: [
{
item_id: 210,
item_name: 'Iphone 12 256GB',
quantity: 1,
price: 699,
discount: 0,
index: 1,
currency: 'USD',
item_category: 'Iphone',
item_category1: 'Iphone 12'
}
],
currency: 'USD',
value: 699,
discount: 0,
cart_level_discount: 0
},
ecomLocation: {
url: 'https://demo.hostedstaging.com/checkout/',
tld: 'hostedstaging.com',
hostname: 'demo.hostedstaging.com',
pathname: '/checkout/',
queryString: null,
fragment: null,
protocol: 'https',
originPathName: 'https://demo.hostedstaging.com/checkout/'
}
},
ecomCustomValues: {}GA4 Data Layer 'add_to_cart' Event
ListenLayer automatically generates data layer activity for the GA4 add_to_cart event. Here is an example of the data structure, which is supported with a streamlined GTM structure that you can import easily inside your ListenLayer account – simply turn on the WooCommerce Listener.
event: 'add_to_cart',
ecomAutomaticValues: {
ecommerce: {
value: 699,
currency: 'USD',
items: [
{
item_name: 'Iphone 12 256GB',
item_id: 210,
price: 699,
quantity: 1,
index: 1,
item_category: 'Iphone',
item_category1: 'Iphone 12'
}
]
},
ecomLocation: {
url: https://demo.hostedstaging.com/product/210/',
tld: 'hostedstaging.com',
hostname: 'demo.hostedstaging.com',
pathname: '/product/210/',
queryString: null,
fragment: null,
protocol: 'https',
originPathName: 'https://demo.hostedstaging.com/product/210/'
}
},
ecomCustomValues: {}GA4 Data Layer 'view_cart' Event
ListenLayer automatically generates data layer activity for the GA4 view_cart event. Here is an example of the data structure supported with a streamlined GTM structure that you can import easily inside your ListenLayer account – simply turn on the WooCommerce Listener.
event: 'view_cart',
ecomAutomaticValues: {
ecommerce: {
items: [
{
item_id: 208,
item_name: 'Iphone 12 64GB',
quantity: 1,
price: 699.9,
currency: 'USD',
discount: 0,
index: 1,
item_category: 'Iphone',
item_category1: 'Iphone 12'
},
{
item_id: 210,
item_name: 'Iphone 12 256GB',
quantity: 1,
price: 699,
currency: 'USD',
discount: 0,
index: 2,
item_category: 'Iphone',
item_category1: 'Iphone 12'
}
],
currency: 'USD',
discount: 0,
value: 1398.9,
cart_level_discount: 0
},
ecomLocation: {
url: 'https://demo.hostedstaging.com/cart/',
tld: 'hostedstaging.com',
hostname: 'demo.hostedstaging.com',
pathname: '/cart/',
queryString: null,
fragment: null,
protocol: 'https',
originPathName: 'https://demo.hostedstaging.com/cart/'
}
},
ecomCustomValues: {}GA4 Data Layer 'remove_from_cart' Event
ListenLayer automatically generates data layer activity for the GA4 remove_from_cart event. Here is an example of the data structure supported with a streamlined GTM structure that you can import easily inside your ListenLayer account – simply turn on the WooCommerce Listener.
event: 'remove_from_cart',
ecomAutomaticValues: {
ecommerce: {
currency: 'USD',
value: 699.9,
items: [
{
item_id: 208,
item_name: 699.9,
quantity: 1,
price: 699.9,
index: 1,
currency: 'USD',
item_category: 'Iphone',
item_category1: 'Iphone 12',
discount: 0
}
]
},
ecomLocation: {
url: 'https://demo.hostedstaging.com/cart/',
tld: 'hostedstaging.com',
hostname: 'demo.hostedstaging.com',
pathname: '/cart/',
queryString: null,
fragment: null,
protocol: 'https',
originPathName: 'https://demo.hostedstaging.com/cart/'
}
},
ecomCustomValues: {}GA4 Data Layer 'view_item_list' Event
ListenLayer automatically generates data layer activity for the GA4 view_item_list event. Whenever a list of products is displayed, each product shown has an impression counted for it. Here is an example of the data structure supported with a streamlined GTM structure that you can import easily inside your ListenLayer account – simply turn on the WooCommerce Listener.
event: 'view_item_list',
ecomAutomaticValues: {
ecommerce: {
item_list_id: 'related_products',
item_list_name: 'Related products',
items: [
{
item_id: 214,
item_name: 'Iphone 13 256GB',
quantity: 1,
currency: 'USD',
price: 899,
item_list_id: 'related_products',
item_list_name: 'Related products',
index: 1,
item_category: 'Iphone',
item_category1: 'Iphone 13'
},
{
item_id: 208,
item_name: 'Iphone 12 64GB',
quantity: 1,
currency: 'USD',
price: 699.9,
item_list_id: 'related_products',
item_list_name: 'Related products',
index: 2,
item_category: 'Iphone',
item_category1: 'Iphone 12'
},
{
item_id: 212,
item_name: 'Iphone 12',
quantity: 1,
currency: 'USD',
price: 699,
item_list_id: 'related_products',
item_list_name: 'Related products',
index: 3,
item_category: 'Iphone',
item_category1: 'Iphone 12',
item_variant: 'Green 64GB',
item_variant1: 'Purple 256GB',
item_variant2: 'White 128GB',
item_variant3: 'Purple 128GB',
item_variant4: 'Red 64GB'
}
]
},
ecomLocation: {
url: 'https://demo.hostedstaging.com/product/210/',
tld: 'hostedstaging.com',
hostname: 'demo.hostedstaging.com',
pathname: '/product/210/',
queryString: null,
fragment: null,
protocol: 'https',
originPathName: 'https://demo.hostedstaging.com/product/210/'
}
},
ecomCustomValues: {}GA4 Data Layer 'select_item' Event
ListenLayer automatically generates data layer activity for the GA4 select_item event. This occurs whenever a product is clicked on from a list of products. Data from this is combined with product impressions (from the view_item_list event) to understand click-through rates for various products and product lists. Here is an example of the data structure, which is supported with a streamlined GTM structure that you can import easily inside your ListenLayer account – simply turn on the WooCommerce Listener.
event: 'select_item',
ecomAutomaticValues: {
ecommerce: {
items: [
{
item_id: 210,
item_name: 'Iphone 12 256GB',
price: 699,
quantity: 1,
currency: 'USD',
index: 1,
item_category: 'Iphone',
item_category1: 'Iphone 12'
}
]
},
ecomLocation: {
url: 'https://demo.hostedstaging.com/product/210/',
tld: 'hostedstaging.com',
hostname: 'demo.hostedstaging.com',
pathname: '/product/210/',
queryString: null,
fragment: null,
protocol: 'https',
originPathName: 'https://demo.hostedstaging.com/product/210/'
}
},
ecomCustomValues: {}GA4 Data Layer 'view_item' Event
ListenLayer automatically generates data layer activity for the GA4 view_item event. This occurs whenever a product detail page is viewed. This is different from the select_item event, which tracks clicks on a product from a list (product views and product clicks are oftentimes different!). Here is an example of the data structure supported with a streamlined GTM structure that you can import easily inside your ListenLayer account – simply turn on the WooCommerce Listener.
event: 'view_item',
ecomAutomaticValues: {
ecommerce: {
currency: 'USD',
value: 699,
items: [
{
item_id: 210,
item_name: 'Iphone 12 256GB',
price: 699,
quantity: 1,
currency: 'USD',
index: 1,
item_category: 'Iphone',
item_category1: 'Iphone 12'
}
]
},
ecomLocation: {
url: 'https://demo.hostedstaging.com/product/210/',
tld: 'hostedstaging.com',
hostname: 'demo.hostedstaging.com',
pathname: '/product/210/',
queryString: null,
fragment: null,
protocol: 'https',
originPathName: 'https://demo.hostedstaging.com/product/210/'
}
},
ecomCustomValues: {}GA4 Data Layer 'add_shipping_info' Event
ListenLayer automatically generates data layer activity for the GA4 add_shipping_info event. This occurs when a user successfully adds their shipping details during checkout. You can use this to track checkout steps by configuring a funnel in GA4. Here is an example of the data structure supported with a streamlined GTM structure that you can import easily inside your ListenLayer account – simply turn on the WooCommerce Listener.
event: 'add_shipping_info',
ecomAutomaticValues: {
ecommerce: {
items: [
{
item_id: 210,
item_name: 'Iphone 12 256GB',
quantity: 1,
currency: 'USD',
price: 699,
discount: 0,
index: 1,
item_category: 'Iphone',
item_category1: 'Iphone 12'
}
],
currency: 'USD',
value: 699,
discount: 0,
cart_level_discount: 0
},
ecomLocation: {
url: 'https://demo.hostedstaging.com/checkout/',
tld: 'hostedstaging.com',
hostname: 'demo.hostedstaging.com',
pathname: '/checkout/,
queryString: null,
fragment: null,
protocol: 'https',
originPathName: 'https://demo.hostedstaging.com/checkout/'
}
},
ecomCustomValues: {}GA4 Data Layer 'add_payment_info' Event
ListenLayer automatically generates data layer activity for the GA4 add_payment_info event. This occurs when a user successfully adds their payment details during checkout. You can use this to track checkout steps by configuring a funnel in GA4. Here is an example of the data structure supported with a streamlined GTM structure that you can import easily inside your ListenLayer account – simply turn on the WooCommerce Listener.
event: 'add_payment_info',
ecomAutomaticValues: {
ecommerce: {
items: [
{
item_id: 210,
item_name: 'Iphone 12 256GB',
quantity: 1,
currency: 'USD',
price: 699,
discount: 0,
index: 1,
item_category: 'Iphone',
item_category1: 'Iphone 12'
}
],
currency: 'USD',
value: 699,
discount: 0,
payment_type: 'Credit Card (Stripe)',
cart_level_discount: 0
},
ecomLocation: {
url: 'https://demo.hostedstaging.com/checkout/',
tld: 'hostedstaging.com',
hostname: 'demo.hostedstaging.com',
pathname: '/checkout/',
queryString: null,
fragment: null,
protocol: 'https',
originPathName: 'https://demo.hostedstaging.com/checkout/'
}
},
ecomCustomValues: {}Enhanced Ecommerce Data Layer Events
The WooCommerce Listener generates a unique set of data layer events specifically structured for Universal Analytics & Enhanced Ecommerce. After enabling the Listener, simply import the GTM container settings we provide, and you’re tracking will be configured for Google Analytics.
Detailed data layer examples are shown below for each event. When configuring Enhanced Ecommerce, data layer event names may be adjusted, so our names are configured to be uniquely different than GA4 and to be easily identifiable inside your Google Analytics events reporting.
Enhanced Ecommerce Transaction Event
ListenLayer automatically generates data layer activity for Enhanced Ecommerce when a transaction is completed on your WooCommerce Website. We send an event called “completePurchase” and include an “ecommerce” object in the data layer containing all required elements.
Here is an example of the data structure supported with a streamlined GTM structure that you can import easily inside your ListenLayer account – simply turn on the WooCommerce Listener.
event: 'completePurchase',
ecomAutomaticValues: {
ecommerce: {
purchase: {
actionField: {
id: 295,
revenue: 813,
tax: 14,
shipping: 100,
discount: 0,
cart_level_discount: 0
},
products: [
{
id: 210,
name: 'Iphone 12 256GB',
quantity: 1,
price: 699,
category: 'Iphone',
category1: 'Iphone 12'
}
]
}
},
ecomLocation: {
url: 'https://demo.hostedstaging.com/checkout/order-received/295/?key=wc_order_KRps9VsJNNfIp',
tld: 'hostedstaging.com',
hostname: 'demo.hostedstaging.com',
pathname: '/checkout/order-received/295/',
queryString: '?key=wc_order_KRps9VsJNNfIp',
parameters: {key: 'wc_order_KRps9VsJNNfIp'},
fragment: null,
protocol: 'https',
originPathName: 'https://demo.hostedstaging.com/checkout/order-received/295/'
}
},
ecomCustomValues: {}Enhanced Ecommerce Begin Checkout Event
ListenLayer automatically generates data layer activity for Enhanced Ecommerce when a user begins checkout on your WooCommerce store. We send an event called “beginCheckout” and include an “ecommerce” object in the data layer containing all required elements. We also allow you to control which step this event is considered using the Checkout Steps/Options features of Enhanced Ecommerce.
Here is an example of the data structure supported with a streamlined GTM structure that you can import easily inside your ListenLayer account – simply turn on the WooCommerce Listener.
event: 'beginCheckout',
ecomAutomaticValues: {
ecommerce: {
checkout: {
actionField: {step: 1, option: 'view checkout'},
value: 699,
discount: 0,
cart_level_discount: 0,
products: [
{
id: 210,
name: 'Iphone 12 256GB',
quantity: 1,
price: 699,
discount: 0,
category: 'Iphone',
category1: 'Iphone 12'
}
]
}
},
ecomLocation: {
url: 'https://demo.hostedstaging.com/checkout/',
tld: 'hostedstaging.com',
hostname: 'demo.hostedstaging.com',
pathname: '/checkout/',
queryString: null,
fragment: null,
protocol: 'https',
originPathName: 'https://demo.hostedstaging.com/checkout/'
}
},
ecomCustomValues: {}Enhanced Ecommerce 'addToCart' Event
ListenLayer automatically generates data layer activity for Enhanced Ecommerce when a user on your WooCommerce store adds a product to their cart. We send an event called “addToCart” and include an “ecommerce” object in the data layer containing all required elements.
Here is an example of the data structure supported with a streamlined GTM structure that you can import easily inside your ListenLayer account – simply turn on the WooCommerce Listener.
event: 'addToCart',
ecomAutomaticValues: {
ecommerce: {
currencyCode: 'USD',
add: {
products: [
{
name: 'Iphone 12 256GB',
id: 210,
price: 699,
quantity: 1,
category: 'Iphone',
category1: 'Iphone 12'
}
]
}
},
ecomLocation: {
url: 'https://demo.hostedstaging.com/product/210/',
tld: 'hostedstaging.com',
hostname: 'demo.hostedstaging.com',
pathname: '/product/210/',
queryString: null,
fragment: null,
protocol: 'https',
originPathName: 'https://demo.hostedstaging.com/product/210/'
}
},
ecomCustomValues: {}Enhanced Ecommerce 'removeFromCart' Event
ListenLayer automatically generates data layer activity for Enhanced Ecommerce when a user on your WooCommerce store removes a product from their cart. We send an event called “removeFromCart” and include an “ecommerce” object in the data layer containing all required elements.
Here is an example of the data structure supported with a streamlined GTM structure that you can import easily inside your ListenLayer account – simply turn on the WooCommerce Listener.
event: 'removeFromCart',
ecomAutomaticValues: {
ecommerce: {
remove: {
products: [
{
id: 208,
name: 699.9,
quantity: 1,
price: 699.9,
category: 'Iphone',
category1: 'Iphone 12'
}
]
}
},
ecomLocation: {
url: 'https://demo.hostedstaging.com/cart/',
tld: 'hostedstaging.com',
hostname: 'demo.hostedstaging.com',
pathname: '/cart/',
queryString: null,
fragment: null,
protocol: 'https',
originPathName: 'https://demo.hostedstaging.com/cart/'
}
},
ecomCustomValues: {}Enhanced Ecommerce 'Impressions' Event
ListenLayer automatically generates data layer activity for product impressions on your WooCommerce store and structures the data for Enhanced Ecommerce (Universal Analytics). We send an event called “productImpressions” and include an “ecommerce” object in the data layer containing all required elements.
Here is an example of the data structure supported with a streamlined GTM structure that you can import easily inside your ListenLayer account – simply turn on the WooCommerce Listener.
event: 'productImpressions',
ecomAutomaticValues: {
ecommerce: {
currencyCode: 'USD',
impressions: [
{
name: 'Iphone 13 256GB',
id: 214,
price: 899,
list: 'Related products',
position: 1,
category: 'Iphone',
category1: 'Iphone 13'
},
{
name: "Iphone 12 64GB",
id: 208,
price: 699.9,
list: 'Related products',
position: 2,
category: 'Iphone',
category1: 'Iphone 12'
},
{
name: 'Iphone 12',
id: 212,
price: 699,
list: 'Related products',
position: 3,
category: 'Iphone',
category1: 'Iphone 12'
}
]
},
ecomLocation: {
url: 'https://demo.hostedstaging.com/product/210/',
tld: 'hostedstaging.com',
hostname: 'demo.hostedstaging.com',
pathname: '/product/210/',
queryString: null,
fragment: null,
protocol: 'https',
originPathName: 'https://demo.hostedstaging.com/product/210/'
}
},
ecomCustomValues: {}Enhanced Ecommerce Product 'Click' Event
ListenLayer automatically generates data layer activity for product clicks on your WooCommerce store and structures the data for Enhanced Ecommerce (Universal Analytics). We send an event called “productClick” and include an “ecommerce” object in the data layer containing all required elements. This is paired with “productImpressions” to measure click-through-rate from catalogs and product lists on your website.
Here is an example of the data structure supported with a streamlined GTM structure that you can import easily inside your ListenLayer account – simply turn on the WooCommerce Listener.
event: 'productClick',
ecomAutomaticValues: {
ecommerce: {
click: {
products: [
{
id: 210,
name: 'Iphone 12 256GB',
price: 699,
position: 1,
category: 'Iphone',
category1: 'Iphone 12'
}
]
}
},
ecomLocation: {
url: 'https://demo.hostedstaging.com/product/210/',
tld: 'hostedstaging.com',
hostname: 'demo.hostedstaging.com',
pathname: '/product/210/',
queryString: null,
fragment: null,
protocol: 'https',
originPathName: 'https://demo.hostedstaging.com/product/210/'
}
},
ecomCustomValues: {}Enhanced Ecommerce Product 'Views' Event
ListenLayer automatically generates data layer activity for Enhanced Ecommerce when a user on your WooCommerce store views product detail pages. We send an event called “viewProductDetail” and include an “ecommerce” object in the data layer containing all required elements.
Here is an example of the data structure supported with a streamlined GTM structure that you can import easily inside your ListenLayer account – simply turn on the WooCommerce Listener.
event: 'viewProductDetail',
ecomAutomaticValues: {
ecommerce: {
detail: {
products: [
{
id: 210,
name: 'Iphone 12 256GB',
price: 699,
category: 'Iphone',
category1: 'Iphone 12'
}
]
}
},
ecomLocation: {
url: 'https://demo.hostedstaging.com/product/210/',
tld: 'hostedstaging.com',
hostname: 'demo.hostedstaging.com',
pathname: '/product/210/',
queryString: null,
fragment: null,
protocol: 'https',
originPathName: 'https://demo.hostedstaging.com/product/210/'
}
},
ecomCustomValues: {}Enhanced Ecommerce 'Add Shipping Details' Checkout Step Event
ListenLayer automatically generates data layer activity for Enhanced Ecommerce when a user on your WooCommerce store adds their shipping details during checkout. We send an event called “checkoutOption_shipping” and include an “ecommerce” object in the data layer containing all required elements. The event is configured as a checkout step, and you can adjust the step order inside the ListenLayer interface.
Here is an example of the data structure supported with a streamlined GTM structure that you can import easily inside your ListenLayer account – simply turn on the WooCommerce Listener.
event: 'checkoutOption_shipping',
ecomAutomaticValues: {
ecommerce: {
checkout: {
actionField: {
step: 2,
option: {postcode: 80111, city: 'denver', address_1: '1234 Main st', country: 'US'}
},
currency: 'USD',
value: 699,
discount: 0,
cart_level_discount: 0,
products: [
{
id: 210,
name: 'Iphone 12 256GB',
quantity: 1,
currency: 'USD',
price: 699,
discount: 0,
index: 1,
category: 'Iphone',
category1: 'Iphone 12'
}
]
}
},
ecomLocation: {
url: 'https://demo.hostedstaging.com/checkout/',
tld: 'hostedstaging.com',
hostname: 'demo.hostedstaging.com',
pathname: '/checkout/',
queryString: null,
fragment: null,
protocol: 'https',
originPathName: 'https://demo.hostedstaging.com/checkout/'
}
},
ecomCustomValues: {}Enhanced Ecommerce 'Add Payment Details' Checkout Step Event
ListenLayer automatically generates data layer activity for Enhanced Ecommerce when a user on your WooCommerce store adds their payment details during checkout. We send an event called “checkoutOption_payment” and include an “ecommerce” object in the data layer containing all required elements. The event is configured as a checkout step, and you can adjust the step order inside the ListenLayer interface.
Here is an example of the data structure supported with a streamlined GTM structure that you can import easily inside your ListenLayer account – simply turn on the WooCommerce Listener.
event: 'checkoutOption_payment',
ecomAutomaticValues: {
ecommerce: {
checkout: {
actionField: {step: 3, option: 'Credit Card (Stripe)'},
currency: 'USD',
value: 699,
discount: 0,
cart_level_discount: 0,
products: [
{
id: 210,
name: 'Iphone 12 256GB',
quantity: 1,
currency: 'USD',
price: 699,
discount: 0,
index: 1,
category: 'Iphone',
category1: 'Iphone 12'
}
]
}
},
ecomLocation: {
url: 'https://demo.hostedstaging.com/checkout/',
tld: 'hostedstaging.com',
hostname: 'demo.hostedstaging.com',
pathname: '/checkout/',
queryString: null,
fragment: null,
protocol: 'https',
originPathName: 'https://demo.hostedstaging.com/checkout/'
}
},
ecomCustomValues: {}Custom Data Layer Values
ListenLayer pushes critical information from you WooCommerce activity into the data layer automatically. We also allow you to write powerful rules to push custom values into the data layer whenever an event occurs on your website – no programming required!
Ready to Dive In?
See how easy (and powerful) ListenLayer is by opening an account today or requesting a demo.