Comment configurer Google Consent Mode v2 sur Shopify

Tous les articles

Placez vos valeurs par défaut du Consent Mode, réglées sur refusé, dans theme.liquid au-dessus du conteneur, puis faites en sorte que votre bannière écrive le choix du visiteur à deux endroits au même clic : dans Google Consent Mode et dans la Customer Privacy API propre à Shopify. Shopify fait tourner deux systèmes de consentement, pas un seul. Ne branchez que la moitié Google, et vos Custom Pixels continuent de se déclencher, quel que soit le choix du visiteur.

Shopify a deux systèmes de consentement, et un seul vient de Google

La plupart des guides sur le sujet vous expliquent comment activer une application de consentement et coller un conteneur. Ce qui décide si la configuration tient est structurel et propre à Shopify : le consentement s'applique à deux endroits distincts qui ignorent tout l'un de l'autre tant que vous ne les reliez pas.

La Customer Privacy API de Shopify régit ce que contrôle la plateforme : les Custom Pixels et les pixels d'applications. Rien de ce que vous faites dans Google Tag Manager ne l'atteint. Elle n'écoute qu'une chose, Shopify.customerPrivacy.setTrackingConsent(), et tant que rien ne l'appelle, elle conserve l'état qu'elle avait déjà. Shopify documente la méthode dans sa référence de la Customer Privacy API.

Google Consent Mode v2 régit vos propres balises : le conteneur dans theme.liquid et tout ce qu'il déclenche. Il écoute gtag('consent', ...) et ignore jusqu'à l'existence de la Customer Privacy API.

Il y a donc deux façons d'échouer. Ne branchez que le Consent Mode, et vos balises GA4 et Ads se comportent bien tandis que les Custom Pixels et les pixels d'applications continuent sans aucun blocage. Ne branchez que le côté Shopify, et votre propre conteneur se déclenche sans aucun contrôle. Une application de consentement de l'App Store gère généralement les deux, c'est pourquoi cette voie est plus simple ; une CMP collée dans le thème ne le fait pas, sauf si vous écrivez le callback vous-même.

Bien faire les choses n'a rien d'un détail. Chaque visiteur dont le choix n'atteint qu'un seul des deux systèmes est soit suivi sans autorisation, soit retiré des rapports sans raison. La part de visiteurs qui refusent sur votre boutique dépend de vos régions, de votre audience et du design de votre bannière, et c'est le taux de consentement affiché dans votre CMP ou dans les paramètres de confidentialité client de Shopify qui vous l'indique.

Comment configurer Consent Mode v2 sur Shopify ?

1. Décidez quelle bannière détient la décision

   La bannière propre à Shopify, sous Settings puis Customer privacy, ou une CMP. La bannière de Shopify écrit pour vous dans la Customer Privacy API, mais ne parle pas Consent Mode : vous devez donc toujours la relier à votre conteneur. Une CMP installée comme application Shopify gère généralement les deux côtés ; une CMP collée dans le thème sous forme de script ne gère que le côté Google tant que vous n'ajoutez pas le callback. L'étape six vous dit quelles moitiés la vôtre couvre réellement.

2. Placez des valeurs par défaut refusées au-dessus du conteneur

   Une commande default du Consent Mode qui règle ad_storage, analytics_storage, ad_user_data et ad_personalization sur denied, placée dans theme.liquid avant l'extrait du conteneur, pas après. Tout le dispositif repose sur cet ordre : une valeur par défaut qui arrive après que le conteneur a déjà déclenché une balise n'est pas une valeur par défaut, c'est une correction arrivée trop tard. Si vous servez des régions hors de l'EEE, définissez les valeurs par défaut par région plutôt que de tout refuser partout.

3. Gardez la bannière dans le thème, jamais dans un Custom Pixel

   Les Custom Pixels s'exécutent dans une iframe en bac à sable dotée de sa propre origine opaque. Une bannière ne peut pas s'afficher dans la page depuis cet endroit, et les écritures de cookies faites de l'intérieur ne se comportent pas comme des écritures propriétaires (first party). La bannière a sa place dans theme.liquid, dans le contexte principal de la page, au-dessus du conteneur.

4. Écrivez le choix dans les deux systèmes au même clic

   À l'acceptation comme au refus, envoyez la mise à jour du Consent Mode et, dans le même gestionnaire, appelez Shopify.customerPrivacy.setTrackingConsent() avec les catégories correspondantes. Si vous sautez cette moitié, les Custom Pixels et les pixels d'applications n'apprennent jamais que le visiteur a dit non. C'est la lacune la plus fréquente que nous trouvons sur les boutiques Shopify qui se croient prêtes.

5. Réagissez au choix dans la même page vue

   Shopify déclenche un événement visitorConsentCollected lorsque le consentement est enregistré. Écoutez-le et appliquez l'état sans attendre la navigation suivante : un visiteur qui accepte sur la page de collection est alors mesuré sur cette page, et pas seulement à partir de la suivante.

6. Vérifiez sur la boutique en production, sur les deux parcours, et testez le checkout à part

   Pas en prévisualisation. Sur le parcours de refus, votre requête GA4 doit quand même partir, avec une valeur gcs indiquant le refus, au lieu de ne pas partir du tout ; les Custom Pixels doivent être absents, et aucun cookie publicitaire ne doit être déposé. Sur le parcours d'acceptation, tout cela doit apparaître. Refaites ensuite toute la vérification dans le checkout, qui s'exécute dans son propre bac à sable et peut se comporter autrement que la boutique que vous venez de tester.

L'argument sur l'ordre de chargement, sans les spécificités de Shopify, se trouve dans pourquoi les balises se déclenchent avant le chargement de la bannière de cookies, et Consent Mode basique ou avancé vous dira lequel vous utilisez réellement, plus vite que la lecture de votre propre conteneur.

Trois choses qui surprennent sur Shopify

En attente ne veut pas dire accepté. Avant qu'un visiteur ne choisisse, la Customer Privacy API renvoie un état en attente. Un pont qui traite comme un oui tout ce qui n'est pas un non explicite laisse fuiter des données à chaque première page vue. Traitez « en attente » comme un refus.

Les visiteurs venus avant la mise en ligne de la bannière risquent de ne jamais la voir. Sur une boutique où nous avons étendu une bannière Shopify à l'ensemble des régions européennes, les nouveaux visiteurs recevaient correctement l'état en attente et la bannière, tandis que les visiteurs récurrents qui avaient navigué avant l'existence de la bannière restaient considérés d'office comme ayant accepté et ne la voyaient jamais. C'est un comportement observé sur une boutique, pas une règle documentée : vérifiez-le donc sur la vôtre avant d'interpréter un taux d'acceptation, car ces premières semaines peuvent mêler deux populations.

Le checkout est un environnement à part. Le checkout de Shopify exécute les pixels dans cette iframe en bac à sable, sur une origine opaque où toute écriture de cookie lève une erreur. Une configuration parfaite sur la boutique peut quand même produire des sessions de checkout sans aucun contexte de page. C'est un défaut de mesure plutôt qu'un défaut de consentement, mais il apparaît dès que les chiffres refusent de concorder.

Que vérifier quand les chiffres semblent toujours faux

Diagnostiquez les deux systèmes séparément, car le symptôme désigne le côté défaillant. Des Custom Pixels qui se déclenchent encore après un refus signifient que rien n'a jamais écrit dans la Customer Privacy API : étape quatre. Un GA4 qui devient muet au lieu d'envoyer des pings refusés signifie que vos valeurs par défaut bloquent sans que le Consent Mode soit actif : étape deux. Des cookies avant tout clic signifient que quelque chose se charge au-dessus de vos valeurs par défaut, généralement un script codé en dur plutôt qu'une balise du conteneur, ce qui relève d'une question de catégorisation.

Velo gère les deux moitiés à partir d'une seule décision : la bannière se trouve dans le thème, écrit dans le Consent Mode et dans la Customer Privacy API au même clic, et transmet le même état au conteneur, si bien que les deux systèmes ne peuvent pas finir en désaccord sur ce qu'a dit le visiteur.