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.

1 Like

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

is it possible to see screenshots of the tag manager settings?

Thanks, Sascha

You can find plenty of screenshots in the documentation - “Tag Manager” section of our Help center.

Additionally, check out our YouTube channel. There are a few videos covering tag manager’s functionality, e.g.:

Thank you very much. I have one more question. How do I create a transaction tag? From Google Tag Manager and Google Analytics I know it as follows:

  • datalayer on the order page.
  • trigger as custom event → event equals “ordercompleted for example”.
  • transaction tag that triggers “ordercompleted” on the trigger.

How do I create a transaction tag with piwikpro?

Data layer is compatible with GTM, so you can set it up in a similar way assuming you already have a data layer on your order page implemented:

  • Add new tag → Custom asynchronous tag

  • Add new trigger → Data layer event, and choose e.g. Event name equals ‘ordercompleted’

  • Go to Variables → Add new variable → Data layer and choose the same name of variable as in the data layer, e.g. order_id, discount, grand_total, products etc.

  • In the custom asynchronous tag’s code, you have to use ecommerce tracking functions, e.g. assuming you have an array of products in the ‘products’ variable (make sure to map it first from the data layer via variables as described in the previous step), this can look the following way:
    <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>

All items that are in brackets {{ }} are tag manager variables that were earlier mapped from data layer.

1 Like