# Enhanced Ecommerce sous Google Analytics Universal pour WooCommerce

> Prouver le ROI d'une boutique WooCommerce passe par un tracking fiable des ventes. Voici comment instrumenter l'Enhanced Ecommerce d'Analytics Universal, étape par étape.

- Auteur : Clément Hadrot
- Publié le : 2020-04-09
- Mis à jour le : 2020-04-09
- Catégorie : E-commerce
- URL : https://wpmoderne.dev.wordpress-developpement.fr/ecommerce/enhanced-ecommerce-google-analytics-universal-woocommerce/

## L’essentiel

- Le dataLayer transporte les données produit avant l'envoi
- Chaque étape du tunnel a son propre événement Enhanced Ecommerce
- Google Tag Manager évite de coder le tracking en dur dans le thème

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

> L'essentiel à retenir : Le dataLayer transporte les données produit avant l'envoi ; Chaque étape du tunnel a son propre événement Enhanced Ecommerce ; Google Tag Manager évite de coder le tracking en dur dans le thème

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é :