Guide GTM, Consent Mode v2 et sandbox Shopify

Checkout Sandbox Shopify Plus : Comment gérer GTM, Consent Mode v2 et les cookies ?

Le passage à la Checkout Extensibility a profondément transformé la façon dont les marchands Shopify Plus doivent gérer le tracking, les cookies et le consentement utilisateur. Depuis 2025, le checkout et les pages de remerciements s’exécutent dans un iframe sandbox isolé, rendant obsolètes les anciennes méthodes (checkout.liquid, script tags, injection GTM classique).

Cette isolation technique, imposée par Shopify pour des raisons de sécurité et de performance, crée de nouveaux défis majeurs :

• Impossible d’accéder directement aux cookies du storefront.
• GTM Preview ne fonctionne plus nativement.
• Le consentement (GDPR, CCPA, Google Consent Mode v2) doit être synchronisé entre le storefront et le checkout.
• Les événements critiques (begin_checkout, purchase…) ne peuvent plus être trackés sans Custom Pixel.

Ce guide exhaustif, basé exclusivement sur la documentation officielle Shopify (mise à jour mars 2026), vous fournit toutes les explications techniques, le code prêt à copier-coller, les bonnes pratiques de test et les limitations incontournables. Que vous utilisiez Google Analytics 4, Google Ads, Meta, ou une CMP tierce (Consentmo, OneTrust, Pandectes…), vous trouverez ici la solution complète et conforme pour maintenir une mesure précise tout en respectant la vie privée de vos clients.

1. Pourquoi c’est compliqué : le sandbox du checkout (explication technique)

Depuis la Checkout Extensibility (2024-2025), Shopify a supprimé checkout.liquid. Le checkout (et la page Thank You) tourne désormais dans un iframe sécurisé isolé (sandbox lax pour les Custom Pixels).

Découvrez égalementComment créer et lire des cookies avec Google Tag Manager ?

Conséquences concrètes :

• Impossible d’injecter du JS classique (GTM dans theme.liquid) sur le checkout.
• GTM Preview ne fonctionne plus.
• Les cookies du storefront (_tracking_consent) ne sont pas accessibles directement.
• Les requêtes third-party sont bloquées si consentement refusé.

Solution officielle unique : Custom Pixel (Customer Events → Custom Pixels). C’est le seul endroit où Shopify autorise l’exécution de JS (y compris le chargement de GTM) dans le sandbox du checkout.

2. Consentement : 2 niveaux officiels

Niveau 1 – Configuration UI (recommandé pour 90 % des cas) Dans Settings → Customer events → ton Custom Pixel → Customer privacy :

• Coche Analytics et Marketing comme « Required ». Le pixel ne se chargera jamais si l’utilisateur n’a pas consenti (GDPR/CCPA automatique).

Niveau 2 – Google Consent Mode v2 (obligatoire pour GA4 + Google Ads) À ajouter dans le pixel (code officiel Shopify) :

JavaScript

// Consent Mode v2 par défaut (tout denied au chargement)
gtag('consent', 'default', {
  'ad_storage': 'denied',
  'analytics_storage': 'denied',
  'ad_user_data': 'denied',
  'ad_personalization': 'denied'
});

// Mise à jour quand consentement donné (Shopify le fait automatiquement si tu utilises l’UI)
gtag('consent', 'update', {
  'ad_storage': 'granted',
  'analytics_storage': 'granted',
  'ad_user_data': 'granted',
  'ad_personalization': 'granted'
});

Découvrez égalementGuide GTM Pixel Meta tracking cross-domain

Niveau 3 – API complète Customer Privacy (si tu veux un contrôle total) Tu peux écouter les changements :

JavaScript

document.addEventListener("visitorConsentCollected", (event) => {
  const consent = event.detail;
  gtag('consent', 'update', {
    'ad_storage': consent.analyticsAllowed ? 'granted' : 'denied',
    // etc.
  });
});

Source : https://shopify.dev/docs/api/customer-privacy

3. Le code Custom Pixel GTM officiel (copie-colle prêt à tester)

Va dans Shopify Admin → Settings → Customer events → Create custom pixel Nom : « GTM Checkout + Consent v2 »

JavaScript

// === GTM + Consent Mode v2 (code officiel Shopify 2026) ===
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}

// Chargement GTM (version sans <script> HTML)
(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');  // ← TON ID

// Consent Mode v2 (officiel Shopify)
gtag('consent', 'default', {
  'ad_storage': 'denied',
  'analytics_storage': 'denied',
  'ad_user_data': 'denied',
  'ad_personalization': 'denied'
});

// === Événements checkout (à ajouter tous) ===
analytics.subscribe("checkout_started", (event) => {
  window.dataLayer.push({
    event: "begin_checkout",
    currency: event.data?.checkout?.currencyCode,
    value: event.data?.checkout?.totalPrice?.amount,
    items: event.data?.checkout?.lineItems?.map(item => ({
      item_id: item.variant?.id,
      item_name: item.title,
      price: item.variant?.price?.amount,
      quantity: item.quantity
    }))
  });
});

analytics.subscribe("checkout_shipping_info_submitted", (event) => {
  window.dataLayer.push({ event: "checkout_shipping_info_submitted", ...event.data });
});

analytics.subscribe("payment_info_submitted", (event) => {
  window.dataLayer.push({ event: "add_payment_info", ...event.data });
});

analytics.subscribe("checkout_completed", (event) => {
  window.dataLayer.push({
    event: "purchase",
    transaction_id: event.data?.checkout?.order?.id,
    value: event.data?.checkout?.totalPrice?.amount,
    currency: event.data?.checkout?.currencyCode,
    tax: event.data?.checkout?.totalTax?.amount,
    shipping: event.data?.checkout?.shippingLine?.price?.amount,
    items: event.data?.checkout?.lineItems?.map(item => ({ ... }))
  });
});

Découvrez égalementComparaison entre App Engine et Cloud Run pour GTM server-side

4. Liste complète des événements checkout à tracker (officiels)

• checkout_started
• checkout_contact_info_submitted
• checkout_address_info_submitted
• checkout_shipping_info_submitted
• payment_info_submitted
• checkout_completed

Tu peux aussi utiliser analytics.subscribe(‘all_events’, …) en dev pour tout voir.

5. Bannière consentement AU CHECKOUT (Shopify Plus obligatoire)

Option 1 (native) : Settings → Customer privacy → active la bannière. Elle s’applique aussi au checkout si même domaine racine.

Option 2 (recommandée) : Utilise une app avec Checkout Block :

• Consentmo (block dédié + Consent Mode v2 automatique)
• OneTrust, Pandectes, etc.

Option 3 (custom) : Crée une Checkout UI Extension (target purchase.checkout.block.render) qui affiche une bannière avec window.Shopify.customerPrivacy.shouldShowBanner().

6. Tests & Debugging (les seuls outils qui marchent)

1. Shopify Pixel Helper (le plus important) → Settings → Customer events → clique sur le pixel → Test. Tu vois en vert tous les événements reçus dans le sandbox.
2. Google Tag Assistant : partiellement (ne détecte pas toujours les tags dans le sandbox).
3. Console DevTools sur le checkout + console.log dans ton pixel.

7. Limitations incontournables (à connaître)

• Pas de document.cookie direct sur les cookies du top window.
• Pas de GTM Preview classique.
• Les pixels ne se chargent que si consentement donné (si configuré en « Required »).
• Pour les upsells post-purchase : l’événement checkout_completed peut se déclencher sur la première page d’upsell.