Créer un code de pixel personnalisé

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.

Remarque

Avant de créer un pixel personnalisé, nous vous recommandons de vérifier les applications disponibles pour améliorer la stabilité, la sécurité et les performances. Toutefois, si aucune application ne répond à vos besoins, vous pouvez créer un pixel personnalisé.

Préparer 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 :

• risques associés aux pixels
• limites des pixels Shopify de test
• utilisation de l’API de test des pixels Shopify
• schéma de suivi des événements clients

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é

Remarque

Ceci est un tutoriel avancé, qui n’est pas pris en charge par Shopify. Si vous avez besoin d’aide pour ajouter un pixel personnalisé à votre boutique, vous pouvez engager un(e) Partenaire Shopify.

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

Meta's pixel SDK doesn't automatically transmit data from a Shopify custom pixel. To transmit data, you need to subscribe to events.

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 devrez donc remplacer script src= avec l’équivalent 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. 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');

Google's pixel SDK doesn't automatically transmit data from a Shopify custom pixel. To transmit data, you need to subscribe to events.

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.

Configuration du consentement

Les pixels web ne s’exécutent que si les visiteurs ont fourni leur consentement à des fins de marketing et d’analyses de données dans les marchés pour lesquels vous avez configuré le consentement comme étant obligatoire. Chaque pixel peut avoir un nom différent pour chaque objet. Vous devez consulter la documentation du pixel pour comprendre comment ils sont reliés aux définitions de Shopify.

Par exemple, voici comment les objets de marketing et d’analyses de données sont reliés au mode Consentement de Google :

gtag('consent', 'update', {
  'ad_storage': 'granted',
  'analytics_storage': 'granted',
  'ad_user_data': 'granted',
  'ad_personalization': 'granted',
});

Exemple de pixel personnalisé

Vous trouverez ci-dessous un exemple de code pour un pixel méta. Le code du pixel variera en fonction du fournisseur de services tiers et des événements que vous souhaitez suivre. Consultez la référence des événements clients pour une liste d’événements disponibles.

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", (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", (event) => {
  fbq('track', 'Search', {
    search_string: event.searchResult.query
  });
});

analytics.subscribe("product_added_to_cart", (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", (event) => {
  fbq('track', 'AddPaymentInfo');
});

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

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