Ecommerce Tracking with Matomo Tag Manager

Step 1 – View a product page

This first step aims to count the number of times a product page has been visited. This information will be found in the product performance reports in the Matomo e-commerce section.

To make this tag work, we will need to retrieve product information from your database and expose it to Matomo using the Data Layer.

Setting up the DataLayer (Compatible with GA4)

Copy the following code at the top of your product page (if possible before your Tag Manager code) and adapt the item_id, item_name, item_category and values price​​ dynamically.

<script>
    window._mtm = window._mtm || [];
    window._mtm.push({ecommerce: null});  // Clear the previous ecommerce object.
    window._mtm.push({
        event: "view_item",
        ecommerce: {
            items: [{
                item_id: "0123456789",
                item_name: "T-shirt Blanc",
                item_category: "Vêtements",
                price: 19.99,
            }]
        }
    });
</script>Code language: HTML, XML (xml)

To ensure that your dataLayer is correctly set up, you can enter _mtm the data present in your browser’s development console and read it. Your data must of course appear there.

You can repeat this validation operation at each step of this guide

Creating the custom HTML tag

Now that it is possible to access the product data from Matomo Tag Manager, we will create a custom HTML tag.

• Tag name: Matomo – Ecommerce – View Item

<script>
    window._paq = window._paq || [];
    var ecommerce = {{Ecommerce}};

    // Push Product View Data to Matomo - Populate parameters dynamically
    ecommerce.items.forEach(function(item){

        // Push custom event
        _paq.push(['trackEvent', 'Ecommerce', 'View item', 'view_item', item.price]);

        // Push ecommerce data
        _paq.push(['setEcommerceView',
            item.item_id,
            item.item_name,
            item.item_category,
            item.price
        ]);
    });

    // You must also call trackPageView when tracking a category view
    //_paq.push(['trackPageView']);
</script>Code language: HTML, XML (xml)

Your tag is ready, you technically don’t need to adapt the code copied above.

Creating the custom trigger

Your beacon is almost ready to work, but now you need to trigger it at the right time, i.e. when Matomo receives the custom event view_item.

To do this we will create a custom trigger of type “Custom event” (at the very bottom in the list) which will have the following configuration:

• Trigger name: Custom Event – Ecommerce – View Item
• Event Name: view_item

Once this configuration has been completed, e-commerce monitoring of the product page is complete.

Step 2 – View a category page

Have you figured out how to do the product page? If this is the case, we will continue the configuration with the category page, I will guide you!

Setting up the DataLayer (Compatible with GA4)

We again need the DataLayer to expose the name of the category to the Tag Manager, to do this, copy and adapt the following code on the template of your product category page.

<script>
    window._mtm = window._mtm || [];
    window._mtm.push({ecommerce: null});  // Clear the previous ecommerce object.
    window._mtm.push({
        event: "view_item_list",
        ecommerce: {
            item_list_name: "Vêtements"
        }
    });
</script>Code language: HTML, XML (xml)

Creating the custom HTML tag

Now you need to create a new custom HTML tag:

• Tag name: Matomo – Ecommerce – View Item List

You can now copy the following code into the area provided for the HTML code:

<script>
    window._paq = window._paq || [];
    var ecommerce= {{Ecommerce}};
    
    // Push custom event
    _paq.push(['trackEvent', 'Ecommerce', 'View item list', 'view_item_list']);

    // Push ecommerce data
    _paq.push(['setEcommerceView',
        false, // Product name is not applicable for a category view.
        false, // Product SKU is not applicable for a category view.
        ecommerce.item_list_name
    ]);

    // You must also call trackPageView when tracking a category view
    //_paq.push(['trackPageView']);
</script>Code language: HTML, XML (xml)

Creating the custom trigger

To trigger our tag on the category page, we will create a new custom trigger that will need to be configured like this:

• Trigger name: Custom Event – Ecommerce – View Item List
• Event Name: view_item_list

You see, it wasn’t that complicated either, come on, you’re on a good start, let’s continue.

Step 3 – Updating Cart

Now we will configure a new tag to listen for changes at the cart level.

Setting up the DataLayer (Incompatible with GA4)

In this scenario, the dataLayer must display all the products present as well as the quantity of each and the total price of the basket. Copy the following code, adapting it to your needs:

<script>
    window._mtm = window._mtm || [];
    window._mtm.push({ecommerce: null});  // Clear the previous ecommerce object.
    window._mtm.push({
        event: "update_cart",
        ecommerce: {
            value: 35.98,
            items: [
                {
                    item_id: "0123456789",
                    item_name: "T-shirt Blanc",
                    item_category: "Vêtements",
                    price: 19.99,
                    quantity: 1,
                },
                {
                    item_id: "9876543210",
                    item_name: "T-shirt Vert",
                    item_category: "Vêtements",
                    price: 15.99,
                    quantity: 1,
                }
            ]
        }
    });
</script>Code language: HTML, XML (xml)

Creating the custom HTML tag

You’re getting the hang of it, create a custom HTML tag that you can name and insert the following code:

• Tag name: Matomo – Ecommerce – Update Cart

<script>
window._paq = window._paq || [];
var ecommerce = {{Ecommerce}};

// An addEcommerceItem push should be generated for each cart item, even the products not updated by the current "Add to cart" click.
ecommerce.items.forEach(function(item){

    // Push ecommerce data
    _paq.push(['addEcommerceItem',
        item.item_id,
        item.item_name, 
        item.item_category,
        item.price,
        (item.quantity || 1)
    ]);
});

// Push custom event
_paq.push(['trackEvent', 'Ecommerce', 'Update cart', 'update_cart', ecommerce.value]);

// Push cart total value
_paq.push(['trackEcommerceCartUpdate', ecommerce.value]); 
</script>Code language: HTML, XML (xml)

Creation of the custom trigger

Perfect, do you see the path redrawing itself again? Come on, we create the associated trigger:

• Trigger name: Custom Event – Ecommerce – Update Cart
• Event Name: update_cart

Perfect, it was a little more complex but you got there, it’s a good sign for the future!

Step 4 – Order Tracking

Here we come, the last step and the most important of all.

Setting up the DataLayer (Compatible with GA4)

To collect the information related to the order, you will have to expose in your dataLayer the data for each product as well as the quantity, and add the data relating to taxes and delivery costs as mentioned at the start of this tutorial.

Here is the code that I recommend you implement in your dataLayer:

<script>
    window._mtm = window._mtm || [];
    window._mtm.push({ecommerce: null});  // Clear the previous ecommerce object.
    window._mtm.push({
        event: "purchase",
        ecommerce: {
            transaction_id: "000123",
            value: 35.98,
            order_sub_total: 30.98,
            tax: 3,
            shipping: 2,
            discount: false,
            items: [
                {
                    item_id: "0123456789",
                    item_name: "T-shirt Blanc",
                    item_category: "Vêtements",
                    price: 19.99,
                    quantity: 1,
                },
                {
                    item_id: "9876543210",
                    item_name: "T-shirt Vert",
                    item_category: "Vêtements",
                    price: 15.99,
                    quantity: 1,
                }
            ],
        }
    });
</script>Code language: HTML, XML (xml)

Creating the custom HTML tag

Then go to the Tag Manager to create a custom HTML tag in which you will integrate the following code.

• Tag name: Matomo – Ecommerce – Purchase

<script>
window._paq = window._paq || [];
var ecommerce = {{Ecommerce}};

// Product Array
ecommerce.items.forEach(function(item){
    _paq.push(['addEcommerceItem',
        item.item_id,
        item.item_name,
        item.item_category,
        item.price,
        (item.quantity || 1)
    ]);
});

// Push custom event
_paq.push(['trackEvent', 'Ecommerce', 'Purchase', 'purchase', ecommerce.value]);

// Push ecommerce data
window._paq.push(['trackEcommerceOrder',
    ecommerce.transaction_id,
    ecommerce.value,
    (ecommerce.order_sub_total || 0),
    (ecommerce.tax || 0),
    (ecommerce.shipping || 0),
    (ecommerce.discount || false)
]);
</script>Code language: HTML, XML (xml)

Creating the custom trigger

Now that our last tag is created, we will attach it to a trigger still of type “Custom event” with the following configuration:

• Trigger name: Custom Event – Ecommerce – Purchase
• Event Name: purchase