Manual Ecommerce Tracking with Existing GTM Cart Data

If you are already tracking Ecommerce orders with Google Tag Manager (GTM), you may be able to set up Ecommerce tracking in Matomo by reading the GTM dataLayer. It is not possible to cover all possible and data structures that might exist for users who have existing Ecommerce information in their GTM dataLayer. This guide will use a specific example and your GTM configuration may differ. However this guide should provide the general concept for tracking Ecommerce actions in Matomo while leveraging pre-existing data in GTM.

This guide is written for use with the JavaScript tracking client, however tracking calls included in this guide can be incorporated into your webpage via the Matomo Tag Manager using Custom HTML Tags and possibly Data Layer variables.

Getting Started

First, navigate to your website, add an item to the cart and proceed to the checkout page. Next we’ll need to determine where the product data exists in the GTM dataLayer. For this you will need to use the Developer Tools available in most browsers (Chrome, FireFox). This can typically be accessed by pressing F12 in the browser. In the console tab type dataLayer and press Enter…

This should produce a list of array elements. Expand each element until you find the product(s) in your cart. These are typically stored in an element such as ‘products’, ‘cart’ ‘items’ or ‘ecommerce’. In this example the cart information is stored in an element named ‘ecommerce’. The individual items are in a nested array named ‘items’…

Retrieve the Cart Items and Track them to Matomo

Once you know know where the cart items are stored within the dataLayer you can create a variable for the product data. Notice in the example above that the ‘ecommerce’ element is located on index 4 of the dataLayer: dataLayer[4].ecommerce. This index will often change between pages depending on what other data is pushed to the dataLayer. For this reason it is necessary to use a find function in JavaScript to search for your specific Ecommerce element. In the example above, individual cart items are stored in ecommerce.items, so the script below finds an instance of the variable ecommerce.items…

//find the ecommerce element in the dataLayer
var ecommerceData = dataLayer.find(function(item) {
    return item.ecommerce && item.ecommerce.items;
});

In the script above, the Ecommerce data was assigned to a variable named ecommerceData. It is now possible to loop through the cart items contained in this variable and track them to Matomo…

if (ecommerceData) {
    var items = ecommerceData.ecommerce.items;
    // Loop through the items and track each one to Matomo
    items.forEach(function(item, index) {
        _paq.push(['addEcommerceItem',
            item.item_id,       // Product SKU
            item.item_name,     // Product Name (Optional)
            item.item_category, // Product Category (Optional)
            item.item_price,    // Product Price (Optional)
            item.quantity       // Product Quantity (Optional)
        ]);
    });

    // Track the cart update with the total value
    _paq.push(['trackEcommerceCartUpdate', ecommerceData.ecommerce.value]);
}

Placing an Order

When a customer places an order, simply call the following for this example while adding tax and shipping if applicable and/or available in the dataLayer…

_paq.push(['trackEcommerceOrder',
    '12345',    // Order ID
    ecommerceData.ecommerce.value,    // Order revenue
    0,     // Order sub-total (optional)
    0,     // Order tax (optional)
    0,      // Order shipping cost (optional)
    0       // Order discount (optional)
]);

Please also see our Advanced: Manual Ecommerce Tracking Guide for more information about the methods discussed above and other Ecommerce methods available with Matomo.