Créer un code de pixel personnalisé

Avertissement

Les pixels personnalisés constituent une fonctionnalité avancée qui requiert des connaissances en JavaScript. Le respect des lois applicables, les consentements, la sécurité du code, la résolution des problèmes et les mises à jour relèvent de votre responsabilité. Les pixels sont soumis aux Conditions d’utilisation de Shopify.

L’ajout et l’utilisation de pixels personnalisés ne bénéficient pas de l’assistance de Shopify. Si vous avez besoin d’aide pour ajouter ou utiliser un pixel personnalisé, vous pouvez engager un Partenaire Shopify.

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

Remarque

Avant de créer un pixel personnalisé, vous devriez examiner les applications disponibles pour bénéficier d’une stabilité, d’une sécurité et d’une performance accrues. Toutefois, s’il n’existe aucune application qui répond à vos besoins, vous pouvez créer un pixel personnalisé.

Préparation à la création d’un pixel personnalisé

Avant de créer un pixel personnalisé, examinez les informations suivantes pour vous assurer que vous comprenez comment configurer votre pixel :

• Risques associés aux pixels.
• Limites du sandbox de pixels de Shopify.
• Utilisation de l’API Shopify pixels sandbox.
• Schéma de suivi des événements clients.

Lorsque vous ajoutez un pixel personnalisé, vous spécifiez les informations suivantes :

• Le pixel JavaScript tiers.
• Les événements comportementaux que vous souhaitez suivre.
• Les paramètres de consentement en matière de confidentialité des clients.

Créer le code d’un pixel personnalisé

Développez votre activité

Ce tutoriel est avancé et ne bénéficie pas de l’assistance de Shopify. Si vous avez besoin d’aide pour ajouter un pixel personnalisé, vous pouvez engager un Partenaire Shopify.

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

1. Préparer le SDK JavaScript tiers.
2. Configurez votre pixel pour suivre les événements clients.
3. Configurez les paramètres de consentement pour la confidentialité des clients pour votre pixel.

Préparation du SDK JavaScript tiers

Le service tiers avec lequel vous travaillez vous fournit le code qui est intégré au pixel. Un pixel comporte généralement 2 composants : un SDK JavaScript et le code de suivi. Tout code HTML dans le code du service tiers doit être supprimé, car le sandbox de pixels de Shopify ne prend en charge que le JavaScript.

Voici un exemple de pixel Meta. Les pixels varient 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 ne vous reste plus que le SDK de pixel de Meta et le code pour l’initialiser. Le code de suivi de l’événement PageView 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);

Le SDK de pixel de Meta ne transmet pas automatiquement les données d’un pixel personnalisé Shopify. Pour transmettre des données, vous devez vous abonner à des événements.

Il se peut que vous rencontriez des pixels qui sont chargés à l’aide de script src=. Le HTML n’est pas pris en charge dans les pixels de Shopify, vous devrez donc remplacer script src= par l’équivalent JavaScript.

Voici un exemple de pixel Google Analytics qui se charge à l’aide de script src= :

<!-- 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. Assurez-vous 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');

Le SDK du pixel de Google ne transmet pas automatiquement les données d’un pixel personnalisé Shopify. Pour transmettre des données, vous devez vous abonner aux événements.

Suivi des événements clients

Après avoir chargé et initialisé le SDK du pixel, vous devez lui transmettre des événements pour le suivi. Pour cela, vous devez vous abonner à des événements, puis transmettre leurs données au SDK du pixel afin qu’elles soient traitées par le service tiers.

S’abonner aux événements standard

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

Vous pouvez vous abonner à des événements à l’aide de l’API d’extension des pixels Shopify. Vous devrez placer le code du pixel tiers avec l’événement auquel vous vous abonnez.

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

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

Certains événements comportent des métadonnées que vous pouvez transmettre à votre pixel. Voici un exemple de transmission de certains détails de produit dans l’événement ViewContent 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 des événements clients supplémentaires, par exemple 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 de la même manière qu’aux événements standard. Déclarez le nom de l’événement auquel vous souhaitez vous abonner et transmettez les informations au pixel du fournisseur de services tiers.

Voici un exemple de 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 la façon dont vous pouvez configurer votre pixel pour vous abonner à cet événement personnalisé :

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

Pour en savoir plus sur les événements personnalisés, consultez la documentation pour les développeurs de Shopify.

Configuration des paramètres de consentement et de vente de données

Remarque

Vous êtes responsable de votre propre conformité en matière de confidentialité et devez consulter votre conseiller juridique pour déterminer comment les lois de votre région et de celles dans lesquelles vous vendez peuvent affecter votre entreprise. Pour vendre des produits en utilisant la plateforme Shopify, vous devez vous conformer aux lois en vigueur dans la juridiction de votre entreprise et de vos clients, aux Conditions d’utilisation de Shopify, à la Politique d’utilisation acceptable de Shopify et à toute autre politique applicable. En savoir plus sur la confidentialité des clients.

Sur les marchés configurés pour exiger le consentement, comme l’Espace économique européen (EEE) et le Royaume-Uni, les pixels de suivi web ne s’exécutent que lorsque les visiteurs du site web ont fourni les autorisations requises dans la configuration du pixel.

Par défaut, les nouveaux pixels personnalisés nécessitent les autorisations Marketing et Analyses de données. Vous pouvez personnaliser les autorisations requises dans la section Confidentialité des clients > Autorisation des détails de votre pixel personnalisé.

De même, les pixels configurés pour la vente de données ne s’exécuteront pas pour les clients qui ont refusé la vente ou le partage de données, à moins que le pixel ne prenne en charge une utilisation limitée des données. Par défaut, les nouveaux pixels personnalisés sont considérés comme une vente de données. Vous pouvez personnaliser si les données collectées sont considérées comme une vente de données dans la section Confidentialité des clients > Vente de données des détails de votre pixel personnalisé.

Les développeurs de pixels personnalisés peuvent en savoir plus sur la collecte et l’enregistrement du consentement.

Chaque pixel peut avoir un nom différent pour chaque objectif. Vous devez consulter la documentation du pixel du tiers pour comprendre sa correspondance avec les définitions de Shopify.

Par exemple, voici comment les objectifs de Marketing et d’Analyses de données correspondent 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 Meta. Le code du pixel varie 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 obtenir la liste des événements disponibles.

Exemple de 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,
  });
});