Une agence qui gère les campagnes publicitaires d’un client e-commerce entend régulièrement la même question en réunion mensuelle : « combien rapporte vraiment telle campagne ? ». Sans Enhanced Ecommerce correctement branché, Google Analytics ne voit que des sessions et des pages vues, jamais les produits vendus ni leur valeur. Ce billet détaille l’instrumentation Enhanced Ecommerce sous Analytics Universal, la version encore très largement déployée sur les boutiques WooCommerce en 2020.
L’objectif n’est pas de configurer GA4, qui n’existe pas encore sous cette forme, ni de traiter le mode de consentement des cookies : il s’agit uniquement de faire remonter à Analytics des données de vente fiables, exploitables ensuite dans les rapports Ecommerce natifs.
Le principe du dataLayer
Enhanced Ecommerce fonctionne par étapes : chaque action du visiteur (vue d’un produit, ajout au panier, passage en caisse, achat) pousse un objet structuré dans le dataLayer, que Google Tag Manager lit ensuite pour envoyer les bons hits à Analytics. Rien n’est envoyé directement à Analytics depuis WooCommerce : tout transite par ce tableau JavaScript intermédiaire.
Activer Enhanced Ecommerce côté Analytics
Avant tout code, il faut activer l’option dans l’interface Analytics, sous Administration > Paramètres Ecommerce > Activer Ecommerce amélioré pour la vue concernée. Sans cette activation, les rapports Ecommerce restent vides même si les hits arrivent correctement.
Pousser les données produit dans le dataLayer
Sur la page produit, un script inline dans le thème enfant génère l’événement de détail produit consulté :
window.dataLayer = window.dataLayer || [];
dataLayer.push({
'event': 'detailProduit',
'ecommerce': {
'detail': {
'products': [{
'name': 'Veste technique Aroa',
'id': 'AROA-VESTE-014',
'price': '129.00',
'category': 'Vêtements techniques'
}]
}
}
});Ce bloc s’insère via le hook woocommerce_after_single_product, en boucle sur le produit courant grâce à global $product;. Il faut veiller à échapper correctement le nom et la catégorie du produit pour éviter toute casse du JSON si un titre contient des guillemets.
Suivre l’ajout au panier
L’ajout au panier via AJAX déclenche un événement JavaScript propre, added_to_cart, sur lequel on peut se brancher côté front :
jQuery(document.body).on('added_to_cart', function(event, fragments, hash, button) {
dataLayer.push({
'event': 'ajoutPanier',
'ecommerce': {
'add': {
'products': [{
'id': button.data('product_id'),
'quantity': button.data('quantity') || 1
}]
}
}
});
});Le tunnel de commande et l’achat final
La page de paiement pousse un événement checkout avec l’étape courante, et la page de remerciement pousse l’événement purchase contenant l’identifiant de transaction et le montant réel encaissé :
