Shopify

Série Tracking · Infrastructure · environ 15 min de lecture.

Identifiants nécessaires pour ce guide :

Rôle et objectif

Shopify est la source de toutes les données e-commerce. La boutique émet les événements utilisateur que le reste du dispositif (Addingwell, GTM, sGTM) collecte puis redistribue.

• Source des événements e-commerce (page_view, add_to_cart, purchase, etc.)
• Tunnel de paiement propriétaire, avec la Custom Pixel API
• Shopify Privacy API pour piloter le consentement des pixels
• Markets pour le multidevise et le multilingue
• Événements clients (Customer Events) pour les web pixels et les pixels personnalisés

Architecture de la boutique

Les couches du dispositif sur Shopify

Boutique Shopify
├── Thème (vitrine)
│   └── Pages publiques (accueil, collection, produit, panier)
│
├── Tunnel de paiement (iframe isolé)
│   └── Extensible via les pixels personnalisés
│
├── Événements clients (Paramètres)
│   ├── Web pixels (sandbox JS)
│   └── Pixels personnalisés (code libre)
│
├── Apps installées
│   ├── Addingwell (DataLayer + GTM + sGTM)
│   ├── Cookiebot (CMP via GTM)
│   └── Klaviyo (natif Shopify)
│
└── Privacy API
    └── Gestion du consentement des pixels

Points clés

• Le thème ne joue aucun rôle dans le tracking (pas de code Liquid sur mesure)
• Le tunnel de paiement est isolé : seuls les pixels personnalisés (custom pixels) y ont accès
• Addingwell prend en charge toute la couche DataLayer et GTM, automatiquement
• La Privacy API ne contrôle que les web pixels et les pixels personnalisés de Shopify

Nettoyage avant installation

Avant d'installer le dispositif de tracking, faites le ménage dans l'existant. Deux systèmes de tracking actifs en parallèle produisent des événements en double, donc des données faussées.

Apps à supprimer

Où vérifier

1. Admin Shopify > Paramètres > Applications et canaux de vente : désinstaller les apps de tracking listées ci-dessus
2. Admin Shopify > Paramètres > Événements clients (pixels personnalisés) : supprimer les anciens pixels personnalisés
3. theme.liquid : rechercher et supprimer les appels fbq('init', ...), gtag('config', ...) et tout script de tracking ajouté à la main

Désactiver les options de confidentialité natives de Shopify

Rendez-vous dans Admin Shopify > Paramètres > Confidentialité des clients :

Événements du DataLayer

Addingwell génère le DataLayer automatiquement. Aucun code sur mesure n'est nécessaire dans le thème.

Événements par page

Checkout Extensibility

Le tunnel de paiement Shopify est un iframe isolé : le JavaScript du thème n'y a pas accès. Shopify propose deux mécanismes pour y faire du tracking :

Pixel personnalisé Addingwell

Addingwell utilise un pixel personnalisé pour capter begin_checkout et purchase dans le tunnel de paiement, puis les pousse dans le DataLayer GTM.

Sandbox du tunnel de paiement : une limite pour les tests

Web pixels et pixels personnalisés

Shopify Privacy API

Rôle

La Shopify Customer Privacy API décide quels web pixels et pixels personnalisés ont le droit de se déclencher. La passerelle la synchronise avec Cookiebot.

Flux de consentement

Cookiebot (CMP dans GTM)
        ↓
Passerelle cookie-consent_boostecom.liquid
        ↓
Shopify.customerPrivacy.setTrackingConsent({
  marketing: true/false
})
        ↓
Web pixels déclenchés / bloqués

Ce que la Privacy API contrôle

Markets et multidevise

Shopify Markets gère le multidevise et le multilingue. Le tracking doit donc prendre en charge les conversions dans la devise locale.

Conséquences pour le tracking

• Addingwell inclut la devise (currency) dans chaque événement e-commerce
• Les montants (value, price) sont exprimés dans la devise locale du visiteur
• GA4 gère nativement le multidevise
• Meta CAPI reçoit la bonne devise via le sGTM
• Aucune configuration supplémentaire nécessaire

Configuration

Prérequis

• Boutique Shopify active (forfait Basic ou supérieur)
• Accès administrateur avec les autorisations Applications et Événements clients
• Domaine personnalisé configuré
• Nettoyage avant installation effectué (voir la section 3)

Apps à installer

1. Addingwell : DataLayer GA4, injection de GTM, contournement des bloqueurs de publicité, cookie restore
2. Cookiebot : CMP RGPD (bannière de consentement, configurée via GTM)

Fonctionnalités Addingwell à activer

Pixel personnalisé du tunnel de paiement

1. Aller dans Admin Shopify > Paramètres > Événements clients
2. Ajouter un pixel personnalisé > coller le code fourni par Addingwell
3. Autorisation « Not required » (et non « Required »), car le consentement est géré par GTM, pas par la Privacy API

Serveur sGTM

1. Créer le serveur dans Addingwell
2. Configurer le domaine personnalisé (p. ex. tags.ma-boutique.com)
3. Région recommandée : Europe multi-region
4. DNS : le CNAME fourni dans Addingwell > Server > Custom Domain

Contrôles après installation

1. Addingwell connecté et actif dans son tableau de bord
2. Pixel personnalisé Addingwell présent dans Paramètres → Événements clients
3. Autorisation du pixel personnalisé = « Not required »
4. Bannière native Shopify désactivée (Paramètres → Confidentialité des clients)
5. Passerelle de consentement présente dans theme.liquid (cookie-consent_boostecom.liquid)
6. Pixel personnalisé DataLayer Monitor installé dans Événements clients
7. Le domaine personnalisé du sGTM répond avec un statut 200

Vérification

Vérifier le DataLayer

1. Ouvrir la console du navigateur sur la boutique
2. Taper dataLayer et vérifier que les événements sont présents
3. Naviguer : accueil → collection → produit → panier
4. Vérifier page_view, view_item_list, view_item, add_to_cart, view_cart
5. Passer une commande test → vérifier begin_checkout et purchase

Vérifier les pixels personnalisés

1. Admin Shopify → Paramètres → Événements clients
2. Vérifier que le pixel personnalisé Addingwell est présent et actif
3. Vérifier que l'autorisation est sur « Not required »
4. Vérifier que le DataLayer Monitor est présent et actif
5. Aucun autre pixel personnalisé en conflit

Vérifier la Privacy API

1. Console du navigateur → Shopify.customerPrivacy.getTrackingConsent()
2. Avant tout choix : marketing = "no_interaction"
3. Après acceptation dans Cookiebot : marketing = "yes"
4. Après refus dans Cookiebot : marketing = "no"

Test avant consentement (navigation privée)

1. Ouvrir le site en navigation privée
2. Cliquer sur « Tout refuser » dans la bannière Cookiebot
3. Preview GTM : vérifier que seules les balises Necessary se déclenchent
4. Onglet Network : aucune requête vers GA4, Meta ou Google Ads

Test après consentement

1. Ouvrir le site en navigation privée
2. Cliquer sur « Tout accepter » dans la bannière
3. Preview GTM : les balises de mesure d'audience et marketing doivent se déclencher
4. DebugView de GA4 : les événements apparaissent en temps réel

Test d'achat : commande test

Passez une commande test, puis exécutez ceci dans la console :

dataLayer.filter(e => e.event === 'purchase')

• transaction_id unique (aucun doublon)
• value correcte (prix total, taxes et livraison comprises)
• currency valide (ISO 4217, p. ex. EUR, USD)
• Tableau items complet, avec tous les produits

Nettoyage final

Une fois le dispositif vérifié, confirmez qu'il ne reste rien qui puisse interférer :

• App « Facebook & Instagram » supprimée (pixel Meta natif)
• App « Google & YouTube » supprimée (tracking Google natif)
• Anciennes apps de tracking supprimées (Trackify, Pixel Perfect, Elevar, etc.)
• Plus aucun script de tracking ajouté à la main dans le thème (Liquid)
• Bannière de cookies et page d'opposition Shopify désactivées (aucune région cochée)

Dépannage

Checklist Shopify

• Nettoyage : anciens pixels et apps de tracking supprimés
• Nettoyage : scripts de tracking codés en dur retirés du thème
• Nettoyage : bannière de cookies et page d'opposition Shopify désactivées
• Addingwell installé et actif
• DataLayer visible dans la console du navigateur
• Pixel personnalisé du tunnel de paiement configuré (autorisation « Not required »)
• Pixel personnalisé DataLayer Monitor installé
• Passerelle de consentement installée (cookie-consent_boostecom.liquid)
• Privacy API synchronisée (consentement marketing via Cookiebot)
• Test avant consentement validé (balises bloquées après un refus)
• Test après consentement validé (balises actives après acceptation)
• Test d'achat validé (transaction_id, value, currency, items)

Et ensuite