Popular
There are 2 ways to create an ecommerce tagging with ClientConscious. This help article focuses on adding HTML data- attributes to your website in order to track ecommerce events.
What are data attributes?
Data attributes are special HTML attributes that are part of the HTML standard and are designed to hold any kind of information. You may find the allrelated information on MDN here. In our case data attributes will contain product properties like name, price, etc.
Who should use this approach?
If you have access to your website’s code and can edit it, you will probably find this method a little bit easier compared to using the GTM templates, as that has a little additional learning curve.
How does it work?
All the actual data and HTML elements needed should already be present on your website. Say you have a product with a price that looks like this:
After adding the neccessary attributes this markup will become:
That is it to a successful product markup.
Can hidden elements be added?
Yes, if you have some piece of information that belongs to the product but you would not like to display that on the page (ex a variant id that is internal to you) you can simply embed it in a hidden element, add the necessary data atrtribute, and ClientConscious will pick that up.
Data attributes to be added
These are the data attributes that you can add and that will be recognized by ClientConscious:
Item list markup
data-ecom-item-list: a list of products. Denotes the wrapping element of a product list.
data-ecom-item-list-name: the name of the item list
data-ecom-item-list-id: the id of the item list
data-ecom-item: denotes item boundaries. When an item is 50% or more visible within a list a view item list event will be tracked with the given item.
Item markup
data-ecom-item-id: item id
data-ecom-item-name: item name
data-ecom-item-coupon: coupon used for the item
data-ecom-item-brand: item brand
data-ecom-item-discount: item discount
data-ecom-item-category: item category
data-ecom-item-category1: item category1
data-ecom-item-category2: item category2
data-ecom-item-category3: item category3
data-ecom-item-category4: item category4
data-ecom-item-category5: item category5
data-ecom-item-variant: item variant
data-ecom-item-price: item price
data-ecom-item-quantity: item quantity
data-ecom-add-to-cart: an add to cart button. When clikced, the product it is displayed within will be added to the shopping cart
data-ecom-remove-from-cart: a remove from cart button. When clikced, one piece of the product it is displayed within will be deducted from the total amount of that product in the shopping cart. If only 1 item is in the cart, then it will be removed.
data-ecom-add-to-wishlist: an add to wishlist button. When clikced, the product it is located in will be tracked within an add to wishlist event.
Promotion markup
data-ecom-promotion-area: a promotion area (can contain 1 promotion too)
data-ecom-promotion: d3notes promotion boundaries. When a promotion is 50% or more visible within a promotion area, a view promotion event will be tracked.
data-ecom-promotion-id: promotion id
data-ecom-promotion-name: promotion name
data-ecom-creative-name: promotion creative id
data-ecom-creative-slot: promotion creative slot
Purchase markup
data-ecom-transaction-id: The transaction id of a purchase.
data-ecom-transaction-currency: The currency of payment.
data-ecom-transaction-value: Total cost of the purchase (taxes and shipping included)
data-ecom-transaction-affiliation: Affiliate code
data-ecom-transaction-coupon: Any coupon used that is valid for all products
data-ecom-transaction-shipping: Shipping cost
data-ecom-transaction-tax: Tax amount