Test des pixels personnalisés

Après avoir créé un pixel personnalisé, vous devez le tester pour vous assurer que votre pixel envoie correctement les données lorsque des événements se produisent sur votre site.

Vous pouvez utiliser l’utilitaire Shopify Pixel Helper pour vérifier si les événements de votre pixel se chargent et si vous avez correctement souscrit un abonnement aux événements Shopify. L’utilitaire Shopify Pixel Helper vous permet de tester votre pixel personnalisé sur votre boutique en ligne pour voir les événements reçus en temps réel, ainsi que les données relatives à ces événements.

Si votre pixel personnalisé s’intègre à une plateforme tierce qui dispose de son propre utilitaire d’aide au pixel, vous pouvez utiliser l’utilitaire d’aide au pixel tiers en plus de l’utilitaire Shopify Pixel Helper pour tester si les événements de votre pixel sont traités et reçus par la plateforme tierce. Par exemple, si vous ajoutez un pixel TikTok personnalisé sur votre boutique, vous pouvez utiliser l’utilitaire Shopify Pixel Helper et l’utilitaire d’aide au pixel de TikTok pour tester votre pixel.

Vous pouvez utiliser l’utilitaire Shopify Pixel Helper dans la même session de navigateur qu’un utilitaire d’aide au pixel tiers pour tester les événements pour les deux plateformes en même temps.

Voici un script de pixel personnalisé qui déclenchera tous les événements standard dans le bac à sable et consignera les données d’événement dans la console. Les événements standard seront visibles dans l’utilitaire Shopify Pixel Helper. De plus, vous pouvez vous abonner à d’autres abonnements en bloc, all_events, all_custom_events et all_dom_events, pour découvrir tout ce que les pixels de suivi web peuvent offrir. Consultez l’API des pixels de suivi web pour en savoir plus.

analytics.subscribe("all_standard_events", event => {
   console.log("Event data ", event?.data);
});

Sur cette page

S’assurer qu’un pixel personnalisé est connecté

Avant de tester votre pixel personnalisé, assurez-vous qu’il est connecté.

Étapes :

Depuis votre interface administrateur Shopify, allez à Paramètres > Événements client.
À côté du pixel que vous souhaitez tester, vérifiez que le statut Connecté est affiché dans la colonne Statut.
Si le pixel n’est pas connecté, cliquez sur ..., puis sur Connecter.

Tester un pixel personnalisé à l’aide de l’utilitaire Shopify Pixel Helper

Après avoir vérifié que votre pixel personnalisé est connecté, vous pouvez utiliser l’utilitaire Shopify Pixel Helper pour tester si votre pixel personnalisé envoie des données et reçoit les données de votre boutique. Vous ne pouvez tester qu’un pixel personnalisé à la fois.

Étapes :

Depuis votre interface administrateur Shopify, allez à Paramètres > Événements client.
Cliquez sur le pixel personnalisé que vous souhaitez tester.
Cliquez sur Tester pour ouvrir le pixel personnalisé sur votre site web afin de le tester.
Facultatif : en fonction des paramètres de consentement de votre boutique et des paramètres de confidentialité du client du pixel personnalisé, la boîte de dialogue Aide au pixel peut afficher le message Pixel en attente de consentement. Effectuez l’une des actions suivantes pour poursuivre le test :
- Acceptez le suivi sur la bannière de cookies ou dans les préférences de votre boutique.
- Cliquez sur Donner son consentement pour continuer le test.
- Si votre pixel ne se charge toujours pas, vérifiez vos paramètres de confidentialité des clients.
Pour voir quels événements se chargent, consultez chaque page sur laquelle vous souhaitez tester le pixel, puis examinez la boîte de dialogue Aide au pixel pour vous assurer que l’abonnement à l’événement et la fonction de rappel ont réussi dans la section Événements reçus :
- Accédez à une nouvelle page pour tester l’événement page_viewed.
- Cliquez sur un produit pour tester l’événement product_viewed.
- Ajoutez un produit à votre panier pour tester l’événement product_added_to_cart.
- Allez à votre page de paiement pour tester l’événement checkout_started.
- Saisissez vos informations d’expédition au moment du paiement pour tester si l’événement checkout_shipping_info_submitted remplace l’événement checkout_started.
- Finalisez le paiement pour tester si l’événement checkout_completed remplace l’événement checkout_shipping_info_submitted. En savoir plus sur la passation d’une commande test.
Pour afficher les données d’événement reçues, cliquez sur pour agrandir la boîte de dialogue d’aide au pixel.

Affichage de la section Événements reçus

Lorsque vous testez les événements qui se chargent à l’étape 5, l’un des statuts suivants s’affiche dans la section Événements reçus de la boîte de dialogue Aide au pixel :

Un point vert indique que l’abonnement à l’événement et la fonction de rappel ont réussi.
Un point rouge indique que l’abonnement à l’événement a réussi, mais que la fonction de rappel a échoué. Découvrez comment résoudre les problèmes de votre pixel personnalisé.
L’aide au pixel affiche les erreurs non interceptées qui se produisent au niveau supérieur ou dans la fonction de rappel. Les erreurs de niveau supérieur s’affichent lors du chargement de l’aide au pixel. Les messages d’erreur de rappel s’affichent lorsque vous cliquez pour agrandir un événement avec un point rouge.
L’exemple de code suivant contient une erreur de rappel et une erreur de premier niveau. Selon l’emplacement de l’erreur de premier niveau, il est possible que le pixel ne fonctionne que partiellement.

analytics.subscribe("all_standard_events", event => {
  console.log("Event data ", event?.data);
  throw new Error("callback error");
});

throw new Error("top level error")

Pour en savoir plus sur la résolution des erreurs JavaScript, consultez la page Résolution des problèmes de JavaScript.

Résolution des problèmes de votre pixel personnalisé

Si votre pixel ne se charge pas ou ne se déclenche pas pendant les tests et que vous avez déjà vérifié que les données d’événement et le code de votre pixel ne contiennent pas d’erreurs, essayez les mesures de résolution de problèmes suivantes.

Vérification de vos paramètres de confidentialité des clients

Si votre pixel ne se charge pas ou ne se déclenche pas pendant les tests, il est possible que des paramètres de confidentialité des clients l’empêchent de se charger.

Depuis votre interface administrateur Shopify, allez à Paramètres > Confidentialité des clients pour vérifier les paramètres de confidentialité des clients dans votre interface administrateur Shopify qui pourraient s’appliquer à votre visite. Selon vos paramètres de confidentialité des clients, suivez les étapes suivantes :

Si vos paramètres de confidentialité des clients exigent le consentement dans votre région, assurez-vous d’avoir donné votre consentement par le biais de votre bannière concernant les cookies.
Si vous n’avez pas de paramètres de confidentialité des clients qui empêchent le chargement du pixel, effacez les cookies de votre navigateur pour réinitialiser votre bannière concernant les cookies et donner votre consentement.

Si vous utilisez un outil tiers pour gérer le consentement, contactez votre fournisseur tiers pour obtenir de l’assistance.

Résolution de problèmes supplémentaire

Si vous ne savez toujours pas si votre pixel personnalisé est correctement abonné à un événement client, essayez les mesures de résolution de problèmes suivantes :

Effacez les cookies de votre navigateur.
Si vous testez un événement standard, consultez la documentation pour les développeurs de Shopify sur les descriptions des événements standard afin de vous assurer que vous effectuez les étapes requises pour déclencher l’événement.

Test de l’assistant de pixel tiers

Un SDK (kit de développement logiciel) de pixel contient les outils permettant à votre pixel de recueillir des informations sur le comportement des clients. Vous pouvez utiliser l’assistant de pixel de votre fournisseur de pixels tiers pour tester les comportements suivants de votre pixel et vous assurer que le SDK de pixel fonctionne comme prévu :

Vérification du chargement d’un SDK tiers de pixel

Les étapes de vérification de votre onglet réseau dépendent du navigateur web que vous utilisez. Par exemple, pour savoir comment vérifier votre onglet réseau sur Google Chrome, reportez-vous à la documentation de Chrome pour les développeurs intitulée Inspecter l’activité du réseau.

Pour vérifier qu’un SDK tiers de pixel est chargé, vous devez d’abord récupérer le code de votre fournisseur tiers pour l’URL du SDK afin de pouvoir l’ajouter au code de votre pixel. Pour obtenir de l’assistance, contactez votre fournisseur de pixels tiers.

Étapes :

Depuis votre interface administrateur Shopify, allez à Paramètres > Événements client.
Cliquez sur le pixel personnalisé que vous souhaitez tester.
Dans la section Code, saisissez le SDK de pixel fourni par votre fournisseur tiers à la fin du code de votre pixel.
Cliquez sur Enregistrer.
Accédez à votre boutique en ligne, puis vérifiez votre onglet réseau pour vous assurer que l’URL du SDK du fournisseur tiers est en cours de téléchargement.
Facultatif : si le SDK tiers de pixel ne se charge pas, recherchez les erreurs d’exécution JavaScript dans le bac à sable. Par exemple, sur Chrome, vous pouvez sélectionner une iFrame particulière pour examiner ses journaux de console, puis affiner les journaux pour ne conserver que le pixel que vous testez. Pour en savoir plus sur la vérification des erreurs d’exécution JavaScript sur Chrome, reportez-vous à la documentation de Chrome intitulée Déboguer JavaScript.

Si le SDK tiers de pixel ne se charge pas pendant les tests, contactez votre fournisseur de pixels tiers pour obtenir de l’assistance.

Autre test du SDK tiers de pixel

Pour vérifier si un SDK tiers de pixel est initialisé ou recueille des événements, reportez-vous à la documentation de votre fournisseur de pixels tiers.

Pour vérifier si un SDK de pixel recueille des événements, il se peut que vous deviez vérifier l’onglet réseau de votre navigateur. Les étapes de vérification de votre onglet réseau dépendent du navigateur web que vous utilisez. Par exemple, pour savoir comment vérifier votre onglet réseau sur un navigateur Google Chrome pour Google Chrome, reportez-vous à la documentation de Chrome pour les développeurs intitulée Inspecter l’activité du réseau.