Aujourd’hui, suite des focus consacrés à la personnalisation du code Shopify, avec une série de modifications qui concernent la page client de suivi des commandes.

Les manipulations que nous allons voir ici, exceptionnellement, ne se font pas dans la page HTML/CSS du thème actif, comme les autres personnalisations des derniers articles, mais via la page « Settings / Checkout », dans la section « Order processing », zone « Additional Content and Scripts ».

Pourquoi ? Tout simplement parce qu’il s’agit ici d’appeler des scripts externes qui vont modifier le contenu présenté par la page de suivi, une fois que le client a passé commande.

Je précise qu’il s’agit d’une introduction à quelques grands principes, car le sujet est touffu et nécessite un bon niveau général dans le domaine des scripts.

 

1/ Ajouter un suivi des conversions à la page de suivi des commandes

 

Vous pouvez contrôler quand vos clients visitent la page de validation de commande et à quelle fréquence ils passent commande.

Ceci est possible grâce au suivi de conversion.

Il y a différentes plates-formes disponibles qui vont vous permettre d’accéder à ces données.

 

  • 1- Avec Google Analytics

Si vous utilisez déjà Google Analytics, c’est évidemment la façon la plus complète de suivre le comportement de vos visiteurs lorsqu’ils visitent votre boutique.

Il y a beaucoup de choses à dire sur Google Analytics et je ne m’étends pas sur le sujet dans cet article, pour ne pas ouvrir une trop grande parenthèse.

 

  • 2- Les pixels de tracking externes

Vous pouvez ajouter des pixels de tracking à la page de suivi, en utilisant le champ « Additional Content and Scripts ».

    • Le tracking des commandes :

Ces codes permettent de suivre précisément les achats et sont généralement utilisés sur la page de suivi des commandes, puisque c’est cette page qui confirme que le client est bien allé au bout du processus de commande.

Ces scripts sont fournis par des tiers et sont installés sous forme d’un morceau de code.

Une fois que vous avez récupéré un code, faites d’abord un copier-coller dans un bloc-notes dépourvu de formatage, pour être sûr que vous ne collez que le script dans l’administration de Shopify.

Rendez-vous sur la page et la section mentionnées en introduction, et collez ce code, dans la zone ci-dessous :

Dans cette boîte de dialogue, vous pouvez coller plusieurs scripts différents.

Attention ! Si un client retourne contrôler sa page de suivi à plusieurs reprises, il risque de déclencher plusieurs alertes injustifiées.

Il est donc intéressant d’ajouter un script complémentaire pour que le tracking des conversions ne se déclenche qu’à la première visite de la page.

    • L’intégration conditionnelle :

Certains fournisseurs vous demanderont de n’afficher leur pixel de tracking que si le client est arrivé via un certain paramètre de référence (qui porte généralement le suffixe « ref », « source » ou « r »).

Shopify stocke ces valeurs avec les commandes et les rend disponibles en utilisant : landing_site_ref

Par exemple, votre fournisseur de pixel vous demande d’inclure le code dans la page de validation commande, mais seulement pour les clients qui sont arrivés via leur lien d’affiliation.

Dans ce cas, l’adresse à enregistrer dans le système de suivi ressemblerait à quelque chose comme : http://www.example.com/?ref=tracking-site

Le ?ref=tracking-site doit être unique.

Il serait utilisé sur la dernière page de validation commande, afin de vérifier qu’une commande passée est bien arrivée via un lien d’affiliation.

Pour mettre en place l’intégration conditionnelle, ajouté le script affilié suivant (en le personnalisant) :

{% if landing_site_ref == ‘tracking-site’ %}

<img src= »https://www.trackingx.com/pixel.gif?amount={{ total_price | money_without_currency }}&order-id={{ order_number }}&currency={{ shop.currency }} » height= »1″ width= »1″ />

{% endif %}

À cause du code {{ % if landing_site_ref == ‘tracking-site’ % }}, le pixel ne s’affichera que pour les clients ayant le code landing_site_ref correct.

    • Exemple :

Imaginons que votre fournisseur de pixel vous demande d’intégrer le code suivant :

<img src= »https://www.tracking.com/u?amount=&order-id=&currency= » height= »1″ width= »20″ />

Nous savons parallèlement que vous avez besoin :

      • D’un montant de commande : {{ total_price | money_without_currency }}
      • D’un numéro unique pour chaque commande, qui reprendra le numéro affecté par Shopify, mais sans le # habituellement présent : {{ order_number }}
      • La devise de votre boutique : {{ shop.currency }}

Si nous remplaçons les variables du code fourni par ces variables Liquid particulières, nous obtenons donc :

<img src= »https://www.tracking.com/pixel.gif?amount={{ total_price | money_without_currency }}&order-id={{ order_number }}&currency={{ shop.currency }} » height= »1″ width= »1″ />

Lorsque les clients atteindront la page de validation de commande, le code qui sera réellement délivré au navigateur ressemblera à:

<img src= »https://www.tracking.com/pixel.gif?amount=55.34&order-id=4343&currency=USD » height= »1″ width= »1″ />

Exemple de code qui inclut la description de la commande:

<img src= »https://www.emjcd.com/u?CID=YOURCID&TYPE=YOURTYPE&METHOD=IMG&CURRENCY={{ shop.currency }}&OID={{ order_number }}{% for line_item in line_items %}&ITEM{{ forloop.index }}={{ line_item.sku }}&AMT{{ forloop.index }}={{ line_item.line_price | money_without_currency }}&QTY{{ forloop.index }}={{ line_item.quantity }}{% endfor %} » height= »1″ width= »20″ />

 

  • 3- Le pixel Facebook

C’est un outil que j’ai déjà évoqué dans d’autres articles et que je vous recommande fortement, car vous allez pouvoir suivre l’activité de votre boutique via Facebook.

Pour l’installer, deux méthodes possibles, qui ne sont pas utilisables en même temps.

Attention, choisissez bien l’une ou l’autre !

    • Saisir le code du pixel donné par Facebook dans le champ correspondant (méthode la plus simple, que je vous recommande).
    • Ajouter le code manuellement à chaque page de votre boutique (méthode qui nécessite des connaissances plus avancées et n’a pas grand intérêt si les fonctions principales du pixel sont votre unique objectif).

Je ne m’étends pas sur l’installation du pixel, ici, car elle est déjà traitée dans plusieurs autres articles.

 

  • 4- Le suivi de conversions avec des identifiants de commande

Pour de meilleurs résultats, vous pouvez compter les conversions uniquement quand vos clients terminent leur transaction.

Si un client revisite la page de conversion ou l’actualise, la session va être comptée en double, ce qui n’est pas souhaitable.

Vous pouvez utiliser des identifiants de commande pour minimiser la prise en compte des conversions multiples. Cela va permettre de ne garder que la première visite du client sur la page de conversion, pour une commande donnée.

Cet identifiant prend la forme : {{ order_number }}

Plus d’informations sur cette question seront données dans les focus relatifs à l’analyse des données, car il s’agit de sujets plus avancés, par forcément très accessibles pour les débutants.

 

2/ Faire tourner les scripts seulement à la première visite

La page de suivi des commandes permet aux clients de suivre le statut de leurs envois.

Il est courant d’inclure le suivi des conversions sur cette page, parce que c’est la page finale du processus de commande, qui garantit que la vente a bien eu lieu.

Pour empêcher le système d’analyse de compter plusieurs fois les mêmes clients, vous pouvez ajouter la propriété first_time_accessed autour de certains ou tous vos scripts additionnels.

Avec ce code, Shopify ne fera tourner les scripts additionnels qu’à la première visite des clients sur leur page de suivi.

Cette propriété peut être utilisée pour tout script de votre boutique, d’ailleurs, et pas seulement ceux qui concernent le suivi des conversions.

Dès que vous souhaitez limiter un script à un seul déclenchement, il vous suffit de le saisir en utilisant la propriété first_time_accessed, comme ceci :

{% if first_time_accessed %}

  <!—Scripts que vous ne voulez faire tourner qu’une seule fois –>

{% endif %}

En rouge, vous remarquez les balises de la propriété, qui encadrent le script en question.

Tout script que vous désirez utiliser à chaque visite doit, lui, se trouver à la suite et pas entre les balises.

 

3/ Ajout de codes JavaScript sur la page du statut de la commande

De tels codes peuvent être ajoutés pour diverses situations, dont :

  • Des notes sur des produits spécifiques
  • Des instructions pour des méthodes individuelles d’envoi
  • Des liens de téléchargement pour les produits numériques

Comment ça fonctionne ?

Shopify.Checkout.OrderStatus contient une fonction qui génère du nouveau contenu :

addContentBox(params)

Cette fonction ajoute une boîte de contenu où chaque paramètre passé dans la fonction est rendu via une ligne unique.

Exemple :

Vous pourriez ajouter un script pour qu’un contenu s’affiche quand une méthode particulière d’envoi a été utilisée :

<script>

  {% if checkout.shipping_method.title == ‘Retrait en magasin’ %}

    Shopify.Checkout.OrderStatus.addContentBox(

     ‘<h2>Retrait en magasin</h2>’,

     ‘<p>Nous sommes ouverts tous les jours de 9 heures à 20 heures.</p>’

    )

  {% endif %}

</script>

 

4/ Montrer un contenu uniquement quand un produit spécifique a été commandé

Autre exemple de l’utilisation d’un code JavaScript.

Vous avez la possibilité d’utiliser le code checkout.line_items pour savoir si un produit spécifique se trouve dans la commande.

Imaginons que Jeanne vende un produit téléchargeable et veuille ajouter le lien de téléchargement dans la page de suivi des commandes, mais seulement dans le cas où le produit se trouve dans la commande.

Dans ce cas, le code qui sera utilisé sera celui-ci :

{% for line in checkout.line_items %}

  <!– DEBUG looking at {{ line.title }} –>

  {% if line.title == ‘Notre produit à télécharger’ %}

  <p>Téléchargez votre produit <a href= »# »>ici</a>.</p>

  {% endif %}

{% endfor %}

 

Voilà pour ce premier aperçu de l’utilisation des scripts dans la boutique.

Il existe, bien sûr, de nombreuses autres applications et je reviendrai sans doute sur ce sujet dans de futurs focus.

Nous aurons notamment l’occasion d’évoquer Google Analytics dans des tutoriels dédiés à l’analyse des données de votre boutique.

À très bientôt pour la suite !