Shopify : Comment rendre son tracking RGPD-compliant ?
Première étape : Installer correctement sa CMP.
Ce que j’aborde dans cette édition :
La Customer Privacy API de Shopify.
Les 3 méthodes pour installer correctement sa CMP.
Comment conformer votre tracking.
Temps de lecture : 7 minutes.
Je suis Baptiste Moisan, expert Tracking et Analytics.
N’hésitez pas à répondre à ce mail pour me faire vos retours : ils m’aident à écrire sur les sujets importants pour vous.
Bonne lecture !
La première édition de cette newsletter1, sortie en début d’année, avait déjà pour sujet Shopify.
Et il y a beaucoup à dire sur la plateforme ecommerce tant l’installation d’un setup de tracking est devenue complexe.
Je reviens aujourd’hui sur le sujet pour creuser un point que je n’ai pas encore abordé : la conformité au RGPD.
Là aussi, Shopify a ses spécificités : la Customer Privacy API, l’installation d’une CMP, le tracking depuis les apps ou dans Google Tag Manager. Ce sont autant de particularités qui viennent influencer la mise en conformité de son tracking.
Avant d’attaquer le sujet à bras le corps, je me permets un petit rappel sur ce que recouvre la conformité au RGPD quand on installe des tags publicitaires et analytics.
Le RGPD et le consentement
Le RGPD est un règlement européen qui encadre la façon dont peuvent être récoltées et exploitées les données personnelles des résidents de l’Union Européenne.
Couplé à la directive ePrivacy, le droit européen impose d’obtenir l’autorisation de l’utilisateur pour déposer des cookies non-essentiels sur son appareil et communiquer de la donnée à des tiers via des tags.
Parmi les cookies et tags soumis au consentement, on retrouve les outils Google (GA4 et Google Ads, notamment) et toutes les plateformes publicitaires.
Le RGPD indique que le consentement doit être éclairé : le bandeau des cookies est là pour informer l’utilisateur sur les cookies qu’un site souhaite déposer.
Il doit aussi être explicite : il faut que l’utilisateur clique sur un bouton “Accepter” pour considérer avoir son consentement.
En bref, pour être conforme au RGPD, il faut entre autre respecter ces deux points essentiels :
Installer un bandeau pour les cookies (qu’on appelle aussi Consent Management Platform ou CMP) pour informer et récolter le consentement.
Déposer les cookies non-essentiels seulement une fois le consentement reçu.
Et comment on fait ça avec Shopify ? C’est ce qu’on voit dans la partie suivante.
La particularité de Shopify : la Customer Privacy API
On commence à avoir l’habitude : Shopify ne fait pas comme tout le monde concernant le tracking.
Après les custom pixels abordés dans une précédente édition de cette newsletter, une nouvelle particularité s’y ajoute : la Customer Privacy API2.
Cette API est une interface qui permet de définir et enregistrer les préférences de confidentialité de l’utilisateur.
Faites le test sur une boutique Shopify en saisissant l’extrait de code ci-dessous dans la console de votre navigateur :
window.Shopify.customerPrivacy.currentVisitorConsent()Si l’API est bien installée sur la boutique concernée, vous devriez voir apparaître un résultat similaire à celui ci-dessous :
Grâce à la méthode currentVisitorConsent(), on peut accéder aux préférences de l’utilisateur, lesquelles sont classées en quatre finalités chez Shopify :
analytics,
marketing,
preferences,
sale_of_data.
Les finalités qui nous intéressent le plus en tracking sont les deux premières : analytics et marketing.
Shopify va s’appuyer sur ces valeurs pour bloquer ou autoriser le déclenchement de certaines apps et pixels personnalisés.
Mais pour que ces finalités soient définies sur “yes” ou “no” il faut installer une CMP qui va récolter le consentement et interagir avec la Customer Privacy API.
Bien installer sa CMP sur Shopify
Une CMP correctement installée sur Shopify est une CMP qui interagit avec la Customer Privacy API.
C’est pour ça qu’il vaut mieux éviter d’installer votre bandeau dans Google Tag Manager.
Dans le cas de Shopify, préférez une de ces trois solutions pour déployer correctement votre CMP :
en installant une app,
en installant votre CMP dans le thème et en veillant à bien suivre la doc spécifique à Shopify,
en utilisant la CMP native de Shopify, configurée dans Paramètres > Confidentialité des clients3.
Avec Axeptio par exemple, vous pouvez soit passer par l’app Shopify4, soit installer le code directement dans votre thème5.
Notez que ce code n’est pas “juste” celui que vous retrouvez dans le back-office de la CMP : il faut bien prendre en compte l’extrait de code spécifique à Shopify qui permet d’interagir avec la Customer Privacy API.
Une fois votre CMP bien installée, vous pourrez récolter le consentement de l’utilisateur qui mettra à jour les finalités de la Customer Privacy API.
Pour s’assurer que tout fonctionne comme attendu, vous pouvez collez dans votre console l’extrait de code donné un peu plus haut dans cet article.
Comment conformer son tracking ?
Maintenant que vous avez une belle CMP bien installée sur votre boutique, comment s’assurer de ne pas déposer de cookies et de déclencher de tags avant de recevoir le consentement ?
Et bien comme dirait tout bon consultant : “Ça dépend”.
Selon la méthode d’installation de vos tags, il sera plus ou moins facile de se conformer.
En passant par une app comme Google & YouTube ou Facebook & Instagram, vous n’avez rien à faire. Ces apps se déclenchent uniquement si les finalités requises sont acceptées.
Vous pouvez d’ailleurs visualiser les finalités contrôlées par les pixels des apps dans Paramètres > Événements clients > Afficher la confidentialité client :
Notez qu’il n’est pas possible d’éditer ces paramètres.
Et si tout ou partie de votre setup de tracking est installé dans Google Tag Manager, vous allez avoir un peu plus de travail.
Dans Google Tag Manager
Cette partie est plus technique et s’adresse à celles et ceux qui auront l’occasion de mettre les mains dans l’outil.
Habituellement, on installe deux conteneurs Google Tag Manager pour Shopify :
un premier dans le thème, notamment pour permettre au serveur de tracking de déposer correctement ses cookies ;
un second dans un custom pixel—passage obligé pour mesurer ce qui se passe dans le checkout (cf. la première édition de ma newsletter pour en savoir plus sur ce point).
Pour le conteneur installé dans le thème, la mise en conformité de vos tags peut se faire de manière standard, en vous appuyant sur les événements envoyés par votre CMP par exemple.
Mais ces événements ne sont pas accessibles dans le custom pixel (qui est un iFrame).
Même s’il reste possible de faire communiquer la page principale avec l’iFrame (via l'API JavaSript postMessage()6), mieux vaut s’appuyer sur l’API Shopify Customer Privacy API qui, elle, est bien accessible dans le pixel.
Vous pouvez par exemple écrire ce code dans votre custom pixel :
// Init customerPrivacyStatus
let customerPrivacyStatus = init.customerPrivacy;
api.customerPrivacy.subscribe("visitorConsentCollected", (event) => {
customerPrivacyStatus = event.customerPrivacy;
window.dataLayer.push({
event: "consent_update",
consent_status: {
ad_storage: customerPrivacyStatus.marketingAllowed ? "granted" : "denied",
ad_user_data: customerPrivacyStatus.marketingAllowed ? "granted" : "denied",
ad_personalization: customerPrivacyStatus.marketingAllowed ? "granted" : "denied",
analytics_storage: customerPrivacyStatus.analyticsProcessingAllowed ? "granted" : "denied"
}
});
});Il reproduit ce que peut faire une CMP en poussant un événement consent_update quand l’utilisateur interagit avec le bandeau des cookies.
Personnellement, je pousse systématiquement les finalités de traitement avec tous les événements intégrés au custom pixel :
analytics.subscribe("page_viewed", (event) => {
window.dataLayer.push({
event: "page_view",
consent_status: {
ad_storage: customerPrivacyStatus.marketingAllowed ? "granted" : "denied",
ad_user_data: customerPrivacyStatus.marketingAllowed ? "granted" : "denied",
ad_personalization: customerPrivacyStatus.marketingAllowed ? "granted" : "denied",
analytics_storage: customerPrivacyStatus.analyticsProcessingAllowed ? "granted" : "denied"
}
});
});Ça permet de créer des conditions simples dans Google Tag Manager en s’appuyant sur des variables dans le dataLayer :
On peut utiliser sur cette même mécanique pour installer le Consent Mode dans le custom pixel.
En bref
Votre première étape pour mettre vos tags en conformité sur votre boutique Shopify, c’est d’installer correctement votre CMP en lui permettant d’interagir avec l’API Customer Privacy.
Si vous n’utilisez que des apps pour votre tracking, votre travail s’arrête là : ces dernières ajustent automatiquement leur déclenchement en fonction du consentement reçu.
Et si votre tracking est installé dans Google Tag Manager, il faudra ajuster votre plan de marquage pour s’appuyer soit sur les événements envoyés par votre CMP (pour le conteneur installé dans le thème), soit sur les valeurs enregistrées par l’API Customer Privacy (dans le custom pixel).
On partage ?
Si cette newsletter peut intéresser un partenaire, un collègue ou un ami passionné de tracking (oui, ces personnes existent), n’hésitez pas à lui transférer ce mail !
Si vous avez des questions, des remarques, des retours, vous pouvez directement me répondre ou commenter sur Substack : je me ferais un plaisir de vous lire.
Bon week-end ✌️
Baptiste
Shopify + Tracking = 💔. Baptiste Moisan. https://bmoisan.substack.com/p/shopify-tracking
Customer Privacy API. Shopify Dev Doc. https://shopify.dev/docs/api/customer-privacy
Configuration des paramètres de confidentialité des clients. Shopify centre d’aide. https://help.shopify.com/fr/manual/privacy-and-security/privacy/customer-privacy-settings/privacy-settings#cookies
Axeptio RGPD ‑ Bandeau Cookie. Shopify App Store. https://apps.shopify.com/axeptio-cookies?locale=fr
Plugin Axeptio Shopify. Support Axeptio. https://support.axeptio.eu/fr/articles/274019-plugin-axeptio-shopify
Window: postMessage() method. mdn web docs. https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage