Se connecter
Démarrer l’essai gratuit

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.

Sur cette page

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 :

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

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.

Dans les marchés soumis à une obligation de recueil du consentement, comme l’Espace économique européen (EEE) et le Royaume-Uni, les pixels web ne s’exécutent que lorsque les visiteurs ont fourni les autorisations requises dans la configuration du pixel. Par défaut, les nouveaux pixels nécessitent les autorisations Marketing et Analyses de données.

De même, les pixels configurés comme vente de données ne s’exécuteront pas pour les clients qui ont choisi de ne plus vendre ou partager des données (sauf si le pixel prend en charge une utilisation limitée des données).

Les développeurs de pixels personnalisés peuvent cliquer sur ce lien pour en apprendre plus sur le recueil et l’enregistrement du consentement.

Chaque pixel peut avoir un nom différent pour chaque objet. Vous devez consulter la documentation du pixel tiers 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,
  });
});
Vous ne trouvez pas les réponses que vous recherchez ? Nous sommes là pour vous aider.