Comment Ajouter Des Événements Personnalisés Dans Shopify (2026)

À retenir

• L’API Customer Events de Shopify (Paramètres → Événements client → Ajouter un pixel personnalisé) est le bon endroit pour le suivi d’événements personnalisés.
• Les événements Shopify standards incluent page_viewed, product_viewed, product_added_to_cart et checkout_completed.
• Les pixels personnalisés s’exécutent dans un environnement sandbox avec un accès à tous les événements de checkout - ce que les scripts theme.liquid ne peuvent pas faire.
• Vous écrivez du JavaScript standard dans l’éditeur de pixel personnalisé - aucune syntaxe spécifique à Shopify n’est requise.

Pour ajouter des événements personnalisés dans Shopify, allez dans Paramètres → Événements client → Ajouter un pixel personnalisé et écrivez du JavaScript qui s’abonne aux événements standards de Shopify avec analytics.subscribe(). Cela vous indique ce que font les acheteurs sur votre boutique : quand ils ajoutent des produits à leur panier, commencent le checkout ou atteignent votre page de remerciement, sans avoir à fouiller dans le code du thème.

Comment ajouter des événements dans Shopify ?

Allez dans Paramètres → Événements clients → Ajouter un pixel personnalisé. Cela ouvre un éditeur JavaScript où vous écrivez du code qui écoute les événements standards de Shopify et déclenche votre propre code de tracking en réponse.

Les événements standards de Shopify

Shopify expose un ensemble d’événements standards tout au long du parcours d’achat. Votre pixel personnalisé peut écouter n’importe lequel d’entre eux :

Événements de page :

• page_viewed - se déclenche à chaque chargement de page
• collection_viewed - se déclenche lorsqu’une page de collection est vue
• cart_viewed - se déclenche lorsque la page du panier est vue

Événements de produit :

• product_viewed - se déclenche lorsqu’une page produit est vue
• product_added_to_cart - se déclenche lorsqu’un article est ajouté au panier
• product_removed_from_cart - se déclenche lorsqu’un article est retiré du panier
• search_submitted - se déclenche lorsqu’une recherche est soumise

Événements de checkout :

• checkout_started - se déclenche au début du checkout
• checkout_contact_info_submitted - se déclenche lorsque les coordonnées sont saisies
• checkout_address_info_submitted - se déclenche lorsque l’adresse est saisie
• checkout_shipping_info_submitted - se déclenche lorsque le mode de livraison est sélectionné
• payment_info_submitted - se déclenche lorsque les informations de paiement sont saisies
• checkout_completed - se déclenche sur la page de confirmation de commande

Ces événements sont accompagnés de données contextuelles : le produit qui a été vu, la valeur du panier au début du checkout, le total de la commande à la fin.

Pour le suivi checkout.liquid que ces événements remplacent, voir Migrer de checkout.liquid vers Checkout Extensions.

Écrire un pixel personnalisé

Voici un exemple basique qui envoie un événement GA4 lorsqu’un produit est ajouté au panier :

analytics.subscribe('product_added_to_cart', (event) => {
    const cartLine = event.data.cartLine

    // Pousser vers le dataLayer d'un conteneur GTM chargé dans ce pixel
    window.dataLayer = window.dataLayer || []
    window.dataLayer.push({
        event: 'add_to_cart',
        ecommerce: {
            currency: cartLine.cost.totalAmount.currencyCode,
            items: [
                {
                    item_id: cartLine.merchandise.sku,
                    item_name: cartLine.merchandise.product.title,
                    price: cartLine.merchandise.price.amount,
                    quantity: cartLine.quantity,
                },
            ],
        },
    })
})

Et pour un événement d’achat Meta Pixel à la fin du checkout. Chargez le code de base du Meta Pixel en haut du même pixel personnalisé pour que fbq existe :

analytics.subscribe('checkout_completed', (event) => {
    const order = event.data.checkout

    fbq('track', 'Purchase', {
        value: order.totalPrice.amount,
        currency: order.currencyCode,
        content_ids: order.lineItems.map((item) => item.variant.sku),
        content_type: 'product',
    })
})

Important : La fonction analytics.subscribe() est fournie par l’environnement sandbox de Shopify. Vous n’avez pas besoin de l’importer — elle est disponible automatiquement dans tous les pixels personnalisés.

Les événements Meta côté navigateur comme celui-ci sont filtrés par les bloqueurs de publicités et les paramètres de confidentialité d’iOS, alors associez-les au suivi côté serveur - voir Configuration de l’API Conversions Meta pour Shopify pour cette partie.

Configurer un pixel personnalisé étape par étape

Étape 1 - Allez dans Paramètres → Événements client

Étape 2 - Cliquez sur Ajouter un pixel personnalisé

Étape 3 - Donnez-lui un nom (par ex., “Événements personnalisés GA4” ou “Événement d’achat Meta”)

Étape 4 - Dans la section Code, écrivez votre JavaScript en utilisant analytics.subscribe()

Étape 5 - Définissez le niveau d’autorisation de confidentialité des clients :

• Non requis - se déclenche pour tous les visiteurs, quel que soit leur consentement
• Préférences - nécessite le consentement pour les préférences
• Analytiques - nécessite le consentement pour les analytiques
• Marketing - nécessite le consentement pour le marketing

Pour le suivi des achats, sélectionnez “Marketing” si vous envoyez des données aux plateformes publicitaires, ou “Analytiques” pour GA4.

Étape 6 - Cliquez sur Enregistrer puis sur Connecter

Pour les autres façons d’ajouter du code de suivi, voir Comment ajouter des scripts de suivi à Shopify.

Tester votre pixel personnalisé

Le débogueur intégré de Shopify. Dans l’éditeur d’Événements client, il y a un flux d’événements en direct qui montre les événements se déclenchant en temps réel. Ouvrez votre vitrine dans un autre onglet et naviguez un peu — vous devriez voir les événements page_viewed apparaître immédiatement.

Console du navigateur. Comme les pixels personnalisés s’exécutent dans une iframe sandboxée, vous ne pouvez pas voir directement leur sortie console.log. Utilisez plutôt le panneau de débogage de Shopify.

DebugView de GA4. Dans votre propriété GA4, allez dans Configurer → DebugView. Déclenchez des événements sur votre vitrine et regardez-les apparaître en temps réel.

Événements personnalisés vs intégrations d’applications standards

Shopify propose des intégrations prêtes à l’emploi pour Google Analytics, Google Ads, Meta, TikTok, Snapchat et d’autres dans la section Événements client. Celles-ci gèrent automatiquement le tracking standard des achats.

Utilisez des pixels personnalisés quand :

• Vous devez tracker des événements que l’intégration standard ne couvre pas (ex. clics sur des boutons spécifiques, profondeur de scroll, étapes d’un tunnel personnalisé)
• Vous devez envoyer des événements à une plateforme d’analytics moins courante
• Vous voulez envoyer des données personnalisées supplémentaires avec des événements standards (ex. lifetime value du client, catégorie de produit)

Pour la plupart des boutiques, les intégrations standards couvrent 80 % des besoins. Les pixels personnalisés comblent les manques.

FAQ