Google Consent Mode dans un pixel personnalisé Shopify (Google Tag Manager)

Vue d’ensemble

Certaines boutiques chargent un conteneur Google Tag Manager (GTM) depuis un Shopify custom pixel (Settings > Customer events), au lieu de la boutique en ligne ou en plus de celle-ci. Cet article montre comment appliquer Google Consent Mode Advanced aux balises que ce conteneur déclenche.

Avec GTM, très peu de code est nécessaire. Deux lignes en haut du pixel transmettent le consentement du visiteur à la balise Pandectes CMP de votre conteneur, et c'est elle qui fait le reste.

Si vous n'utilisez pas GTM et chargez Google Analytics 4 ou Google Ads directement avec gtag.js, utilisez plutôt Google Consent Mode dans un pixel personnalisé Shopify (gtag.js). Utilisez l'une ou l'autre approche pour une propriété Google, jamais les deux.

Avant de commencer

• La balise CMP de Pandectes doit être dans votre conteneur. Ajoutez-la depuis la galerie de modèles GTM, déclenchez-la sur Consent Initialization - All Pages et définissez le consentement dont chaque balise a besoin. Les étapes sont décrites dans Intégration avec Google Tag Manager (GTM) - Modèle officiel Pandectes.
• Configurez d'abord le côté boutique en ligne. Le pixel ne couvre que ce qui s'exécute à l'intérieur du pixel. Les balises Google présentes sur la boutique elle-même se configurent comme décrit dans Comment configurer Google Tag Manager avec Pandectes.
• Vérifiez votre forfait. Google Consent Mode et la balise CMP de Pandectes fonctionnent à partir du forfait Plus.

Pourquoi le pixel a besoin de sa propre configuration du consentement

Un pixel personnalisé Shopify s'exécute dans une iframe isolée, avec son propre window et sa propre dataLayer. Il est séparé de la page de la boutique, et le consentement défini dans l'un est invisible pour l'autre.

Un conteneur chargé dans le pixel ne peut donc pas voir le consentement que la boutique a déjà. Les deux lignes ci-dessous le transmettent. Tout cet article s'applique uniquement à l'intérieur du pixel.

Les deux lignes

Placez-les tout au début du pixel personnalisé, avant le snippet GTM et avant tout le reste :

window.pandectesPixelInit = init;
window.pandectesSubscribe = api.customerPrivacy.subscribe;

C'est toute la configuration du consentement. La balise CMP de Pandectes dans votre conteneur les lit, applique l'état de consentement par défaut adapté au visiteur et le met à jour dès que le visiteur modifie son choix dans la bannière. Vous n'avez pas besoin d'écrire de commandes default ou update, ni de tenir une liste de régions : la balise reprend la politique depuis les réglages de votre bannière.

Deux règles de placement :

• Les lignes passent en premier. La balise les lit au démarrage du conteneur. Si le snippet GTM s'exécute avant elles, il n'y a rien à lire.
• Les lignes doivent être dans le même pixel que le conteneur. Chaque pixel personnalisé est un environnement isolé. Les définir dans un pixel n'a aucun effet sur un conteneur chargé dans un autre.

Mode Advanced et autorisation du pixel

Cette configuration vous donne Google Consent Mode Advanced : le conteneur se charge à chaque affichage de page, ses balises envoient des pings sans cookie tant que le consentement est refusé, et passent à une mesure complète dès que le consentement est accordé.

Pour cela, le pixel doit pouvoir s'exécuter avant le consentement. Dans Shopify Admin, allez dans Settings > Customer events, ouvrez votre pixel personnalisé et, sous Customer privacy, réglez Permission sur Not required. Si vous le réglez sur Required, Shopify retient le pixel jusqu'à ce que le visiteur accepte : le conteneur ne se charge jamais et aucun ping sans cookie n'est envoyé.

Si vous voulez Basic mode à la place (rien ne se charge tant que le consentement n'est pas donné), réglez Permission sur Required, sélectionnez les catégories dont vous avez besoin et laissez Shopify retenir le pixel.

Le code du pixel

1. Dans Shopify Admin, allez dans Settings > Customer events et cliquez sur Add custom pixel.
2. Donnez un nom au pixel et collez le code ci-dessous.
3. Remplacez GTM-XXXXXXX par l'identifiant de votre conteneur.
4. Ajoutez vos propres abonnements aux événements en bas.
5. Réglez l'autorisation comme décrit plus haut, cliquez sur Save, puis sur Connect.

/* Pandectes consent handover.
 * Keep these two lines at the very top, above the GTM snippet.
 * The Pandectes CMP tag in your container reads them. */
window.pandectesPixelInit = init;
window.pandectesSubscribe = api.customerPrivacy.subscribe;

/* START_MODIFY_FOR_YOUR_STORE */
const GTM_ID = "GTM-XXXXXXX"; // your container ID
/* END_MODIFY_FOR_YOUR_STORE */

/* Load the GTM container inside the pixel sandbox.
 * This dataLayer is not shared with the storefront or other pixels. */
window.dataLayer = window.dataLayer || [];

(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_ID);

/* YOUR EVENT SUBSCRIPTIONS GO HERE, IN THIS SAME PIXEL.
 *
 * The code above sets consent and loads the container. On its own it
 * pushes nothing to the dataLayer.
 *
 * The example below is sample code only, adapted from Shopify's GTM
 * tutorial. Adapt the events and fields to your own GTM triggers.
 * Shopify's original also pushes email, phone and address. Those are
 * left out on purpose: putting personal data in the dataLayer is a
 * privacy decision you need to make for your own store. */

// analytics.subscribe("checkout_completed", (event) => {
//   window.dataLayer.push({
//     event: "checkout_completed",
//     timestamp: event.timestamp,
//     id: event.id,
//     token: event.data?.checkout?.token,
//     url: event.context.document.location.href,
//     client_id: event.clientId,
//     orderId: event.data?.checkout?.order?.id,
//     currency: event.data?.checkout?.currencyCode,
//     subtotal: event.data?.checkout?.subtotalPrice?.amount,
//     shipping: event.data?.checkout?.shippingLine?.price?.amount,
//     value: event.data?.checkout?.totalPrice?.amount,
//     tax: event.data?.checkout?.totalTax?.amount,
//   });
// });

Chaque événement que vous envoyez nécessite un déclencheur GTM Custom Event portant exactement le même nom que la clé event (checkout_completed dans l'exemple).

Chaque pixel qui charge un conteneur a besoin des deux lignes

Vous ne pouvez pas mettre les deux lignes dans un pixel personnalisé et charger le conteneur dans un autre. Chaque pixel est un environnement isolé. Un conteneur chargé dans un pixel sans les deux lignes n'a aucun état de consentement, et ses balises se déclenchent avec les valeurs par défaut de Google, sans aucun avertissement.

Il en va de même pour vos abonnements aux événements : ils doivent se trouver dans le même pixel, sous le snippet GTM.

Vérifiez que cela fonctionne

Tag Assistant et GTM Preview ne voient pas le pixel

Ni Google Tag Assistant ni le mode Preview de GTM ne se connectent à un conteneur qui s'exécute dans l'environnement isolé du pixel. Ils n'inspectent que la page de la boutique et ne signalent donc rien (ou seulement les balises propres à la boutique), même lorsque le pixel fonctionne correctement. C'est normal et ce n'est pas une erreur.

Vérifier le dataLayer dans le cadre du pixel

1. Ouvrez les outils de développement de Chrome et allez dans l'onglet Console.
2. Dans la barre d'outils de la console, ouvrez la liste déroulante des cadres (elle affiche normalement top) et sélectionnez le cadre de l'environnement isolé du pixel (son nom commence par web-pixel). Shopify crée un cadre par pixel personnalisé. Choisissez donc le bon si vous en avez plusieurs.
3. Effectuez les vérifications ci-dessous.

Dans le cadre top, dataLayer est le dataLayer de la boutique, qui ne vous renseigne pas sur le pixel.

• Les deux lignes sont-elles définies ? window.pandectesPixelInit et window.pandectesSubscribe doivent toutes deux être définis.
• Le consentement arrive-t-il avant les balises ? Dans dataLayer, les entrées de consentement doivent apparaître avant le déclenchement de vos balises.
• Le pixel se charge-t-il avant le consentement ? Il le doit en mode Advanced. Si le conteneur n'apparaît qu'après l'acceptation du visiteur, l'autorisation du pixel est réglée sur Required et vous êtes en mode Basic.
• Vos événements arrivent-ils ? Passez une commande test et vérifiez que l'événement apparaît dans dataLayer avec le nom attendu par votre déclencheur GTM.

Erreurs courantes

Réglages non couverts par cet article

Les réglages tels que url_passthrough, ads_data_redaction, allow_enhanced_conversions et restricted_data_processing se définissent dans GTM (sur la balise CMP de Pandectes ou sur vos propres balises), et non dans le pixel.

Pandectes ne peut pas vous conseiller sur ces points. Les bonnes valeurs dépendent de vos comptes Google Ads et Analytics, de la modélisation sur laquelle vous vous appuyez et de la position juridique de votre entreprise. Discutez-en avec la personne qui gère votre configuration Google, ou avec votre conseiller juridique en cas de question de confidentialité.

Mis à jour le : 30/10/2026