Comment créer un événement "Added to Cart" pour BigCommerce

Vous apprendrez

Apprenez à créer un événement Added to Cart pour BigCommerce qui suit le moment où un client ajoute un article à son panier et peut déclencher un flux de panier abandonné. Les événements d'ajout au panier ne sont pas automatiquement suivis lorsque vous intégrez BigCommerce ; vous devez d'abord ajouter (et éventuellement modifier) un extrait JavaScript (inclus dans ce guide) aux fichiers de votre thème BigCommerce.

• Vous n'avez pas besoin de créer l'événement Ajouté au panier pour envoyer un flux de panier abandonné ; le flux de panier abandonné Ajouté au panier est distinct du flux de panier abandonné standard, qui est déclenché par le passage en caisse. 
• L'intégration de Klaviyo à BigCommerce permet déjà de suivre l'événement Started Checkout lorsqu'un client saisit son adresse électronique au cours du processus de paiement après avoir ajouté un ou plusieurs articles à son panier. 

Avant de commencer

L'événement Added to Cart (Ajouté au panier ) n'est suivi que pour les utilisateurs qui ont déjà été cuisinés par Klaviyo. 

Vous devez déjà avoir installé le suivi des produits visualisés pour que l'événement Ajouté au panier fonctionne correctement. En général, les clients de Klaviyo l'installent au cours du processus d'intégration de BigCommerce et les instructions sont disponibles dans notre article sur l'intégration. 

Ajoutez le snippet

1. Ouvrez votre administration BigCommerce et naviguez vers Storefront > My Themes.
2. Recherchez votre thème actuel et cliquez sur le menu déroulant Paramètres avancés.
3. Recherchez le fichier product.html et cliquez pour l'ouvrir.
4. Collez le snippet ci-dessous directement sous le snippet Klaviyo Viewed Product.

   <script text="text/javascript"> 
   //Initialiser l'objet Klaviyo immédiatement au chargement de la page
   !function(){if(!window.klaviyo){window._klOnsite=window._klOnsite||[];try{window.klaviyo=new Proxy({},{get:function(n,i){return"push"===i?function(){var n;(n=window._klOnsite).push.apply(n,arguments)}:function(){for(var n=arguments.length,o=new Array(n),w=0;w<n;w++)o[w]=arguments[w];var t="function"==typeof o[o.length-1]?o.pop():void 0,e=new Promise((function(n){window._klOnsite.push([i].concat(o,[function(i){t&&t(i),n(i)}]))});return e}}})}catch(n){window.klaviyo=window.klaviyo||[],window.klaviyo.push=function(){var n ;(n=window._klOnsite).push.apply(n,arguments)}}}}() ; </script>
   <script text="text/javascript">
   //Ajouté au panier
   var klaviyo = window.klaviyo || [] ;
   document.getElementById("form-action-addToCart").addEventListener('click',function (){
      klaviyo.track("Added to Cart", item);
   }) ;
   </script>

5. Ensuite, vérifiez si vous devez modifier votre extrait. Pour ce faire, vous devez vérifier l'ID du bouton "Ajouter au panier" sur votre site, et voir s'il correspond à la variable "Ajouter au panier" mise en évidence dans l'extrait ci-dessous, dont la valeur par défaut est form-action-addToCart.
   
6. Pour vérifier l'ID du bouton, ouvrez l'une des pages produits de votre site, cliquez avec le bouton droit sur votre bouton "Ajouter au panier" et sélectionnez Inspecter.
   
7. La console s'ouvre et affiche le code source du bouton "Ajouter au panier". L'image suivante montre l'ID du bouton "Add to Cart" mis en évidence dans la console.
   
8. L'ID du bouton sur la page présentée ici correspond à form-action-addToCart, il n'est donc pas nécessaire de le modifier.
   • Si l'ID du bouton "Ajouter au panier" sur votre site n'est pas form-action-addToCart, vous devrez modifier le texte de la variable entre guillemets pour qu'il corresponde à l'ID du bouton.
9. Si votre code source n'indique pas d'identifiant de bouton, passez à la section suivante et apprenez à utiliser un extrait alternatif avec la notation de classe au lieu de la notation de bouton. 
10. Lorsque vous avez terminé, enregistrez votre fichier product.html. 

Vous avez fini d'ajouter le snippet et vous allez maintenant suivre l'événement Added to Cart (Ajouté au panier ). 

Extrait alternatif pour le bouton "Add to Cart" sans ID de bouton

Pour des raisons de style, certains sites utilisent une notation de classe au lieu d'un ID de bouton pour les boutons "Ajouter au panier".

Si votre bouton "Ajouter au panier" n'a pas d'ID de bouton (que vous pouvez déterminer en suivant les étapes de la section précédente) et utilise à la place une notation de classe, vous devez utiliser l'extrait de code alternatif ci-dessous pour activer l'événement " Ajouter au panier". 

1. Si votre bouton est défini par la notation de classe, collez l'extrait alternatif suivant au bas de votre fichier product.html:

   <script text="text/javascript"> 
   //Initialiser l'objet Klaviyo immédiatement au chargement de la page
   !function(){if(!window.klaviyo){window._klOnsite=window._klOnsite||[];try{window.klaviyo=new Proxy({},{get:function(n,i){return"push"===i?function(){var n;(n=window._klOnsite).push.apply(n,arguments)}:function(){for(var n=arguments.length,o=new Array(n),w=0;w<n;w++)o[w]=arguments[w];var t="function"==typeof o[o.length-1]?o.pop():void 0,e=new Promise((function(n){window._klOnsite.push([i].concat(o,[function(i){t&&t(i),n(i)}]))});return e}}})}catch(n){window.klaviyo=window.klaviyo||[],window.klaviyo.push=function(){var n ;(n=window._klOnsite).push.apply(n,arguments)}}}}() ; </script>
   <script text="text/javascript">
   //Produits consultés
   var klaviyo = window.klaviyo || [] ;
   var classname = document.getElementsByClassName("add-to-cart") ;
   var addToCart = function() {
      klaviyo.track("Added to Cart", item);
   }; 
   for (var i = 0 ; i < classname.length ; i++) {
      classname[i].addEventListener('click', addToCart, false);
   }
   </script>
   

2. Ce code devra probablement être modifié avec le nom de votre classe. Comparez le nom de la classe de votre bouton entre les guillemets, mis en évidence dans l'exemple suivant, avec le contenu entre les parenthèses après getElementsByClassName dans l'extrait de code ci-dessus. Par exemple, le nom de la classe dans la capture d'écran est btn product-form_cart-submit btn--secondary-accent et la classe dans le snippet est nommée add-to-cart.
   
   
   • Si ces deux éléments ne correspondent pas, modifiez l'extrait de code pour qu'il reflète le nom de la classe de votre bouton.
3. Par exemple, l'extrait de code ci-dessous a été modifié avec la valeur classname btn product-form_cart-submit btn--secondary-accent entourée de guillemets doubles.
   
4. Enregistrez votre fichier product.html

Une fois que vous avez sauvegardé, vous avez fini d'ajouter le snippet et vous pouvez maintenant suivre l'événement Added to Cart. 

Dépannage de votre "Ajouté au panier" snippet

Une fois que vous avez ajouté le snippet, il doit surveiller le bouton "Add to Cart'' et suivre un événement Added to Cart chaque fois qu'un visiteur clique sur ce bouton. 

Cet événement fonctionne de la même manière que l'événement " Produit vu". Chaque article ajouté au panier déclenche un nouvel événement. Vous pouvez consulter ces événements en cliquant sur :

1. Naviguer vers Analytics > Metrics dans Klaviyo
2. Recherche de l'événement
3. Cliquer sur le fil d'activité
   
   

Si vous ne voyez pas d'événements Ajouté au panier dans votre compte, essayez ce qui suit :

• Assurez-vous que votre Klaviyo.js (également connu sous le nom de snippet Active on Site) fonctionne, ce qui est nécessaire pour que Added to Cart fonctionne correctement. Cela devrait avoir été ajouté à votre site automatiquement lorsque vous avez intégré Klaviyo, mais vous pouvez vérifier que cela fonctionne en suivant les étapes de la section confirmant l'installation du suivi sur site de notre article sur l'intégration de BigCommerce.
• Vérifiez que le suivi des produits visualisés fonctionne, ce qui est également nécessaire pour que l'ajout au panier fonctionne correctement. Ce snippet est ajouté manuellement, et vous pouvez apprendre comment l'ajouter et le tester dans la section Viewed Product de notre article sur l'intégration. 

The "Added to Cart" abandoned cart flow

Lorsque vous créez un flux de panier abandonné (en utilisant Added to Cart ou Started Checkout), vous pouvez utiliser Klaviyo SMS en plus de l'email. Pour des raisons de conformité, veillez à n'envoyer qu'un seul SMS dans votre flux et si vous utilisez plusieurs types de flux de panier abandonné, veillez à n'utiliser le SMS que dans l'un d'entre eux. 

Dans la section Essentiels de la bibliothèque, vous trouverez le flux standard de rappel de panier abandonné. Ce flux est déclenché par l'événement Started Checkout.

Pour commencer avec un flux de panier abandonné utilisant l'événement Added to Cart, nous vous recommandons d'utiliser le flux préconstruit disponible dans la bibliothèque de flux de Klaviyo, qui contient les filtres de flux appropriés déjà configurés. Ce flux tend à cibler des acheteurs potentiels plus occasionnels qui n'ont pas encore commencé à passer à la caisse.

Le flux des paniers abandonnés déclenché par l'événement Added to Cart se trouve dans la section "Prevent lost sales" goal. 

Si vous avez implémenté le snippet BigCommerce Added to Cart, ce flux sera prêt à l'emploi avec tous les filtres recommandés et le contenu dynamique de l'email prêt à générer des emails de suivi de panier personnalisés.

Utilisez-vous Amazon Buy avec Prime ?

Si vous utilisez Buy with Prime pour le paiement et l'exécution des commandes de l'un des produits de votre boutique, vous devez le faire :

• Intégrez Buy with Prime à Klaviyo pour intégrer les données de Buy with Prime à votre compte Klaviyo.
• Pour votre flux abandonné "Added to Cart", ajoutez les filtres de flux suivants pour exclure les clients qui ont lancé des vérifications ou effectué des achats via Buy with Prime de la réception d'un message incorrect :
  
  • Vous avez lancé le processus de paiement (acheter avec Prime) zéro fois depuis le début de ce flux ET
  • Commande passée (Buy with Prime) zéro fois depuis le début de ce flux.

Ressources complémentaires

• Créer un flux de panier abandonné
• Référence des données BigCommerce