Les Shopify Web Pixels sont la solution de Shopify pour suivre les données d’achat comme les taux de conversion. Il existe deux façons principales d’interagir avec eux :

Les Web Pixels d’application
Les Web Pixels personnalisés

Web Pixels d’application

Certains pixels d’application (par ex. Omega Facebook Pixel) s’intègrent directement aux Shopify Web Pixels. Ces applications ne nécessitent aucune configuration supplémentaire pour fonctionner avec Aftersell.

Web Pixels personnalisés

Les pixels personnalisés permettent des solutions sur mesure si aucun pixel d’application répondant à vos besoins ne peut être trouvé sur le marketplace Shopify. Ce qui suit détaille comment convertir des scripts de suivi existants de la page de statut de commande pour utiliser des pixels personnalisés. Veuillez prendre connaissance des risques potentiels des pixels personnalisés avant de continuer. Si vous utilisez spécifiquement Google Tag Manager, Shopify fournit une documentation utile pour réaliser cette migration. Il y a 3 étapes principales pour créer un pixel personnalisé de suivi des conversions.

Préparer le SDK JavaScript tiers
Mettre en place le suivi des conversions à l’aide des web pixels
Connecter votre pixel personnalisé

1. Préparer le SDK JavaScript tiers

Vous devrez retirer tout HTML présent dans le code de pixel fourni. Tout JavaScript chargé via une balise HTML <script> doit plutôt être chargé via une approche exclusivement JavaScript. Ce processus est couvert plus en détail ici. Un exemple utilisant Google Tag Manager Code de pixel d’origine :

<!-- Global site tag (gtag.js) - Google Analytics -->  
<script async src="https://www.googletagmanager.com/gtag/js?id=YOUR_PIXEL_ID"></script>  
<script>  
  window.dataLayer = window.dataLayer || [];  
  function gtag(){dataLayer.push(arguments);}  
  gtag('js', new Date());  
  gtag('config', ''YOUR_PIXEL_ID'');  
</script>

Après suppression du HTML et retravail des balises <script> :

const script = document.createElement('script');  
script.setAttribute('src', 'https://www.googletagmanager.com/gtag/js?id=YOUR_PIXEL_ID');  
script.setAttribute('async', '');  
document.head.appendChild(script);  
  
window.dataLayer = window.dataLayer || [];  
function gtag(){dataLayer.push(arguments);}  
gtag('js', new Date());  
gtag('config', 'YOUR_PIXEL_ID');

Notez que le SDK du pixel de Google ne transmet pas automatiquement les données depuis un pixel personnalisé Shopify. Pour transmettre les données, vous devez vous abonner aux événements.

2. Mettre en place le suivi des conversions à l’aide des web pixels

Pour suivre les conversions à l’aide de pixels personnalisés, abonnez-vous à l’événement checkout_completed fourni par Shopify. Cet événement se déclenche soit sur la page post-achat, si elle est affichée à votre client, soit sur la page de remerciement sinon. Cet événement ne se déclenche qu’une seule fois dans les deux cas, donc aucune logique supplémentaire n’est nécessaire pour éviter de compter deux fois un achat.

analytics.subscribe("checkout_completed", (event) => {  
  // process event using 3rd party pixel tracking code  
});

Utilisez cette référence pour voir quels points de données vous pouvez récupérer depuis l’event. Événement checkout_completed de Shopify Un exemple de pixel Meta personnalisé Code de suivi se déclenchant lorsqu’un checkout est finalisé :

!function(f,b,e,v,n,t,s)  
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?  
n.callMethod.apply(n,arguments):n.queue.push(arguments)};  
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';  
n.queue=[];t=b.createElement(e);t.async=!0;  
t.src=v;s=b.getElementsByTagName(e)[0];  
s.parentNode.insertBefore(t,s)}(window, document,'script',  
'https://connect.facebook.net/en_US/fbevents.js');  
  
// replace YOUR_PIXEL_ID with the pixel ID provided by third-party  
fbq('init', YOUR_PIXEL_ID);  
  
analytics.subscribe("checkout_completed", (event) => {  
  fbq('track', 'Purchase', {  
    currency: event.data?.checkout?.currencyCode,  
    value: event.data?.checkout?.totalPrice?.amount,  
  });  
});

3. Connecter votre pixel personnalisé

Avant d’ajouter un pixel personnalisé, retirez ou modifiez tout pixel existant pour vous assurer que les événements client ne sont pas comptés deux fois. Le code de pixel existant doit être retiré manuellement de tous les endroits où il existe, comme theme.liquid, checkout.liquid (marchands Plus uniquement) et les Additional scripts dans vos paramètres de checkout. Une fois cela fait, suivez ces étapes pour connecter un pixel personnalisé à votre boutique.

Accédez à Settings > Customer Events > Custom Pixels > Add Custom Pixel
1. Saisissez un nom pour votre pixel personnalisé.
Collez le code de votre pixel personnalisé dans la section « Code ».
Assurez-vous que les paramètres de confidentialité des clients sont correctement configurés.
Cliquez sur « Save » sur votre pixel personnalisé.
Cliquez sur « Connect » pour mettre votre pixel personnalisé en production !

Getting Started

Home Page

Best Practices

Post-Purchase Upsells

Checkout Upsells (Shopify Plus)

Thank You Page

Product Page Upsells

Rokt Thanks

Strategies

Analytics & Tracking

Integrations

Billing & Account

Troubleshooting

Configurer les web pixels Shopify

Web Pixels d’application

Web Pixels personnalisés

1. Préparer le SDK JavaScript tiers

2. Mettre en place le suivi des conversions à l’aide des web pixels

3. Connecter votre pixel personnalisé

​Web Pixels d’application

​Web Pixels personnalisés

​1. Préparer le SDK JavaScript tiers

​2. Mettre en place le suivi des conversions à l’aide des web pixels

​3. Connecter votre pixel personnalisé

Web Pixels d’application

Web Pixels personnalisés

1. Préparer le SDK JavaScript tiers

2. Mettre en place le suivi des conversions à l’aide des web pixels

3. Connecter votre pixel personnalisé