Set up ecommerce tracking

If you run an online store and want to track transactions along with web analytics data, you can use ecommerce tracking and ecommerce reports in Piwik PRO. In this article, we’ll explain how to do that.

Ecommerce tracking allows you to use JavaScript code to collect data for events like adding a product to the cart, updating the order value, completing an order, and the like. To make the tracking work, you’ll need to code ecommerce elements that you want to track in Tag Manager.

Visitor flow in on an ecommerce website.

Here’s the list of core JavaScript functions that you’ll need to use to track ecommerce:

addEcommerceItem(): This function tracks when a product is added to the cart. It should be triggered for each product available in the cart. Once the function is called for each product, the trackEcommerceCartUpdate() or trackEcommerceOrder() function should follow.
```
_paq.push(['addEcommerceItem',productSKU, productName, productCategory, price, quantity]); 
```
trackEcommerceCartUpdate(): This function tracks cart changes. It should be triggered on each cart update once all the products available in the cart are added with the addEcommerceItem() function. It automatically creates an abandoned cart. In other words, every registered cart that is not followed by the trackEcommerceOrder() function is tracked as an abandoned cart in Piwik PRO.
```
_paq.push(['trackEcommerceCartUpdate',grandTotal]);
```
Note: Payment in the shopping process is usually processed by an external payment gateway like PayPal or Google Pay, and therefore can’t be tracked.
trackEcommerceOrder(): This function should be called when a visitor is redirected to the thank-you page after paying for the order, or anytime it’s certain that the order has been successfully submitted. The function should be preceded by registering all products included in the order with the addEcommerceItem() function. It automatically updates the cart from an abandoned cart to an order.
```
_paq.push(['trackEcommerceOrder',orderId, orderGrandTotal, orderSubTotal, orderTax, orderShipping, orderDiscount]);
```

For developers: For more information on ecommerce tracking, read our developer guides.

Track other shopping stages

Besides JavaScript functions dedicated to ecommerce tracking, you can also use custom events, content tracking, and other web analytics methods to collect data about shoppers. Here’s a list of possible tracking options in Piwik PRO.

Shopping stage	Tracking method
View a product	Page view and content tracking
Click product details	Custom event
Add to a cart	JavaScript function
Remove from a cart	JavaScript function
Checkout	JavaScript function
Shipping information	Custom events and user flow
Order	JavaScript function
Promotions	Custom events and content tracking
Promo codes	Custom events

Display ecommerce reports in Analytics

At the same time, when you’re setting up ecommerce tracking, you need to turn on ecommerce reports in Analytics. Ecommerce is the additional section in Analytics that is not displayed by default and can be turned on or off at any moment. In this section, you’ll see all data tracked for your store.

To turn on ecommerce reports, follow these steps:

Go to Menu > Administration.
Select the site you want to work with.
Navigate to Reports.
Turn on Show ecommerce reports.
Done! Now you can see an ecommerce section in Analytics. Reports in this section will fill up with data as soon as you set up tracking for each ecommerce element.

Tip: For more, read our article about ecommerce reports.

Example setup with a data layer

One of the most common ways to set up ecommerce tracking is using a data layer. It’s a much better way than trying to scrape data out from the source code. The source code may change when web developers update your site, but the data layer remains unchanged.

We always recommend using a data layer for ecommerce tracking, and we prepared some examples that you can look at. Additionally, we created dedicated tags that automatically collect ecommerce data using JavaScript functions. Let’s take a look.

To set up ecommerce tracking using a data layer, follow these steps:

Paste the data layer code inside <head></head> tags on your website. Make sure it’s before the Piwik PRO’s container code.
```
<script>
    window.dataLayer = window.dataLayer || [];
</script>
```

Add information about a cart update to the data layer with the dataLayer.push() method. Make sure that the object describing the cart is available for each cart update.

Variables

Variable	Type	Required	Description
sku	String	Required	The stock-keeping unit of the added product.
name	String	Optional	The name of the added product.
category	Array \| string	Optional	The category of the added product. It can be an array of up to 5 categories.
price	Number	Optional	The price of the added product.
quantity	Number	Optional	The number of added items.
cart_amount	Number	Required	The total value of items in the cart.

Example

This example shows two products added to a cart.

window.dataLayer.push({
  event: 'cart_update',
  products: [{
    sku: '584340',
    name: 'Challenger XTC-3240 Prime',
    category: [
      'Mountain Bike',
      'Enduro',
      'Full suspension',
      'Carbon frame',
      '29 inches',
    ],
    price: 5000,
    quantity: 1,
  },
    {
      sku: '460923',
      name: 'Challenger Full Helmet GTS-23 2020',
      category: [
        'Performance',
        'Full Helmets',
      ],
      price: 200,
      quantity: 1,
    },
  ],
  cart_amount: 5200,
});

Add information about order confirmation to the data layer with the dataLayer.push() method. Make sure that the object describing the order is available for each confirmed order.

Variables

Variable	Type	Required	Description
sku	String	Required	The stock-keeping unit of the added product.
name	String	Optional	The name of the added product.
category	Array \| string	Optional	The category of the added product. It can be an array of up to 5 categories.
price	Number	Optional	The price of the added product.
quantity	Number	Optional	The number of added items.
cart_amount	Number	Required	The total value of items in the cart.
order_id	String	Required	Unique order ID
grand_total	Number	Required	Total payment for an order. Including tax, shipping and discounts.
subtotal	Number	Optional	Payment for an order without shipping.
tax	Number	Optional	Tax included in an order.
shipping	Number	Optional	The cost of shipping an order.
discount	Number	Optional	Discounts included in an order.

Example

This example shows a confirmed order for two products.

window.dataLayer.push({
  event: "order_confirmation",
  products: [{
    sku: "584340",
    name: "Challenger XTC-3240 Prime",
    category: [
      "Mountain Bike",
      "Enduro",
      "Full suspension",
      "Carbon frame",
      "29 inches",
    ],
    price: 5000,
    quantity: 1,
  },
    {
      sku: "460923",
      name: "Challenger Full Helmet GTS-23 2020",
      category: [
        "Performance",
        "Full Helmets",
      ],
      price: 200,
      quantity: 1,
    },
  ],
  order_id: "43967392",
  grand_total: 5250,
  subtotal: 5200,
  tax: 970,
  shipping: 150,
  discount: 100,
});

Use our dedicated custom tag: Ecommerce cart update that collects data from the data layer and sends it to Analytics.
Click Customize to set up the custom tag.
Add the custom tag as a custom code (async) in Tag Manager. Read more
Add a new trigger with the following type: Data layer event.
Set the trigger conditions: Event name equals cart_update.

Note: We use cart_update because this is the event declared in the data layer.
Save the trigger and save the tag.
Now we need to set up another tag. Use our dedicated custom tag: Ecommerce order confirmed that collects data from the data layer and sends it to Analytics.
Click Customize to set up this custom tag.
Add the custom tag as a custom code (async) in Tag Manager. Read more
Add a new trigger with the following type: Data layer event.
Set the trigger conditions: Event name equals order_confirmation.

Note: We use order_confirmation because this is the event declared in the data layer.
Save the trigger and save the tag.
Click Publish.
All done! You can immediately see collected data in Menu > Analytics > Settings > Tracker debugger.
Data in reports will appear in about an hour. You’ll see it in Menu > Analytics > Ecommerce.

Note: If you don’t see this section, turn it on in Menu > Administration > Reports > Ecommerce.