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

Objectif de cet article

Découvrez comment créer manuellement un événement Added to Cart pour Shopify afin de suivre le moment où un client ajoute un article à son panier. Vous pouvez l’utiliser pour déclencher un flux de panier abandonné.

L’événement Added to Cart est différent de l’événement Checkout Started de Klaviyo. Checkout Started se déclenche après qu’un client ajoute un ou des articles à son panier, saisit son adresse e-mail pendant le processus de commande et poursuit sa commande. Cet événement se produit plus loin dans l’entonnoir, alors que Added to Cart se déclenche dès qu’un client ajoute un article à son panier. 

Avant de commencer

• Lisez notre article Démarrer avec Shopify pour obtenir des instructions détaillées sur l’intégration avant de poursuivre la lecture de cet article.
• Assurez-vous que le tracking sur site de Klaviyo est activé (y compris le suivi Viewed Product) pour que l’événement Added to Cart fonctionne correctement.
• Veuillez noter que l’événement Added to Cart ne suit que les utilisateurs qui ont déjà été suivis par des cookies Klaviyo.

Création de l’événement « Added to Cart »

La création de l’événement Added to Cart se fait en trois étapes : 

1. Choisissez l’endroit où placer l’extrait de code.
2. Ajoutez l’extrait de code à votre boutique.
3. Testez l’extrait de code.

Où coller l’extrait de code ?

Assurez-vous de coller l’extrait de code à la fois sur votre page produit par défaut et sur toutes vos autres pages produit.

Si votre boutique dispose de blocs liquid personnalisés, vous devez en utiliser un pour l’extrait de code. 

1. Dans Shopify, accédez à Online Store (Boutique en ligne) > Themes (Thèmes).
2. Recherchez votre thème et cliquez sur Customize (Personnaliser).
3. En haut de la page, cliquez sur le menu déroulant Home page (Page d’accueil).
4. Sélectionnez Products (Produits) > Default product (Produit par défaut) pour accéder à votre page produit par défaut.
5. Cliquez sur Add section (Ajouter une section) dans la barre de gauche, puis sélectionnez Custom Liquid (Personnaliser le bloc liquid).
6. Collez dans la case l’extrait de code fourni.
7. Cliquez sur Save (Enregistrer) en haut à droite.
8. Dans la barre de gauche, votre nouveau bloc personnalisé liquid pour Added to Cart devrait automatiquement apparaître sous les autres sections de la page.
   • Si votre bloc Added to Cart doit être déplacé, survolez-le et cliquez sur les six points pour le faire glisser sous vos autres sections.
     
     

Si votre boutique ne dispose pas de blocs liquid personnalisés, vous devez placer l’extrait de code dans votre fichier theme.liquid.

1. Dans Shopify, accédez à Online Store (Boutique en ligne) > Themes (Thèmes).
2. Recherchez votre thème et cliquez sur Customize (Personnaliser).
3. Cliquez sur les trois points en haut et sélectionnez Edit code (Modifier le code).
4. Ouvrez le fichier theme.liquid.
5. Collez l’extrait de code fourni à la suite de tous les autres codes, avant le tag de fermeture </body>.
   
6. Au-dessus de l’extrait, ajoutez ce tag d’ouverture : {% if product %}
   
7. Directement après l’extrait, ajoutez ce tag de fermeture : {% endif %}
8. Votre fichier devrait ressembler à ceci :
   
9. Cliquez sur Save (Enregistrer).

Ajout de l’extrait de code à votre site

L’extrait de code Added to Cart suivant devrait fonctionner pour la plupart des boutiques Shopify.

Ajoutez l’extrait ci-dessous à votre boutique Shopify, à l’emplacement que vous avez déterminé plus haut.

<script>
  window.addEventListener('load', function() {
  var _learnq = window._learnq || [];
  function addedToCart() {
   fetch(`${window.location.origin}/cart.js`)
   .then(res => res.clone().json().then(data => {
    var cart = {
      total_price: data.total_price/100,
      $value: data.total_price/100,
      total_discount: data.total_discount,
      original_total_price: data.original_total_price/100,
      items: data.items
    }
    if (item !== 'undefined') {
      cart = Object.assign(cart, item)
    }
    if (klAjax) {
       _learnq.push(['track', 'Added to Cart', cart]);
       klAjax = false;
      }
   }))
  };
  (function (ns, fetch) {
    ns.fetch = function() {
      const response = fetch.apply(this, arguments);
      response.then(res => {
        if (`${window.location.origin}/cart/add.js`
          .includes(res.url) && res.url !== '') {
              addedToCart()
        }
      });
      return response
     }
  }(window, window.fetch));
  var klAjax = true;
  var atcButtons = document.querySelectorAll("form[action*='/cart/add'] button[type='submit']");
  for (var i = 0; i < atcButtons.length; i++) { 
    atcButtons[i].addEventListener("click", function() {
      if (klAjax) {
        _learnq.push(['track', 'Added to Cart', item]);
        klAjax = false;
      }
    })
  }
  });
</script>

Lorsque vous avez terminé, testez l’événement en suivant les instructions de la section suivante.

Testez votre événement « Added to Cart »

Veuillez noter que Klaviyo suit uniquement les « navigateurs connus », ou ceux qui ont été suivis par des cookies (suite à un clic sur le lien d’un e-mail, au remplissage d’un formulaire, etc.). Pour cette raison, les événements Added to Cart peuvent ne pas commencer à apparaître dans votre compte aussi rapidement que vous l’espérez. Pour en savoir plus sur les entités suivies par Klaviyo, consultez notre article sur le tracking sur site. 

Afin de tester votre événement Added to Cart, vous devez activer manuellement les cookies sur votre adresse e-mail. Procédez comme suit :

1. Accédez à votre site web.
2. Sur votre page d’accueil, ajoutez ce qui suit à la fin de l’URL, en remplaçant testing.email@gmail.com par votre adresse e-mail :
   ?utm_email=testing.email@gmail.com
   
   
3. Actualisez la page.
4. Rendez-vous sur une page produit sur votre site et cliquez sur le bouton Add to Cart (Ajouter au panier).
5. Recherchez votre adresse e-mail dans Klaviyo.
   

Vous devriez constater qu’un profil Klaviyo a été créé pour vous (s’il n’en existait pas déjà un) et que cet événement Added to Cart a été enregistré dans votre fil d’activité.

Vous ne parvenez pas à suivre les produits ajoutés au panier avec l’extrait de code donné ?

Si vous ne parvenez pas à suivre l’événement Ajouté au panier avec l’extrait de code donné, vous pouvez essayer les deux autres extraits de code ci-dessous : Extrait de code 2 et Extrait de code 3. Avant de tester un nouvel extrait de code, veillez à supprimer d’abord celui qui n’a pas fonctionné.

Choisir l’extrait de code de remplacement à essayer

Votre boutique utilise-t-elle un identifiant de bouton pour définir le bouton Add to Cart (Ajouter au panier) ? Si c’est le cas, essayez l’extrait de code 2. Si votre bouton Add to Cart (Ajouter au panier) est plutôt défini par une notation de classe, vous devriez utiliser l’extrait de code 3. Voici comment savoir si votre boutique utilise un identifiant de bouton ou une notation de classe :

1. 1. Ouvrez l’une des pages produit de votre site. 
   2. Cliquez avec le bouton droit de la souris sur le bouton « Add to Cart » (Ajouter au panier), puis sélectionnez Inspect (Inspecter).
   3. La console s’ouvre et affiche le code source de votre bouton « Add to Cart » (Ajouter au panier) dans l’onglet Elements (Éléments) de la console.
   4. Dans l’onglet Elements (Éléments), votre code peut ressembler à ceci :
      
   5. Notez que ce bouton « Ajouter au panier » n’est pas associé à un identifiant de bouton (qui ressemblerait à id = "button_ID_name"). Au lieu de cela, une déclaration de classe y fait référence (class= "btn product-form_cart-submit btn–secondary-accent").

Extrait de code 2

Si votre bouton Add to Cart (Ajouter au panier) est défini par un identifiant, ajoutez l’extrait de code ci-dessous ainsi que tous les tags nécessaires à votre boutique Shopify, à l’emplacement que vous avez déterminé dans la section « Où coller l’extrait de code ? ».

<script type="text/javascript">
var _learnq = _learnq || [];
	document.getElementById("AddToCart").addEventListener('click',function (){
 		_learnq.push(['track', 'Added to Cart', item]);
	});
</script>

Cet extrait de code devra probablement être modifié, car la variable Add to Cart (Ajouter au panier) de l’extrait de code doit correspondre à l’identifiant du bouton utilisé sur votre site.

La variable Add to Cart (Ajouter au panier), dont le nom par défaut est AddToCart, est mise en évidence dans l’extrait ci-dessous :

La vérification de l’identifiant du bouton se fait de la même manière que la vérification de la présence d’un identifiant de bouton sur votre site : 

1. Ouvrez l’une des pages produit de votre site.
2. Cliquez avec le bouton droit de la souris sur votre bouton « Add to Cart » (Ajouter au panier), puis sélectionnez Inspect (Inspecter).
3. La console s’ouvre et vous montre le code source de votre bouton « Add to Cart » (Ajouter au panier). L’image suivante montre l’identifiant du bouton « Add to Cart » (Ajouter au panier) mis en évidence dans la console.
   
   L’identifiant du bouton de la page présentée ici (addToCart-product-template) est différent de la variable de l’extrait de code par défaut (AddToCart). 
4. S’ils ne correspondent pas, modifiez l’extrait de code pour qu’il corresponde à la classe de votre bouton. Dans notre exemple, l’extrait de code modifié ressemble à ceci :
   

Extrait de code 3

Si votre bouton Add to Cart (Ajouter au panier) est défini par une notation de classe, ajoutez l’extrait de code ci-dessous ainsi que tous les tags nécessaires à votre boutique Shopify, à l’emplacement que vous avez déterminé dans la section « Où coller l’extrait de code ? ».

<script type="text/javascript">
var _learnq = _learnq || [];
  var classname = document.getElementsByClassName("add-to-cart");
var addToCart = function() {
_learnq.push(['track', 'Added to Cart', item]);
}; for (var i = 0; i < classname.length; i++) {
classname[i].addEventListener('click', addToCart, false);
}
</script>

Cet extrait de code devra probablement être modifié, car la variable Add to Cart (Ajouter au panier) de l’extrait de code doit correspondre à la classe utilisée sur votre site.

1. Ouvrez l’une des pages produit de votre site.
2. Cliquez avec le bouton droit de la souris sur votre bouton « Add to Cart » (Ajouter au panier), puis sélectionnez Inspect (Inspecter).
3. La console s’ouvre et vous montre le code source de votre bouton « Add to Cart » (Ajouter au panier). L’image suivante montre la classe du bouton « Add to Cart » (Ajouter au panier) mise en évidence dans la console.
   
4. Comparez le code de votre bouton entre guillemets, mis en évidence dans l’exemple ci-dessus, avec le contenu entre parenthèses après getElementsByClassName dans l’extrait de code ci-dessus. Par exemple, la classe de la capture d’écran est btn product-form_cart-submit btn--secondary-accent et la variable de l’extrait de code est add-to-cart.
5. S’ils ne correspondent pas, modifiez l’extrait de code pour qu’il corresponde à l’identifiant de votre bouton. Dans notre exemple, l’extrait de code modifié ressemble à ceci :
   

Si vous rencontrez des difficultés pour suivre l’événement Added to Cart après avoir essayé ces différentes options, cela peut être dû à un problème d’identification du bouton Added to Cart (Ajouter au panier). Dans ce cas, veuillez contacter l’assistance Klaviyo.

Étape suivante : activation du flux « Added to Cart » abandonné

Le flux de panier abandonné par défaut de Klaviyo est déclenché par l’événement Checkout Started, tandis que le flux de panier abandonné Added to Cart cible les acheteurs plus occasionnels qui n’ont pas encore commencé à passer commande.

Pour activer ce flux, nous vous recommandons d’utiliser le flux préconçu disponible dans la bibliothèque de flux de Klaviyo :

1. Accédez à la bibliothèque de flux de Klaviyo.
2. Cliquez sur la section de l’objectif « Prévenir les ventes perdues ».
3. Sélectionnez un flux avec déclenchement en cas d’ajout au panier et rappel de panier abandonné. Deux options s’offrent à vous : e-mail uniquement, ou e-mail et SMS.
   
4. Si vous avez créé l’événement Added to cart, ce flux est alors prêt à être utilisé. Il s’appuiera sur tous les filtres recommandés, et les contenus dynamiques de ses e-mails vous permettront de générer des messages 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.

Résultats 

Vous avez désormais créé et testé un événement Added to Cart de Shopify et activé un flux Added to Cart abandonné. 

Ressources supplémentaires

• Démarrer avec le flux de panier abandonné
• Documentation sur les données Shopify
• Résolution de problèmes liés à votre intégration Shopify