DataLayer : le guide complet pour e-commerce (Shopify, PrestaShop, WooCommerce)

Pourquoi le dataLayer est la fondation de votre tracking e-commerce

Le dataLayer est un objet JavaScript qui sert d’interface entre votre site et Google Tag Manager (GTM). Sans lui, vos tags n’ont accès à aucune donnée métier : pas de nom de produit, pas de prix, pas de catégorie, pas de revenue.

Le constat terrain : sur les 150+ audits e-commerce réalisés ces 3 dernières années, 72 % avaient un dataLayer incomplet ou mal structuré. Résultat : des rapports GA4 inutilisables, des campagnes publicitaires qui optimisent sur des données fausses, et des décisions business prises à l’aveugle.

Ce guide vous donne tout ce qu’il faut pour implémenter un dataLayer e-commerce conforme aux spécifications GA4, sur n’importe quelle plateforme.

La spécification GA4 e-commerce : les événements obligatoires

GA4 attend une série d’événements structurés pour reconstituer le funnel d’achat. Voici les événements essentiels et leurs paramètres requis :

1. view_item — Page produit consultée

dataLayer.push({
  event: "view_item",
  ecommerce: {
    currency: "EUR",
    value: 49.90,
    items: [{
      item_id: "SKU-12345",
      item_name: "T-shirt col rond bio",
      item_brand: "MaMarque",
      item_category: "Vêtements",
      item_category2: "T-shirts",
      item_variant: "Bleu / M",
      price: 49.90,
      quantity: 1,
      index: 0
    }]
  }
});

2. add_to_cart — Ajout au panier

dataLayer.push({
  event: "add_to_cart",
  ecommerce: {
    currency: "EUR",
    value: 49.90,
    items: [{
      item_id: "SKU-12345",
      item_name: "T-shirt col rond bio",
      item_brand: "MaMarque",
      item_category: "Vêtements",
      item_variant: "Bleu / M",
      price: 49.90,
      quantity: 1
    }]
  }
});

3. begin_checkout — Début du tunnel de paiement

dataLayer.push({
  event: "begin_checkout",
  ecommerce: {
    currency: "EUR",
    value: 149.70,
    coupon: "PROMO10",
    items: [
      {
        item_id: "SKU-12345",
        item_name: "T-shirt col rond bio",
        price: 49.90,
        quantity: 3
      }
    ]
  }
});

4. purchase — Transaction confirmée

dataLayer.push({
  event: "purchase",
  ecommerce: {
    transaction_id: "T-20260511-001",
    currency: "EUR",
    value: 149.70,
    tax: 24.95,
    shipping: 4.90,
    coupon: "PROMO10",
    items: [
      {
        item_id: "SKU-12345",
        item_name: "T-shirt col rond bio",
        item_brand: "MaMarque",
        item_category: "Vêtements",
        item_variant: "Bleu / M",
        price: 49.90,
        quantity: 3
      }
    ]
  }
});

Événements complémentaires importants

Événement	Quand le déclencher	Paramètres clés
view_item_list	Page catégorie, résultats de recherche	item_list_id, item_list_name, items[]
select_item	Clic sur un produit dans une liste	item_list_id, items[]
remove_from_cart	Suppression d’un produit du panier	currency, value, items[]
add_shipping_info	Sélection du mode de livraison	shipping_tier, currency, value, items[]
add_payment_info	Saisie des informations de paiement	payment_type, currency, value, items[]

Implémentation par plateforme

Shopify

Shopify offre plusieurs approches :

Option 1 : Via le fichier theme.liquid (contrôle total)

Injectez le dataLayer directement dans vos templates Liquid. Exemple pour la page produit :

{% if template contains 'product' %}
<script>
  dataLayer.push({ ecommerce: null }); // Clear previous
  dataLayer.push({
    event: "view_item",
    ecommerce: {
      currency: "{{ shop.currency }}",
      value: {{ product.selected_or_first_available_variant.price | money_without_currency | remove: ',' }},
      items: [{
        item_id: "{{ product.selected_or_first_available_variant.sku }}",
        item_name: "{{ product.title | escape }}",
        item_brand: "{{ product.vendor | escape }}",
        item_category: "{{ product.type | escape }}",
        price: {{ product.selected_or_first_available_variant.price | money_without_currency | remove: ',' }},
        quantity: 1
      }]
    }
  });
</script>
{% endif %}

Option 2 : Via une application Shopify (Elevar, DataLayer Pro, littledata). Plus rapide à installer mais moins de contrôle. Coût : 100-300 EUR/mois selon l’application.

Point d’attention Shopify : le checkout est verrouillé sur les plans non-Plus. Utilisez les scripts de checkout additionnels ou l’API Web Pixel pour les événements begin_checkout et purchase.

PrestaShop

Option 1 : Module dédié (GTM4PS, Advanced Google Tag Manager). Bonne couverture des événements de base, configuration en back-office.

Option 2 : Développement custom dans les hooks

PrestaShop utilise un système de hooks. Les hooks pertinents :

Hook	Événement dataLayer
displayHeader	Initialisation dataLayer
displayProductActions	view_item
actionCartSave	add_to_cart
displayOrderConfirmation	purchase

// Exemple dans un module custom - hookDisplayOrderConfirmation
public function hookDisplayOrderConfirmation($params)
{
    $order = $params['order'];
    $products = $order->getProducts();
    // Construire le tableau items[] et injecter le JS
}

WooCommerce

Option 1 : Plugin (GTM4WP de Thomas Geiger — gratuit et fiable, ou le plugin officiel Google Listings & Ads).

Option 2 : Code custom dans functions.php

// Exemple : push dataLayer sur la page de confirmation
add_action('woocommerce_thankyou', function($order_id) {
    $order = wc_get_order($order_id);
    if (!$order) return;

    $items = [];
    foreach ($order->get_items() as $item) {
        $product = $item->get_product();
        $items[] = [
            'item_id'   => $product->get_sku(),
            'item_name' => $item->get_name(),
            'price'     => (float) $order->get_item_total($item),
            'quantity'  => $item->get_quantity(),
        ];
    }

    $data = [
        'event' => 'purchase',
        'ecommerce' => [
            'transaction_id' => (string) $order->get_id(),
            'value'          => (float) $order->get_total(),
            'currency'       => $order->get_currency(),
            'tax'            => (float) $order->get_total_tax(),
            'shipping'       => (float) $order->get_shipping_total(),
            'items'          => $items,
        ],
    ];

    echo '<script>dataLayer.push(' . json_encode($data) . ');</script>';
});

Les erreurs les plus fréquentes (et comment les éviter)

1. Devise manquante (currency)

Impact : sans currency, GA4 ne peut pas calculer le revenu. Vos rapports monétaires affichent 0 EUR. C’est l’erreur la plus destructrice et la plus courante — elle rend 100 % de vos données de revenus inexploitables.

2. Noms d’événements incorrects

GA4 attend des noms exacts : add_to_cart, pas addToCart, pas Add_To_Cart, pas add-to-cart. La moindre variation crée un événement custom au lieu d’alimenter les rapports e-commerce standard.

3. Tableau items[] inconsistant

Le piège classique : item_id est le SKU sur la page produit mais l’ID produit dans le panier. Ou price est TTC sur view_item mais HT sur purchase. Assurez-vous que la même logique s’applique sur tout le funnel.

4. Oublier de vider le dataLayer

Avant chaque push e-commerce, videz l’objet ecommerce :

dataLayer.push({ ecommerce: null });

Sans cela, des données de l’événement précédent peuvent persister et contaminer l’événement suivant.

5. Push dupliqué sur purchase

Si votre page de confirmation se recharge (retour arrière, refresh), le même achat est compté deux fois. Implémentez un guard basé sur transaction_id dans sessionStorage ou localStorage.

Tester votre implémentation

GTM Preview Mode

1. Ouvrez GTM > Preview > entrez l’URL de votre site
2. Naviguez dans le tunnel d’achat
3. Dans le panneau de debug, vérifiez chaque événement : les variables sont-elles remplies ? Les tags se déclenchent-ils ?

GA4 DebugView

1. Dans GA4 > Admin > DebugView
2. Chaque événement apparaît en temps réel avec ses paramètres
3. Vérifiez que items, value, currency et transaction_id sont présents et corrects

Checklist avant mise en production

• Tous les événements du funnel sont présents (view_item -> add_to_cart -> begin_checkout -> purchase)
• currency est envoyé avec chaque événement monétaire
• Les item_id et item_name sont cohérents à travers tout le funnel
• Le transaction_id est unique par commande
• Le dataLayer est vidé (ecommerce: null) avant chaque push
• Les prix sont des nombres (pas des chaînes)
• Le push purchase ne se déclenche qu’une seule fois par commande

Besoin d’un dataLayer fiable ?

Un dataLayer mal implémenté, c’est des mois de données inutilisables et des campagnes qui optimisent dans le vide. Chez chillmetrics, nous installons et validons votre tracking e-commerce sur toutes les plateformes, avec un plan de marquage documenté et des tests rigoureux.

Confiez-nous votre installation tracking et commencez à prendre des décisions sur des données fiables.