Créer un code de pixel personnalisé

Cette page a été imprimée le Mar 31, 2023. Pour la dernière version, allez à https://help.shopify.com/fr/manual/promoting-marketing/pixels/custom-pixels/code.

Cette page comprend des instructions pour créer un code de pixel personnalisé pour un pixel tiers afin de pouvoir suivre des événements clients spécifiques. Une fois que vous avez créé le code de votre pixel personnalisé, vous pouvez l’ajouter à votre boutique Shopify.

Préparation en vue de de la création d’un pixel personnalisé

Avant de créer un pixel personnalisé, lisez les informations suivantes pour bien comprendre comment configurer votre pixel :

Lorsque vous ajoutez un pixel personnalisé, vous précisez les informations suivantes :

  • le pixel JavaScript tiers
  • les événements comportementaux que vous souhaitez suivre

Créer le code d’un pixel personnalisé

La création du code d’un pixel personnalisé implique les étapes suivantes :

  1. Préparation du SDK JavaScript tiers.
  2. Configurez votre pixel pour suivre les événements clients.

Préparation du SDK JavaScript tiers

Le service tiers avec lequel vous travaillez vous fournit le code intégré au pixel. Un pixel est généralement constitué de deux composants : un SDK Javascript et le code de suivi. Si le code du service tiers comprend du code HTML, il doit être supprimé, car le bac à sable du pixel Shopify n'accepte que JavaScript.

Voici un exemple de pixel méta. Les pixels diffèrent légèrement d’un tiers à l’autre.

​​<!-- Meta Pixel Code -->
​​<script>
!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');
fbq('init', YOUR_PIXEL_ID);
fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=618182112209280&ev=PageView&noscript=1"
/></noscript>
<!-- End Meta Pixel Code -->

Après avoir supprimé le code HTML du code de Meta, il vous reste le SDK et le code du pixel de Meta pour l’initialiser. Le code de suivi de l'événement PageView (pages vues) a également été supprimé, car il sera ajouté à l’étape suivante.

​​!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');
fbq('init', YOUR_PIXEL_ID);

Il se peut que vous tombiez sur des pixels chargés avec script src=. Le code HTML n’est pas pris en charge dans les pixels de Shopify. Vous devez donc le remplacer par son équivalent en JavaScript.

Voici un exemple de pixel Google Analytics :

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

La partie script src= peut être remplacée par l’équivalent JavaScript suivant. Vérifiez toujours que votre attribut src correspond à la version HTML :

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');

Suivre les événements clients

Une fois que vous avez chargé et initialisé le SDK du pixel, vous devez lui transmettre les événements que vous souhaitez suivre. Pour ce faire, vous devez vous abonner à ces événements, puis intégrer dans le SDK du pixel les données de l’événement à traiter par le service tiers.

S’abonner aux événements standard

Shopify propose un ensemble d’événements standard qui permet de vous assurer facilement que votre pixel collecte les données dont il a besoin.

Vous pouvez vous abonner aux événements en utilisant l’API de l’extension Shopify Pixels. Vous devrez placer le code du pixel tiers à l'intérieur avec l’événement auquel vous vous abonnez.

Voici un exemple de l’événement PageView (pages vues) pour le pixel de Meta. Notez que fbq("track") fait partie du code de Meta. Chaque entreprise aura sa propre version et vous devrez consulter la documentation correspondante.

analytics.subscribe("page_viewed", async (event) => {
  fbq('track', 'PageView');
});

Certains événements ont des métadonnées que vous pouvez transmettre à votre pixel. Voici un exemple de transmission des informations d’un produit dans l’événement ViewContent (affichage du contenu) de Meta :

analytics.subscribe("product_viewed", async (event) => {
  fbq('track', 'ViewContent', {
    content_ids: [event.data.productVariant.id],
    content_name: event.data.productVariant.title,
    currency: event.data.productVariant.price.currencyCode,
    value: event.data.productVariant.price.amount,
  });
});

S’abonner aux événements clients personnalisés

Si vous souhaitez suivre d’autres événements clients, comme lorsque quelqu’un clique sur un bouton, vous pouvez ajouter des événements clients personnalisés. Il est possible de s'abonner aux événements personnalisés tout comme aux événements standard. Faites passer le nom de l’événement auquel vous souhaitez vous abonner et transmettez les informations au pixel du fournisseur de services tiers.

Il s’agit d’un exemple qui illustre la façon dont un événement personnalisé publié peut apparaître dans les fichiers Liquid de votre thème :

<script>Shopify.analytics.publish("special_email_signup", { email_campaign_id: 123});</script>

Voici un exemple de configuration de votre pixel pour qu’il s’abonne à cet événement personnalisé :

analytics.subscribe("special_email_signup", event => {
  window.dataLayer.push({event: emailSignUp, emailCampaignId: event.customData.email_campaign_id});
});

Pour plus d’informations sur les événements personnalisés, consultez la documentation des développeurs Shopify.

Exemple de pixel personnalisé

Vous trouverez ci-dessous un exemple de code pour un pixel complet. Le code du pixel variera en fonction du fournisseur de services tiers et des événements que vous souhaitez suivre.

Pixel Meta personnalisé

!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);

// integrate third-party pixel tracking
analytics.subscribe("page_viewed", event => {
  fbq('track', 'PageView');
});

analytics.subscribe("product_viewed", async (event) => {
  fbq('track', 'ViewContent', {
    content_ids: [event.data.productVariant.id],
    content_name: event.data.productVariant.title,
    currency: event.data.productVariant.price.currencyCode, 
    value: event.data.productVariant.price.amount,
  });
});

analytics.subscribe("search_submitted", async (event) => {
  fbq('track', 'Search', {
    search_string: event.searchResult.query
  });
});

analytics.subscribe("product_added_to_cart", async (event) => {
  fbq('track', 'AddToCart', {
    content_ids: [event.data.cartLine.merchandise.productVariant.id],
    content_name: event.data.cartLine.merchandise.productVariant.title,
    currency: event.data.cartLine.merchandise.productVariant.price.currencyCode,
    value: event.data.cartLine.merchandise.productVariant.price.amount,
  });
});

analytics.subscribe("payment_info_submitted", async (event) => {
  fbq('track', 'AddPaymentInfo');
});

analytics.subscribe("checkout_started", async (event) => {
  fbq('track', 'InitiateCheckout');
});

analytics.subscribe("checkout_completed", async (event) => {
  fbq('track', 'Purchase', {
    currency: event.checkout.currencyCode,
    value: event.checkout.totalPrice.amount,
  });
});

Prêt(e) à commencer à vendre avec Shopify ?

Essayez gratuitement