Suivi des pixels sur la page post-achat

Attention

Les scripts de suivi sont des personnalisations avancées que l’équipe d’assistance de Shopify ne prend pas en charge. Une bonne connaissance des langages de design web comme HTML, CSS, JavaScript et Liquid est donc indispensable. Envisagez d’engager un Expert Shopify si vous n’êtes pas à l’aise avec les scripts.

Si vous avez installé une application qui ajoute une page post-achat à la procédure de paiement de votre boutique, il est possible que l'application utilisée sur votre boutique pour le suivi de pixels personnalisé ne soit pas en mesure de saisir certains événements de suivi. En effet, les pixels de suivi personnalisés qui sont ajoutés à la zone Scripts supplémentaires de votre boutique suivent uniquement les événements se produisant sur la page de statut de commande, laquelle vient après la page post-achat au cours de la procédure de paiement. Par conséquent, si un client quitte votre boutique au moment où il se trouve sur la page post-achat, aucun des événements de la page de statut de commande n’est suivi.

Pour saisir correctement les événements de conversion, vous pouvez ajouter un script de suivi des événements se produisant sur la page post-achat. Ce script peut également suivre les achats supplémentaires qui sont effectués à partir de la page post-achat, comme les ventes incitatives. Une fois que vous avez ajouté un script de page post-achat, vous devez ajuster le script de votre page de statut de commande de manière à ignorer les événements qui sont déjà saisis par le script de la page post-achat.

Vous ne devez modifier la façon dont votre boutique suit les événements que si vous utilisez un pixel de suivi personnalisé. Par exemple, si vous configurez Google Analytics en passant par Boutique en ligne > Préférences, les événements de votre page post-achat sont déjà saisis correctement.

Considérations

Le script supplémentaire de la page post-achat est similaire aux scripts supplémentaires de la page de statut de commande, à quelques différences importantes près :

• Le script est ajouté à la page post-achat, et non à la page de statut de commande.
• Le champ n’accepte que le code JavaScript. Le code Liquid n’est pas accepté.
• La seule balise HTML autorisée est <script>.
• Le script s’exécute à l'intérieur d'un bac à sable et n’est pas inclus sur la page principale.
• Vous ne pouvez ajouter un script de page post-achat que si vous avez installé sur votre boutique une application qui ajoute une page post-achat à votre procédure de paiement.

L’exécution du script dans un bac à sable permet de s'assurer que le script est sûr et qu'il est utilisé aux fins pour lesquelles il a été prévu.

L’assistance Shopify n'est pas en mesure de vous aider avec les scripts de page post-achat. Si vous avez besoin d’aide, vous pouvez publier un message dans le forum de la Communauté Shopify ou engager un Expert Shopify.

Compatibilité avec les scripts présents sur la page de statut de commande

Pour vous assurer que vos pixels suivent correctement tous les événements de conversion, configurez des scripts de suivi à la fois sur la page post-achat et sur la page de statut de commande. Pour éviter de comptabiliser les mêmes événements de conversion deux fois, vous pouvez utiliser la variable Liquid post_purchase_page_accessed dans les scripts qui sont exécutés sur la page de statut de commande.

Si un client atterrit sur la page post-achat et qu’il se rend sur la page de statut de commande, la variable post_purchase_page_accessed renvoie alors la valeur true (vrai). Si un client n’arrive pas à la page post-achat, la valeur renvoyée par la variable est false (faux).

Par exemple, vous pouvez utiliser le format suivant pour les scripts que vous configurez sur la page de statut de commande :

{% if first_time_accessed == true and post_purchase_page_accessed == false %}
<script>
   // insert your tracking script
</script>
{% endif %}

API disponibles

Vous pouvez utiliser les objets globaux JavaScript pour permettre aux scripts de suivi d’accéder aux données dont ils ont besoin. Les données accessibles se trouvent sous window.Shopify.

Suivi des achats effectués sur la page post-achat

Pour suivre les achats supplémentaires effectués via la page post-achat, vous pouvez vous abonner à l’événement Shopify.on.

Une fois que vous vous êtes abonné(e), les actions suivantes se produisent chaque fois qu’un changeset post-achat est appliqué avec succès :

• Votre gestionnaire est appelé avec deux arguments de type Order : order et outdated order.
• Les objets globaux sous window.Shopify sont mis à jour pour permettre aux scripts d'utiliser les données actualisées.

Les gestionnaires abonnés à cet événement peuvent ne disposer que de 500 millisecondes pour l'exécution. Veillez à charger toutes les dépendances dont vous avez besoin à l’avance.

Ajouter le script de la page post-achat

1. Depuis votre interface administrateur Shopify, accédez à Paramètres > Paiement.
2. Dans le champ Scripts après achat supplémentaires, saisissez votre script.
3. Cliquez sur Save (Enregistrer).

Exemple de script

Vous pouvez utiliser le modèle de script de base suivant pour vous aider à créer votre propre script de page post-achat. Dans cet exemple de script, nous utilisons Google Analytics pour suivre la conversion initiale, et le script explique comment suivre les achats supplémentaires. Cet exemple étant très simple, votre script final sera probablement différent.

Exemples de fichiers de script

Exemple de script pour la page de statut de commande :

<script async src="https://www.googletagmanager.com/gtag/js?id=G-FYNQ742HTX"></script>
<script>
(function() {
  // make sure the initial conversion isn't tracked twice
  {% if first_time_accessed == false or post_purchase_page_accessed == true %}
    return;
  {% endif %}
  // set up google analytics
  window.dataLayer = window.dataLayer || [];
  function gtag() {
    dataLayer.push(arguments);
  }
  gtag('js', new Date());
  gtag('config', 'G-FYNQ742HTX');
  // track initial conversion
  var order = window.Shopify.order;

  gtag('event', 'purchase', {
    affiliation: 'My Shopify Store',
    transaction_id: Number(order.id).toString(),
    value: order.totalPrice,
    currency: order.currency,
    items: order.lineItems.map((item) => ({
      id: Number(item.id).toString(),
      name: item.title,
      category: item.product.type,
      price: item.price,
      quantity: item.quantity,
      variant: Number(item.variant.sku).toString(),
    })),
  });
})();
</script>

Exemple de script pour la page post-achat :

<script async src="https://www.googletagmanager.com/gtag/js?id=G-FYNQ742HTX"></script>
<script>
(function() {
  // set up google analytics
  window.dataLayer = window.dataLayer || [];

  function gtag() {
    dataLayer.push(arguments);
  }

  gtag('js', new Date());
  gtag('config', 'G-FYNQ742HTX');

  // make sure the initial conversion isn't tracked twice
  if (!Shopify.wasPostPurchasePageSeen) {
    var order = window.Shopify.order;

    // track initial conversion
    gtag('event', 'purchase', {
      affiliation: 'My Shopify Store',
      transaction_id: Number(order.id).toString(),
      value: order.totalPrice,
      currency: order.currency,
      items: order.lineItems.map(function(item) {
        return {
          id: Number(item.id).toString(),
          name: item.title,
          category: item.product.type,
          price: item.price,
          quantity: item.quantity,
          variant: Number(item.variant.sku).toString(),
        };
      }),
    });
  }

  // set up additional conversion tracking
  Shopify.on('CheckoutAmended', function(newOrder, previousOrder) {
    // identify which items were recently added, if any
    var oldItems = previousOrder.lineItems.map(function (line) { return line.id; });

    var addedItems = newOrder.lineItems.filter(
      function (line) { return oldItems.indexOf(line.id) < 0; }
    );

    // no new items were added, so we skip conversion tracking
    if (addedItems.length === 0) {
      return;
    }

    // track additional purchase
    gtag('event', 'purchase', {
      affiliation: 'My Shopify Store',
      transaction_id: Number(order.id).toString(),
      value: order.totalPrice,
      currency: order.currency,
      items: addedItems.map(function (item) {
        return {
          id: Number(item.id).toString(),
          name: item.title,
          category: item.product.type,
          price: item.price,
          quantity: item.quantity,
          variant: Number(item.variant.sku).toString(),
        };
      }),
    });
  });
})();
</script>

Références

Le tableau suivant contient les définitions des types correspondant aux attributs qui sont exposés aux scripts supplémentaires après achat à travers window.Shopify  :

Champ	Définition
window.Shopify
shop	Informations de la boutique d’où la commande a été passée.
order	Détails de la commande.
pageUrl	URL de la page en cours.
wasPostPurchasePageSeen	Indique si le/la client(e) a consulté la page post-achat au cours de ce processus de paiement. Le champ sera paramétré sur false (faux) lors du premier rendu, et sur true (vrai) dans les autres cas, par exemple si la page est rechargée.
on(event: string, handler: function): void	Abonne le gestionnaire à un event (événement). Pour le moment, seul l’événement CheckoutAmended est pris en charge.
off(event: string, handler: function): void	Désabonne le gestionnaire (handler) de l'événement donné (event). Pour le moment, seul l’événement CheckoutAmended est pris en charge.
Shop
id	ID de la boutique.
currency	Devise de la boutique au format ISO 4217. Par exemple, USD. Pour en savoir plus, voir shop.currency.
Order
id	Identifiant interne de la commande.
number	Représentation en nombres entiers du nom de la commande. Par exemple : 1025.
checkoutToken	Identifiant interne du paiement.
customer	Client associé à la commande.
lineItem	Rubriques de la commande.
subtotalPrice	Sous-total du prix de tous les articles de la commande après application des réductions sur les rubriques et des réductions sur le panier. Le sous-total ne comprend pas les taxes (sauf si elles sont incluses dans les prix) ni les coûts d’expédition ou les pourboires.
totalPrice	Prix total de la commande.
currency	Code ISO 4217 de la devise de la commande.
discounts	Somme du montant des réductions appliquées à la commande.
Customer
id	ID du client.
email	L'adresse e-mail du client.
acceptsMarketing	Indique si le client a accepté de recevoir les communications de marketing. Le champ sera paramétré sur true (vrai) si le client accepte le marketing, et sur false (faux) s'il le refuse.
hasAccount	Indique si l’adresse e-mail du client est associée à un compte client. Le champ sera paramétré sur true (vrai) si l’adresse e-mail est répertoriée sur un compte client, et sur false (faux) si ce n’est pas le cas. Pour plus d'informations, voir customer.has_account.
firstName	Le prénom du client.
lastName	Le nom de famille du client.
ordersCount	Nombre total de commandes que le client a passées.
totalSpent	Montant total dépensé par le client sur toutes les commandes.
LineItem
finalLinePrice	Prix combiné de tous les articles de la rubrique. Cela équivaut à line_item.final_price multiplié par line_item.quantity.
finalPrice	Prix de la rubrique, incluant tous les montants des réductions au niveau de la rubrique.
lineLevelTotalDiscount	Montant total de l'ensemble des réductions appliquées spécifiquement à la rubrique. Cela n’inclut pas les réductions qui sont ajoutées au panier.
optionsWithValues	Tableau des valeurs sélectionnées à partir des options de produit de l’article. Pour plus d’informations, voir line_item.options_with_values.
originalLinePrice	Prix combiné de la quantité d’articles inclus dans la rubrique, avant application des réductions. Cela équivaut à line_item.original_price multiplié par line_item.quantity.
originalPrice	Prix initial de la rubrique avant application des réductions.
price	Prix unitaire de la rubrique. Le prix tient compte de toutes les réductions appliquées à la rubrique. Champ disponible uniquement pour les boutiques situées en Allemagne ou en France.
product	Produit de la rubrique.
properties	Tableau d’informations personnalisées sur un article qui a été ajouté au panier. Pour plus d’informations, voir line_item.properties.
quantity	Quantité de la rubrique.
title	Titre de la rubrique. Pour plus d’informations, voir line_item.title.
variant	Variante de la rubrique.
Product
id	ID du produit.
type	Type du produit.
ProductVariant
id	ID de la variante.
sku	SKU de la variante.
CartDiscount
id	Identifiant interne de l’application de réduction.
code	Code de la réduction, si celle-ci en a un.
type	Type de la réduction. Valeurs possibles : automatic, discount_code, manual et script.
amount	Montant total de la réduction déduite du prix de la commande.