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

Objectif de cet article

Découvrez comment créer un événement Added to Cart pour BigCommerce afin de suivre le moment où un client ajoute un article à son panier et de déclencher un flux de panier abandonné. Les événements Added to Cart ne sont pas suivis automatiquement lorsque vous intégrez BigCommerce ; vous devez d’abord ajouter (et potentiellement modifier) un extrait de code JavaScript (inclus dans ce guide) à vos fichiers de thème BigCommerce.

• Vous n’avez pas besoin de créer l’événement Added to Cart pour envoyer un flux de panier abandonné ; le flux de panier abandonné Added to Cart est distinct du flux de panier abandonné standard, qui est déclenché par Started Checkout.
• L’intégration BigCommerce native de Klaviyo suit déjà un événement Début de paiement lorsqu’un client saisit son e-mail pendant le processus de paiement après avoir ajouté un ou plusieurs articles à son panier.

Avant de commencer

L’événement Added to Cart n’est suivi que pour les utilisateurs qui ont déjà été suivis par des cookies Klaviyo .

Vous devez déjà avoir installé le tracking Viewed Product pour que l’événement Added to Cart fonctionne correctement. En règle générale, les clients Klaviyo installent cela lors du processus d’intégration BigCommerce, et les instructions se trouvent dans notre article sur l’intégration.

Ajouter l’extrait

1. Ouvrez votre interface d’administration BigCommerce et accédez à 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 dessus pour l’ouvrir.
4. Collez l’extrait ci-dessous directement sous l’extrait Klaviyo Viewed Product.

<script text="text/javascript"> 
//Initialize Klaviyo object immediately on page load
!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">
//Added to Cart
var klaviyo = window.klaviyo || [];
document.getElementById("form-action-addToCart").addEventListener('click',function (){
   klaviyo.track("Added to Cart", item);
});
</script>

1. Ensuite, vérifiez si vous devez modifier votre snippet. Pour ce faire, vous devrez vérifier l’ID du bouton « Add to Cart » sur votre site et voir s’il correspond à la variable « Add to Cart » mise en évidence dans l’extrait ci-dessous, dont la valeur par défaut est form-action-addToCart.
   

2. Pour vérifier l’ID du bouton, ouvrez l’une des pages produit de votre site, faites un clic droit sur votre bouton « Ajouter au panier », puis sélectionnez Inspecter.
   

3. La console s’ouvre et affiche le code source du bouton « Add to Cart » (Ajouter au panier). L’image suivante montre l’identifiant du bouton « Add to Cart » mis en évidence dans la console.
   

4. L’ID du bouton sur la page affichée ici correspond à form-action-addToCart, donc aucune modification n’est nécessaire.
   • 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 les guillemets afin qu’il corresponde à l’ID du bouton
5. Si votre code source n’affiche pas d’ID de bouton, passez directement à la section suivante et découvrez comment utiliser un extrait de code alternatif avec une notation de classe plutôt qu’une notation de bouton.
6. Lorsque vous avez terminé, enregistrez votre fichier product.html.

Vous avez terminé d’ajouter l’extrait de code et allez maintenant suivre l’événement Ajouté au panier.

Extrait alternatif pour le bouton « Ajouter au panier » 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 (ce 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 Added to Cart.

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

<script text="text/javascript"> 
//Initialize Klaviyo object immediately on page load
!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">
//Viewed Product
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>

1. Vous devrez probablement modifier ce code avec le nom de votre classe. Comparez le nom de classe de votre bouton entre guillemets, mis en évidence dans l’exemple suivant, avec le contenu entre 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 l’extrait s’appelle add-to-cart.
   
   

• Si ces deux éléments ne correspondent pas, modifiez l’extrait de code pour refléter le nom de classe de votre bouton.

2. 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.
   

3. Enregistrez votre fichier product.html

Une fois que vous enregistrez, vous avez terminé d’ajouter l’extrait de code et pouvez maintenant suivre l’événement Added to Cart.

Résoudre les problèmes liés à votre extrait de code « Added to Cart »

Après avoir ajouté l’extrait de code, celui-ci doit surveiller le bouton « Add to Cart » et suivre un événement Added to Cart chaque fois qu’un visiteur avec cookie clique sur ce bouton.

Cet évènement fonctionne de manière similaire à l’évènement Viewed Product. Chaque article qu’une personne ajoute à son panier déclenche un nouvel événement. Vous pouvez afficher ces événements en :

1. Accéder à Analyse > Indicateurs dans Klaviyo
2. Recherche de l’événement
3. En cliquant sur Flux d’activité
   
   

Si vous ne voyez pas d’événements Added to Cart dans votre compte, essayez ce qui suit :

• Assurez-vous que votre Klaviyo.js (également appelé l’extrait Active on Site) fonctionne, ce qui est nécessaire pour que Added to Cart fonctionne correctement. Ceci aurait dû être ajouté automatiquement à votre site lors de votre intégration avec Klaviyo, mais vous pouvez vérifier que cela fonctionne en suivant les étapes de la section confirmation de l’installation du tracking sur site de notre article sur l’intégration BigCommerce.
• Vérifiez que votre tracking Viewed Product fonctionne, ce qui est également nécessaire pour que Added to Cart fonctionne correctement. Cet extrait de code est ajouté manuellement, et vous pouvez apprendre comment l’ajouter et le tester dans la section Viewed Product de notre article sur les intégrations.

Si vous rencontrez toujours des problèmes avec votre extrait de code Added to Cart, cela peut être dû à un problème d’identification du bouton « Ajouter au panier ». Dans ce cas, veuillez contacter l’assistance Klaviyo.

Le flux de panier abandonné « Added to Cart »

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

Dans la section Essentials 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é en utilisant l’événement Added to Cart, nous vous recommandons d’utiliser le flux prédéfini disponible dans la bibliothèque de flux de Klaviyo, qui contient déjà les filtres de flux appropriés. Ce flux a tendance à cibler des acheteurs potentiels plus occasionnels qui n’ont pas encore commencé le paiement.

Le flux de panier abandonné déclenché par l’événement Added to Cart se trouve dans la section d’objectif « Empêcher les ventes perdues ».

Si vous avez implémenté l’extrait de code BigCommerce Added to Cart, ce flux sera prêt à l’emploi avec tous les filtres recommandés et un contenu d’e-mail dynamique, prêt à alimenter des e-mails personnalisés de suivi du panier.

Utilisez-vous Buy with Prime d’Amazon ?

Si vous utilisez Buy with Prime pour le paiement et l’expédition de l’un des produits de votre boutique, procédez comme suit :

• Intégrez Buy with Prime à Klaviyo pour importer les données de Buy with Prime dans votre compte Klaviyo.
• Pour votre flux « Added to Cart » abandonné, ajoutez les filtres de flux suivants pour exclure les clients qui ont commencé à passer commande ou qui ont effectué des achats via Buy with Prime afin d’éviter qu’ils ne reçoivent des messages qui ne leur sont pas destinés :
  
  • Started Checkout (Buy with Prime) zéro fois depuis le début de ce flux ET
  • Placed Order (Buy with Prime) zéro fois depuis le début de ce flux.

Ressources supplémentaires