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

Points clés à retenir

• L’API Customer Events de Shopify (Paramètres → Événements clients → Ajouter un pixel personnalisé) est le bon endroit pour le tracking d’événements personnalisés.
• Les événements standards de Shopify 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 pixels personnalisés - aucune syntaxe spécifique à Shopify n’est requise.

Le tracking d’événements personnalisés vous indique ce que les acheteurs font réellement sur votre boutique — pas seulement les pages qu’ils visitent, mais quand ils ajoutent des produits à leur panier, quand ils commencent le checkout ou atteignent votre page de remerciement. L’API Customer Events de Shopify rend tout cela trackable 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 une série 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

Événements produits :

• 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
• 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_address_info_submitted — se déclenche lors de la saisie de l’adresse
• checkout_shipping_info_submitted — se déclenche lors de la sélection du mode d’expédition
• payment_info_submitted — se déclenche lors de la saisie des infos de paiement
• checkout_completed — se déclenche sur la page de confirmation de commande
• order_created — se déclenche lorsqu’une commande est passée avec succès

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.

Sur le même sujet : Modifier checkout.liquid dans Shopify Plus.

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

  // Envoyer à GA4 via dataLayer (si GTM est installé)
  window.dataLayer = window.dataLayer || [];
  window.dataLayer.push({
    event: 'add_to_cart',
    ecommerce: {
      currency: cartLine.merchandise.product.vendor,
      items: [{
        item_id: cartLine.merchandise.sku,
        item_name: cartLine.merchandise.product.title,
        price: cartLine.cost.totalAmount.amount,
        quantity: cartLine.quantity
      }]
    }
  });
});

Et pour un événement d’achat Meta Pixel à la fin du checkout :

Sur le même sujet : Ajouter Google Tag Manager à Shopify.

Sur le même sujet : Ajouter du JavaScript personnalisé dans Shopify.

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.

Configurer un pixel personnalisé étape par étape

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

Étape 2 - Cliquez sur Ajouter un pixel personnalisé

Étape 3 - Donnez-lui un nom (ex. “GA4 Custom Events” ou “Meta Purchase Event”)

É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 lié aux analytiques
• Analytiques — nécessite le consentement lié aux analytiques
• Marketing — nécessite le consentement marketing

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

Pour mesurer les résultats, voir ajouter des scripts de tracking à Shopify.

Étape 6 - Cliquez sur Enregistrer puis Connecter

Tester votre pixel personnalisé

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

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

GA4 DebugView. Dans votre propriété GA4, allez dans Configurer → DebugView. Déclenchez des événements sur votre boutique 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éconfigurées pour Google Analytics, Google Ads, Meta, TikTok, Snapchat et d’autres outils dans la section Événements clients. Celles-ci gèrent automatiquement le suivi des achats standard.

Utilisez des pixels personnalisés lorsque :

• Vous devez tracker des événements que l’intégration standard ne couvre pas (par ex., clics sur des boutons spécifiques, profondeur de scroll, étapes personnalisées du tunnel de conversion)
• Vous devez envoyer des événements à une plateforme d’analyse moins courante
• Vous souhaitez envoyer des données personnalisées supplémentaires avec des événements standards (par ex., valeur à vie 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

Où s’exécutent les pixels personnalisés sur la vitrine ?

Dans une iframe sandboxée injectée par Shopify - c’est pourquoi vous ne pouvez pas accéder directement à window ou au DOM de la page. L’avantage est la fiabilité : les pixels continuent de se déclencher sur les pages de paiement où les marchands perdent traditionnellement en visibilité, et ils ne peuvent pas être cassés par des mises à jour de thème.

Puis-je utiliser jQuery ou d’autres bibliothèques dans un pixel personnalisé ?

Non. Les pixels personnalisés s’exécutent dans un environnement sandboxé avec des variables globales limitées - uniquement en vanilla JavaScript. Si vous avez besoin d’une bibliothèque, incluez-la via un CDN dans le code du pixel, ou développez l’intégration sans. La plupart du tracking peut se faire avec fetch et les API standards du navigateur.

Les pixels personnalisés fonctionnent-ils pour les événements de checkout Shopify sur les forfaits Basic ?

Oui. L’API Customer Events est disponible sur tous les forfaits Shopify, y compris Basic. C’est un point majeur car avant 2023, le tracking côté serveur du checkout était quasi-exclusivement réservé à Shopify Plus. Les pixels personnalisés ouvrent le tracking des événements de paiement à tous les forfaits.

Comment envoyer des événements de checkout à Google Tag Manager depuis un pixel personnalisé ?

Faites un push dans le dataLayer depuis l’intérieur du pixel - mais comme le pixel tourne dans une sandbox, vous devez envoyer vos événements au dataLayer de la fenêtre parente avec parent.window.dataLayer.push(). La plupart des boutiques sautent cette étape et utilisent le connecteur GTM natif de Shopify, puis ajoutent un pixel personnalisé uniquement pour les événements que le connecteur ne couvre pas.

Pourquoi mon pixel personnalisé ne se déclenche-t-il pas sur la page de remerciement ?

Deux causes fréquentes : (1) l’autorisation de confidentialité requise est supérieure au consentement donné par le visiteur (par ex., « Marketing » requis mais le visiteur a refusé le marketing), ou (2) le pixel écoute le mauvais événement - checkout_completed se déclenche sur la page de remerciement, et non order_created (qui se déclenche côté serveur et n’est pas toujours renvoyé au client).