Matomo ecommerce tracking : Le guide complet

Pourquoi implémenter le tracking e-commerce de Matomo ? #

Le tracking e-commerce correspond à la collecte de données sur l’ensemble du parcours d’achat d’un visiteur sur un site web e-commerce. Matomo Analytics est un des outils d’analyse web qui propose un tracking avancé sur l’e-commerce.

Dans Matomo, le tracking e-commerce vous permet d’accéder aux données suivantes :

1. Les catégories de produits visualisées
2. Les produits visualisés
3. Le nombre de paniers abandonnés et leur contenu
4. Les produits vendus (par identifiant, nom et catégorie)
5. Les ventes par :
   • sites référents
   • page
   • emplacement géographique
   • navigateur
   • type de périphérique
   • canal (attribution des conversions)
   • etc.
6. Le nombre de visites ou jours nécessaires pour obtenir une conversion
7. Le parcours utilisateur qui a mené à l’achat

Activer les rapports e-commerce de Matomo #

Rendez-vous dans Réglages > Sites Web > Gérer.

Cliquez ensuite sur le bouton Modifier sur le site sur lequel vous souhaitez activer les rapports e-commerce.

Scrollez ensuite jusqu’à la section e-commerce puis sélectionnez E-commerce activé.

Ceci vous donne ensuite accès aux rapports e-commerce disponibles dans le menu latéral de gauche :

Vue d’ensemble #

Le schéma ci-dessous présente le fonctionnement général du tracking e-commerce de Matomo. Dans cet article, on va étudier ce que Matomo attend comme données pour chaque interaction afin d’alimenter correctement vos rapports e-commerce et ainsi tirer pleinement partie de vos données.

flowchart TD
    E[Instance Matomo]
    subgraph Navigateur
        direction TB
        A["Vues de catégories/produits"]
        B["Ajout au panier"]
        C["Retrait du panier"]
        F["Obtenir le contenu \n du panier"]
        D((Objet panier \n de Matomo))
        G["Supprimer le panier"]
        H(["trackEcommerceCartUpdate()"])
        I(["trackPageView()"])
        J(["trackEcommerceOrder()"])
    end
    B -- "addEcommerceItem()" --> D
    C -- "removeEcommerceItem()" --> D
    D -- "getEcommerceItems()" --> F
    G -- "clearEcommerceCart()" --> D
    D --> H
    H -- HTTP --> E
    D --> J
    J -- HTTP --> E
    A -- "setEcommerceView()" --> I
    I -- HTTP --> E

Les vues de catégories #

flowchart LR
    E[Instance Matomo]
    subgraph Navigateur
        direction TB
        A["Vues de catégories/produits"]
        I(["trackPageView()"])
    end
    A -- "setEcommerceView()" --> I
    I -- HTTP --> E

setEcommerceView #

_paq.push(['setEcommerceView',
    false, // Le nom du produit doit être à false pour une vue de catégorie.
    false, // Le SKU du produit doit être à false pour une vue de catégorie.
    "Livres", // (Optionnel) Catégorie du produit ou un tableau de 5 catégories maximum.
]);

// Vous devez appeller la fonction trackPageView pour envoyer la requête à Matomo
_paq.push(['trackPageView']);

Les vues de produits #

flowchart LR
    E[Instance Matomo]
    subgraph Navigateur
        direction TB
        A["Vues de catégories/produits"]
        I(["trackPageView()"])
    end
    A -- "setEcommerceView()" --> I
    I -- HTTP --> E

setEcommerceView #

_paq.push(['setEcommerceView',
    "1234", // (Obligatoire) Identifiant du produit (SKU)
    "Percy Jackson", // (Optionnel) Nom du produit
    ["Livres", "Aventure"], // (Optionnel) Catégorie du produit ou un tableau de 5 catégories maximum.
    9.99 // (Optionnel) Prix du produit
]);

// Vous devez appeller la fonction trackPageView pour envoyer la requête à Matomo
_paq.push(['trackPageView']);

Les ajouts au panier #

flowchart LR
    subgraph Navigateur
        direction LR
        B["Ajout au panier"]
        D((Objet panier \n de Matomo))
    end
    B -- "addEcommerceItem()" --> D

À la différence de Google Analytics 4, Matomo n’additionne pas les produits ajoutés au panier, vous devez lui fournir l’état actuel du panier. Matomo identifie de façon unique les produits dans le panier avec leur SKU.

Si vous ajoutez 2 fois le même produit (même SKU), la quantité ne sera pas additionée mais le produit en question sera complètement remplacé.

Au premier abord, ça peut paraître illogique mais c’est tout simplement une façon différente de voir les choses par rapport à GA4.

Si vous utilisez la Data Layer de GA4, il se peut que l’état actuel du panier ne soit pas disponible lors de l’événement add_to_cart. Avant de gérer ça, on va voir comment fonctionnent les ajouts au panier avec le code de suivi de Matomo.

addEcommerceItem #

Cette fonction permet de mettre à jour l’état actuel du panier. Utilisée seule, elle n’envoie aucune requête à Matomo. Elle crée un objet panier localement dans le navigateur du visteur.

_paq.push(['addEcommerceItem',
    "1234", // (Obligatoire) Identifiant du produit (SKU)
    "Percy Jackson", // (Optionnel) Nom du produit
    ["Livres", "Aventure"], // (Optionnel) Catégorie du produit ou un tableau de 5 catégories maximum.
    9.99, // (Optionnel) Prix du produit
    5 // (Optionnel) Quantité du produit (la valeur par défaut est 1)
]);

L’objet panier représente l’état actuel du panier selon Matomo. Cet objet est accessible via la méthode getEcommerceItems().

trackEcommerceCartUpdate #

flowchart LR
    E[Instance Matomo]
    subgraph Navigateur
        direction LR
        D((Objet panier \n de Matomo))
        H(["trackEcommerceCartUpdate()"])
    end
    D --> H
    H -- HTTP --> E

Cette fonction permet d’activer la fonctionalité de panier abandonné dans Matomo. Elle envoie une requête à Matomo en précisant la valeur actuelle du panier. Cette valeur n’est pas calculée dynamiquement à partir des prix et des quantités des produits que vous avez ajoutés via addEcommerceItems(). Pour régler ce problème, vous devez soit avoir accès à cette donnée dans la Data Layer ou utiliser la fonction getMatomoTotalCartValue().

_paq.push(['trackEcommerceCartUpdate', 49.95]); 

Les retraits du panier #

flowchart LR
    subgraph Navigateur
        direction LR
        C["Retrait du panier"]
        D((Objet panier \n de Matomo))
    end
    C -- "removeEcommerceItem()" --> D

removeEcommerceItem #

Cette fonction prend en paramètre l’identifiant (SKU) du produit à retirer du panier. À noter que le produit est complètement retiré de l’objet panier de Matomo, peu importe sa quantité.

Aucune requête n’est envoyée à Matomo lors de l’appel à cette fonction.

_paq.push(["removeEcommerceItem", 1234]); 
// remplacer 1234 par le SKU du produit que vous 
// souhaitez retirer de l'objet panier

Contenu de l’objet panier #

flowchart LR
    subgraph Navigateur
        direction LR
        F["Obtenir le contenu \n du panier"]
        D((Objet panier \n de Matomo))
    end
    D -- "getEcommerceItems()" --> F

getEcommerceItems #

Cette fonction renvoie un objet de tableaux Javascript dans lequel chaque tableau correspond à un produit de l’objet panier.

Matomo.getAsyncTracker().getEcommerceItems();

Voici un exemple de résultat avec deux produits précédemment ajoutés au panier :

Supprimer l’objet panier #

clearEcommerceCart #

Cette fonction ne prend aucun paramètre et supprime complètement l’objet panier de Matomo.

_paq.push(["clearEcommerceCart"]);

Les commandes #

flowchart LR
    E[Instance Matomo]
    subgraph Navigateur
        direction LR
        D((Objet panier \n de Matomo))
        J(["trackEcommerceOrder()"])
    end
    D --> J
    J -- HTTP --> E

trackEcommerceOrder #

Cette fonction envoie à Matomo les informations sur la commande qui vient d’être passée. Elle appelle également la fonction clearEcommerceCart(), ce qui réinitialise l’objet panier par la même occasion.

_paq.push(['trackEcommerceOrder',
    "1234", // (Obligatoire) Identifiant de la commande (order id)
    49.95, // (Obligatoire) Total (revenue)
    9.99, // (Optionnel) Sous-total
    1.5, // (Optionnel) Taxes
    1, // (Optionnel) Frais de livraison
    5 // (Optionnel) Réduction
]);

Fonctions utilitaires #

parseFloat #

Cette fonction native vous permet de transformer un STRING en FLOAT.

parseFloat("9.99"); // => 9.99

getMatomoTotalCartValue #

J’ai créé la fonction getMatomoTotalCartValue() pour obtenir le total de l’objet panier sans avoir besoin de cette donnée dans la Data Layer et ainsi profiter de la fonctionnalité de panier abandonné de Matomo avec trackEcommerceCartUpdate().

function getMatomoTotalCartValue() {
    let cart = [];
    if(Matomo) {
        cart = Object.entries(Matomo.getAsyncTracker().getEcommerceItems());
    }
    var total = 0;
    cart.forEach(product => {
        total += product[1][3]*product[1][4];
    });
    return total;
}

_paq.push(['addEcommerceItem',
    "1234", // (Obligatoire) Identifiant du produit (SKU)
    "Percy Jackson", // (Optionnel) Nom du produit
    ["Livres", "Aventure"], // (Optionnel) Catégorie du produit ou un tableau de 5 catégories maximum.
    9.99, // (Optionnel) Prix du produit
    5 // (Optionnel) Quantité du produit (la valeur par défaut est 1)
]);

_paq.push(['trackEcommerceCartUpdate', getMatomoTotalCartValue()]);