Ajout de pixels personnalisés

S’il n’existe pas d’application permettant de suivre les événements clients spécifiques pour lesquels vous souhaitez collecter des données, vous pouvez ajouter un pixel personnalisé qui s’exécute dans un environnement de bac à sable souple.

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

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

Préparer le code d'un pixel 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 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 Meta. Notez que les pixels diffèrent légèrement d’une entreprise à 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');

S’abonner aux événements standard

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.

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", 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", event => {
  fbq('track', 'ViewContent', {
    content_ids: [event.product_id],
    content_name: event.product_title,
  });
});

Ajouter un pixel personnalisé

Avant d’ajouter un pixel personnalisé, supprimez tous les pixels existants afin que les événements clients ne soient pas comptés deux fois. Le code des pixels existants doit être supprimé manuellement de tous les endroits où il existe, par exemple dans theme.liquid, checkout.liquid (réservé aux marchands Plus), et dans d’autres scripts de paiement.

  1. Dans votre interface administrateur Shopify, accédez à Paramètres > Événements clients.
  2. Donnez un nom unique à votre pixel. Si vous saisissez un nom de pixel personnalisé qui existe déjà, vous serez invité(e) à donner un autre nom à votre pixel.
  3. Cliquez sur Ajouter un pixel pour ouvrir l’éditeur d’événement.
  4. Collez le pixel JavaScript tiers dans la fenêtre Code.
  5. Ajoutez les événements que vous souhaitez suivre dans le schéma approprié.
  6. Facultatif : cliquez sur Autres actions pour modifier le nom de votre pixel ou voir comment engager un Expert Shopify pour obtenir de l’aide avec vos pixels personnalisés.
  7. Cliquez sur Enregistrer pour enregistrer votre pixel personnalisé. Si vous êtes prêt(e) à connecter votre pixel personnalisé à ce moment-là, vous pouvez cliquer sur Connecter le pixel pour commencer à suivre vos événements.

Connecter un pixel personnalisé

Une fois qu’un pixel personnalisé a été ajouté, vous devez le connecter à votre boutique.

  1. À la page « Événements clients » de votre interface administrateur Shopify, cliquez sur Pixels personnalisés.
  2. Les pixels personnalisés qui ne sont pas connectés à ce moment-là s’affichent sous le titre Pixels déconnectés. Cliquez sur Connecter sur la ligne du pixel personnalisé que vous souhaitez connecter.
  3. Lisez les Conditions de service de Shopify. Si votre pixel répond aux exigences de service, cliquez sur Connecter.

Exemples de pixels personnalisés

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

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

analytics.subscribe("product_viewed", event => {
  fbq('track', 'ViewContent', {
    content_ids: [event.product_id],
    content_name: event.product_title,
    currency: event.currency,
    value: event.product_price,
  });
});

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

analytics.subscribe("product_added_to_cart", event => {
  fbq('track', 'AddToCart', {
    content_ids: [event.product_id],
    content_name: event.product_title,
    currency: event.currency,
    value: event.product_price,
  });
});

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

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

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

Déconnecter des pixels personnalisés

Si vous souhaitez cesser de suivre les événements pour lesquels vous avez ajouté un pixel personnalisé, vous devez déconnecter manuellement le pixel de votre boutique en ligne.

Étapes

  1. À la page « Événements clients » de votre interface administrateur Shopify, cliquez sur Pixels personnalisés.
  2. Les pixels personnalisés connectés s’affichent en haut de votre liste de pixels personnalisés. Cliquez sur Déconnecter sur la ligne du pixel personnalisé que vous souhaitez déconnecter. La déconnexion du pixel ne supprime pas celui-ci.

Supprimer des pixels personnalisés

Vous pouvez supprimer les pixels personnalisés dont vous n’avez plus besoin.

Étapes

  1. À la page « Événements clients » de votre interface administrateur Shopify, cliquez sur Pixels personnalisés.
  2. Cliquez sur le bouton ... sur la ligne du pixel personnalisé que vous souhaitez supprimer.
  3. Cliquez sur Supprimer. Confirmez la suppression, et le pixel personnalisé sera supprimé du gestionnaire des pixels.

La suppression d’un pixel personnalisé est irréversible. Assurez-vous donc de supprimer le pixel approprié.

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

Essayez gratuitement