Shopify

1Rô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

2Architecture 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

3Nettoyage 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. 1Admin Shopify > Paramètres > Applications et canaux de vente : désinstaller les apps de tracking listées ci-dessus
2. 2Admin Shopify > Paramètres > Événements clients (pixels personnalisés) : supprimer les anciens pixels personnalisés
3. 3theme.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 :

4É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

5Checkout 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

6Web pixels et pixels personnalisés

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

8Markets 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

9Configuration

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. 1Addingwell : DataLayer GA4, injection de GTM, contournement des bloqueurs de publicité, cookie restore
2. 2Cookiebot : CMP RGPD (bannière de consentement, configurée via GTM)

Fonctionnalités Addingwell à activer

Pixel personnalisé du tunnel de paiement

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

Serveur sGTM

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

Contrôles après installation

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

10Vérification

Vérifier le DataLayer

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

Vérifier les pixels personnalisés

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

Vérifier la Privacy API

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

Test avant consentement (navigation privée)

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

Test après consentement

1. 1Ouvrir le site en navigation privée
2. 2Cliquer sur « Tout accepter » dans la bannière
3. 3Preview GTM : les balises de mesure d'audience et marketing doivent se déclencher
4. 4DebugView 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)

11Dépannage