GTM sur Shopify : Installation complète avec Custom Pixel

L'architecture GTM sur Shopify a changé en 2024–2025 avec la dépréciation de checkout.liquid. Ce guide couvre la méthode Custom Pixel (Customer Events) valide en 2026. Vérifiez que votre boutique a bien migré vers Checkout Extensibility avant de commencer.

Ce qui a changé — la fin de checkout.liquid et la migration obligatoire

Shopify a déprécié checkout.liquid avec Checkout Extensibility :

• Août 2024 : dépréciation des pages Information, Expédition et Paiement via checkout.liquid
• Janvier 2025 : migration automatique des stores non migrés
• Août 2025 : dépréciation des pages Merci et Statut de commande — les scripts injectés via checkout.liquid cessent de fonctionner

Conséquence directe : si vous n'avez pas migré, votre tracking checkout est probablement incomplet ou cassé depuis fin 2025. C'est la cause la plus fréquente des baisses de conversions inexpliquées sur les boutiques Shopify en 2026.

Les 2 méthodes en 2026 — comparaison

Recommandation : utilisez les deux méthodes en parallèle — le Custom Pixel pour le tracking checkout et les conversions, le snippet dans theme.liquid pour les interactions on-site (heatmap, scroll, clics).

Installer GTM sur Shopify via Custom Pixel — pas à pas

• 1
  Récupérez votre ID de conteneur GTM

  Dans Google Tag Manager → sélectionnez votre conteneur → l'ID au format GTM-XXXXXXX est affiché en haut de l'interface.

• 2
  Accéder aux Customer Events dans Shopify

  Admin Shopify → Paramètres → Customer Events → Ajouter un pixel personnalisé. Donnez un nom explicite — ex : "Google Tag Manager".

• 3
  Collez le code GTM Custom Pixel

  Dans l'éditeur de code du pixel, collez le code suivant en remplaçant GTM-XXXXXXX par votre ID :

  // Initialisation du DataLayer et de GTM
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  
  // Consent Mode v2 — valeurs par défaut (denied pour l'EEE)
  gtag('consent', 'default', {
    'ad_storage': 'denied',
    'analytics_storage': 'denied',
    'ad_user_data': 'denied',
    'ad_personalization': 'denied',
    'wait_for_update': 500
  });
  
  // Chargement du conteneur GTM
  (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
  new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
  j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
  'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
  })(window,document,'script','dataLayer','GTM-XXXXXXX');
  
  // Abonnement aux Customer Events Shopify
  analytics.subscribe("product_viewed", (event) => {
    window.dataLayer.push({ ecommerce: null });
    window.dataLayer.push({
      event: "view_item",
      ecommerce: {
        currency: event.data?.productVariant?.price?.currencyCode || 'EUR',
        value: parseFloat(event.data?.productVariant?.price?.amount) || 0,
        items: [{
          item_id: event.data?.productVariant?.sku || '',
          item_name: event.data?.productVariant?.product?.title || '',
          item_category: event.data?.productVariant?.product?.type || '',
          price: parseFloat(event.data?.productVariant?.price?.amount) || 0,
          quantity: 1
        }]
      }
    });
  });
  
  analytics.subscribe("checkout_started", (event) => {
    window.dataLayer.push({ ecommerce: null });
    window.dataLayer.push({
      event: "begin_checkout",
      ecommerce: {
        currency: event.data?.checkout?.currencyCode || 'EUR',
        value: parseFloat(event.data?.checkout?.totalPrice?.amount) || 0
      }
    });
  });
  
  analytics.subscribe("checkout_completed", (event) => {
    window.dataLayer.push({ ecommerce: null });
    window.dataLayer.push({
      event: "purchase",
      ecommerce: {
        transaction_id: event.data?.checkout?.order?.id || '',
        value: parseFloat(event.data?.checkout?.totalPrice?.amount) || 0,
        tax: parseFloat(event.data?.checkout?.totalTax?.amount) || 0,
        shipping: parseFloat(event.data?.checkout?.shippingLine?.price?.amount) || 0,
        currency: event.data?.checkout?.currencyCode || 'EUR',
        items: (event.data?.checkout?.lineItems || []).map(item => ({
          item_id: item.variant?.sku || item.variant?.id || '',
          item_name: item.title || '',
          item_category: item.variant?.product?.type || '',
          price: parseFloat(item.variant?.price?.amount) || 0,
          quantity: item.quantity || 1
        }))
      }
    });
  });

• 4
  Configurer les permissions du pixel

  Vérifiez les paramètres de confidentialité dans l'éditeur. Cliquez Enregistrer puis Connecter. Le statut du pixel doit passer à "Connecté".

• 5
  Vérifiez les paramètres de consentement du pixel

  Dans Customer Events, chaque pixel a un paramètre "Privacy & Consent". Vérifiez la valeur configurée :

  • "Not required" (par défaut) : le pixel se charge pour tous les visiteurs, indépendamment du consentement
  • "Required" : le pixel ne se charge que si l'utilisateur a accordé les cookies Marketing — votre tracking checkout sera silencieusement inactif pour les utilisateurs qui refusent ou n'interagissent pas avec le bandeau

  Pour l'EEE, la valeur "Required" est généralement recommandée pour la conformité RGPD, mais assurez-vous que votre CMP gère correctement la mise à jour du consentement.

S'abonner aux Customer Events Shopify — liste complète

Configurer GTM pour recevoir les événements Shopify

Créer les Custom Event triggers

Dans GTM → Déclencheurs → Nouveau → Type : Événement personnalisé. Nom de l'événement : exactement le même que dans votre push — ex : purchase, view_item, begin_checkout.

Variables DataLayer pour les données e-commerce

Variables → Nouvelle → Variable de couche de données. Pour récupérer les données de transaction :

• ecommerce.transaction_id → Transaction ID
• ecommerce.value → Valeur de commande
• ecommerce.currency → Devise

Enrichir le DataLayer — item_category et dimensions personnalisées

Le DataLayer de base capte les champs essentiels. Pour des rapports GA4 plus riches, enrichissez les items avec des champs supplémentaires lors du push :

• item_category : type de produit Shopify (item.variant?.product?.type) — déjà inclus dans le code ci-dessus
• item_category2 : collection principale du produit — nécessite un accès à l'API Storefront pour récupérer les collections
• discount_amount : montant remisé pour analyser l'impact des codes promo
• coupon : code promo appliqué (event.data?.checkout?.discountApplications[0]?.title)

Ces paramètres débloquent des rapports GA4 comme "quelles catégories de produits génèrent le plus de revenu" ou "quels codes promo produisent des acheteurs récurrents".

Limitations du sandbox Custom Pixel

Consent Mode v2 sur Shopify avec GTM

Architecture recommandée

• Initialisation dans le Custom Pixel : tous les paramètres sur denied par défaut (code inclus dans l'étape 3).
• Mise à jour après consentement : votre CMP (Axeptio, Cookiebot, Cookieyes) doit être configurée avec l'intégration Shopify dédiée pour gérer la mise à jour des 4 paramètres.
• Vérification : DevTools → Réseau → en refus, gcs=G100 doit être présent.

Pour la configuration complète : Consent Mode v2 sur Shopify — guide complet →

Déboguer GTM sur Shopify — sans mode Preview

• 1
  DevTools Console — vérification des pushes DataLayer

  F12 → onglet Console. Sur la page que vous souhaitez tester, tapez dataLayer. Vous verrez les pushes de votre Custom Pixel. Sur la page produit : cherchez event: "view_item". Sur la page de confirmation : cherchez event: "purchase" avec un transaction_id non vide.

• 2
  Test avec Bogus Gateway — méthode officielle Shopify

  Pour tester le tracking sur la page de confirmation sans passer par un vrai paiement : Admin Shopify → Paramètres → Paiements → activer Bogus Gateway (mode test Shopify). Passez une commande fictive avec le numéro de carte 1 (qui simule une transaction réussie). Vérifiez dans DevTools que le push checkout_completed se déclenche bien avec les bonnes données. Désactivez le Bogus Gateway après les tests.

• 3
  Shopify Pixel Helper — vérification des événements Customer Events

  L'extension Chrome Shopify Pixel Helper (Chrome Web Store) affiche les événements Customer Events déclenchés sur chaque page — utile pour vérifier que Shopify envoie bien les événements à votre pixel avant même de regarder GTM.

• 4
  Vérifiez les doublons avec les apps natives Shopify

  Point souvent négligé : si vous avez activé l'intégration native Shopify "Google & YouTube" et GTM Custom Pixel, les événements peuvent être envoyés deux fois — une fois par l'app native, une fois par GTM. Cela donne des conversions doublées dans Google Ads et GA4. Vérifiez dans DevTools → onglet Réseau → filtrez sur "google-analytics" : chaque événement doit apparaître une seule fois. De même pour Meta : l'app native Meta + Meta Pixel via GTM = double fire. Choisissez un seul canal par plateforme.

GTM vs apps Shopify — que choisir en 2026 ?

Tracking e-commerce GA4 complet sur Shopify

Si vous avez besoin d'aller plus loin — récupérer les conversions bloquées par les adblockers et iOS 14 — l'étape suivante est le server-side tracking Shopify. GTM client-side et server-side coexistent sur la même boutique.

Questions fréquentes