> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.pandectes.io/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# 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)](https://help.pandectes.io/fr/article/google-consent-mode-in-a-shopify-custom-pixel-gtagjs-3ilbaa/). 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](/en/article/integration-with-google-tag-manager-gtm-official-pandectes-template-6dbjz/).
* **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](/en/article/how-to-set-up-google-tag-manager-with-pandectes-1w5g3hv/).
* **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 :

```javascript
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**.

```javascript
/* 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).

||| **Pandectes fournit uniquement la couche de consentement.** Les deux lignes définissent l'état du consentement et rien d'autre. Les événements que vous envoyez, les données qu'ils contiennent, la configuration de vos balises et déclencheurs GTM, ainsi que l'exactitude de vos rapports Google Analytics ou Google Ads relèvent de votre responsabilité. Pandectes ne prend pas en charge et ne vérifie pas le suivi construit au-dessus de ce code.

### 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

| Erreur | Ce qui se passe |
| --- | --- |
| Les deux lignes sont placées après le snippet GTM | La balise n'a rien à lire au démarrage du conteneur. Les balises se déclenchent avec les valeurs par défaut de Google. |
| Les deux lignes sont dans un pixel et le conteneur dans un autre | Environnements isolés. Le conteneur n'a aucun état de consentement. |
| La balise CMP de Pandectes n'est pas dans le conteneur | Les lignes sont définies, mais rien ne les lit. Aucun mode de consentement dans GTM. |
| Pixel **Permission** réglé sur **Required** | Shopify retient le pixel jusqu'au consentement, donc le conteneur ne se charge jamais avant lui. C'est le mode Basic, pas Advanced. |
| Tester avec Tag Assistant ou GTM Preview | Ils ne voient pas l'environnement isolé du pixel et ne signalent rien, même lorsque tout fonctionne. |
| Lire `dataLayer` dans le cadre `top` | C'est le dataLayer de la boutique, pas celui du pixel. |
| Aucun déclencheur GTM **Custom Event** pour un événement envoyé | L'événement atteint le dataLayer, mais aucune balise ne se déclenche. |
| Coller l'exemple d'événement de Shopify sans le modifier | Noms d'événements et champs qui ne correspondent pas à vos déclencheurs, et données personnelles dans le dataLayer. |
| La même propriété chargée depuis ce pixel et depuis un pixel gtag.js | Hits en double et deux états de consentement concurrents. |

### 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é.