Set up ecommerce tracking

Analytics + Tag Manager

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.

Set up ecommerce tracking

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:

  • Add to cart: This function tracks when a product is added to the cart. It automatically creates an abandoned cart. In other words, every uncompleted order is tracked as an abandoned cart in Piwik PRO. It also tracks when a product is removed from the cart.
    _paq.push(['addEcommerceItem',productSKU, productName, productCategory, price, quantity]); 
  • Checkout: This function tracks when a visitor clicks the checkout button and updates the total cart value. At this stage, the cart is still treated as an abandoned cart.
    _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.

  • Order completed: This function tracks when a visitor is redirected to the thank-you page after paying for the order. It automatically updates the cart from an abandoned cart to 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:

  1. Go to Menu > Administration.
  2. Select the site you want to work with.
  3. Navigate to Reports.
  4. Turn on  Show ecommerce reports.
  5. 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.
    Ecommerce reports in Piwik PRO

    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:

  1. 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>
  2. 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,
    });
  3. 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,
    });
  4. Use our dedicated custom tag: Ecommerce cart update that collects data from the data layer and sends it to Analytics.
    Example setup for ecommerce tracking with a data layer in Piwik PRO
  5. Click Customize to set up the custom tag.
    Example setup for ecommerce tracking with a data layer in Piwik PRO
  6. Add the custom tag as a custom code (async) in Tag Manager. Read more
    Example setup for ecommerce tracking with a data layer in Piwik PRO
  7. Add a new trigger with the following type: Data layer event.
    A data layer event trigger in Piwik PRO
  8. Set the trigger conditions: Event name equals cart_update.
    Example setup for ecommerce tracking with a data layer in Piwik PRO

    Note: We use cart_update because this is the event declared in the data layer.

  9. Save the trigger and save the tag.
  10. 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.
    Example setup for ecommerce tracking with a data layer in Piwik PRO
  11. Click Customize to set up this custom tag.
    Example setup for ecommerce tracking with a data layer in Piwik PRO
  12. Add the custom tag as a custom code (async) in Tag Manager. Read more
    Example setup for ecommerce tracking with a data layer in Piwik PRO
  13. Add a new trigger with the following type: Data layer event.
    A data layer event trigger in Piwik PRO
  14. Set the trigger conditions: Event name equals order_confirmation.
    Example setup for ecommerce tracking with a data layer in Piwik PRO

    Note: We use order_confirmation because this is the event declared in the data layer.

  15. Save the trigger and save the tag.
  16. Click Publish.
  17. All done! You can immediately see collected data in Menu > Analytics > Settings > Tracker debugger.
    Example setup for ecommerce tracking with a data layer in Piwik PRO
  18. Data in reports will appear in about an hour. You’ll see it in Menu > Analytics > Ecommerce.
    Example setup for ecommerce tracking with a data layer in Piwik PRO

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

Was this article helpful?

Technical support

If you still have some questions, visit our community.
There’s always someone ready to help!

Related articles

Back to help center