How to set up ecommerce tracking?

Data collection and tags
2

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