Matomo ecommerce tracking : Le guide complet

Écrit par :  Photo de profil de Lucas Rollin Lucas Rollin

Mis à jour : samedi 30 décembre 2023

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.

Modification d'un site web dans Matomo
Modification d'un site web dans Matomo

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

Activation de l'e-commerce dans Matomo
Activation de l'e-commerce dans Matomo

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

Rapports e-commerce de Matomo
Rapports e-commerce de Matomo

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

ParamètreType de valeurExemple de valeur
Catégorie du produitSTRING OU Array(STRING)"Livres" ou ["Livres", "Aventure"]
_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

ParamètreType de valeurObligatoireExemple de valeur
Identifiant du produit (SKU)STRINGOUI"1234"
Nom du produitSTRINGNON"Percy Jackson"
Catégorie du produitSTRINGNON["Livres", "Aventure"]
Prix du produitINTEGER OU FLOATNON9.99
_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.

ParamètreType de valeurObligatoireExemple de valeur
Identifiant du produit (SKU)STRINGOUI"1234"
Nom du produitSTRINGNON"Percy Jackson"
Catégorie du produitSTRINGNON["Livres", "Aventure"]
Prix du produitINTEGER OU FLOATNON9.99
Quantité du produitINTEGERNON5
_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().

ParamètreType de valeurObligatoireExemple de valeur
Valeur du panierINTEGER ou FLOATOUI49.95
_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.

ParamètreType de valeurExemple de valeur
Identifiant du produit (SKU)INTEGER1234
_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 :

Exemple de résultat de la fonction getEcommerceItems de Matomo
Exemple de résultat de la fonction getEcommerceItems() de Matomo

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.

ParamètreType de valeurObligatoireExemple de valeur
Identifiant de la commande (order id)STRINGOUI"1234"
Total (revenue)INTEGER OU FLOATOUI49.95
Sous-TotalINTEGER OU FLOATNON9.99
TaxesINTEGER OU FLOATNON1.5
Frais de livraisonINTEGER OU FLOATNON1
RéductionINTEGER OU FLOATNON5
_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()]);