How to set up ecommerce tracking?

In this thread we discuss:

  • best practices for setting up ecommerce tracking
  • how to track products, abandoned carts and completed orders in ecommerce module
  • common issues and how to troubleshoot them

The recommended solution for ecommerce is to use dataLayer along with custom tags in the Tag Manager module.

Data layer requirements
Create a data layer. We strongly recommend pasting the data layer snippet before the Piwik PRO container code (in section).

<script>window.dataLayer = window.dataLayer || [];</script>

Make sure that the object describing the cart is posted within a single data layer event every time an ecommerce cart is being updated. The object should contain the following set of variables for each product:

Product SKU (string) – Required, String with product stock-keeping unit.
Product Name (string) – Optional, String with product name.
Product Category (Array|string) – Optional, Product category, can be written as Array with up to 5 elements.
Price (number) – Optional, String with product price.
Quantity (number) – Optional, String with product quantity.
Cart amount (number) – Required Order Revenue grand total - tax, shipping and discount included.

Please see the example for two products in the 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,
    });

Make sure that the object describing the order (converted cart) is available in the dataLayer every time an order is confirmed. The object should contain the same set of variables as described in point 1 and the additional variables on top:

Order ID (string) – Required, Unique order ID.
Order Grand Total (number) – Required, Order Revenue grand total - tax, shipping and discount included.
Order SubTotal (number) – Optional, Order subtotal - without shipping.
Order Tax (number) – Optional, Order tax amount.
Order Shipping (number) – Optional, Order shipping costs.
Order Discount (number) – Optional, Order discount amount.

Please see the example for two products in the cart:

    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,
    });

Tag Manager setup

To handle cart update event, use the following code:

    <script>
      var _paq = _paq || [];
      var cart_amount = {{ cart_amount }};
      var products = {{ products }};
      products.forEach(function(product){
        _paq.push(["addEcommerceItem",product.sku, product.name,product.category, product.price, product.quantity])
      });
      _paq.push(["trackEcommerceCartUpdate",cart_amount]);  
    </script>

Make sure that you are using a proper dataLayer event trigger (in this case it’ll be “cart_update”).

Here’s a similar code for the ecommerce order:

   <script>
     var _paq = _paq || [];
     var products = {{ products }};
     products.forEach(function(product){
       _paq.push(["addEcommerceItem",product.sku, product.name,product.category, product.price, product.quantity])
   });
     _paq.push(["trackEcommerceOrder",{{ order_id }}, {{ grand_total }}, {{ subtotal }}, {{ tax }}, {{ shipping }}, {{ discount }}]);
   </script>

In this case, use “order_confirmation” as the dataLayer event name in the trigger configuration.

2 Likes

There’s also a short intro to tracking ecommerce on our Help Center: Track ecommerce | Piwik PRO help center

4 posts were split to a new topic: Are there screenshots of Tag Manager settings?

A post was split to a new topic: See ecommerce reports by domain

A post was split to a new topic: New datalayer variable in TMS for the ID of the reservation

If you want to send additional metadata while placing ecommerce order, you can do that by utilizing Custom Dimensions in the event scope.

To do that, just use the following method:

_paq.push(['setCustomDimensionValue', dimensionID, 'dimensionValue']);