Aperçu

Par défaut, Upcart prend le contrôle de la fonctionnalité de panier de Shopify, ce qui peut empêcher des applications tierces comme Klaviyo de détecter les mises à jour du panier. Heureusement, il existe deux méthodes fiables pour rétablir le suivi Add to Cart (ATC) dans Klaviyo tout en gardant Upcart actif. Avant de commencer, assurez-vous que le suivi sur site de Klaviyo (Onsite Tracking) est correctement configuré. Vous pouvez suivre leur guide de configuration ici :
👉 Guide de configuration du suivi sur site de Klaviyo

Option 1 : Utiliser la compatibilité AJAX (configuration la plus rapide)

Upcart inclut un paramètre qui rétablit la compatibilité avec les autres applications en exposant le comportement natif de mise à jour du panier de Shopify. Lorsque celui-ci est activé, Klaviyo peut à nouveau écouter les événements Add to Cart.

Comment l’activer :

Allez dans Upcart > Cart Editor > Settings
Activez le paramètre : Enhanced AJAX API Compatibility
Cliquez sur Save et testez le résultat

⚠️ Important : compromis liés à Enhanced AJAX API Compatibility
Ce paramètre est désactivé par défaut pour la plupart des boutiques. Activez-le UNIQUEMENT si votre boutique utilise une API de panier AJAX non standard et qu’Upcart n’intercepte pas les événements d’ajout au panier. Lorsqu’il est activé, les autres applications obtiennent davantage de contrôle sur le comportement du panier, ce qui peut provoquer des boucles de redirection ou envoyer les clients vers la page de panier de Shopify au lieu d’ouvrir le tiroir Upcart. Si l’activation de ce paramètre provoque des redirections, désactivez-le et passez plutôt à l’Option 2, en utilisant l’API manuelle d’Upcart (upcartRegisterAddToCart). Pour des instructions complètes sur ce paramètre, consultez Enhanced AJAX API Compatibility.

Option 2 (recommandée) : Ajouter un script Klaviyo personnalisé

Cette méthode vous offre le meilleur des deux mondes : Upcart garde le contrôle total et le suivi Klaviyo continue de fonctionner.

Étapes :

Ouvrez Upcart > Cart Editor > Settings
Faites défiler jusqu’à la section Custom HTML
Dans le menu déroulant, choisissez Scripts (Before Load)
Collez le script suivant :

API moderne (recommandée) :

<script>
  window.upcartSubscribeAddedToCart(function(event) { TrackATC(); });
  window.upcartSubscribeUpsellsAddedToCart(function(event) { TrackATC(); });
</script>

API héritée (fonctionne toujours mais obsolète) :

<script>  
  function TrackATC(){  
    var _learnq = window._learnq || [];  
    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,  
          };  
          _learnq.push(['track', 'Added to Cart', cart]);  
          console.log("Klaviyo ATC");  
        }).catch((e) => {  
          console.error('Klaviyo add to cart tracking failed', e);  
        })  
      );  
  }  
  
  window.upcartOnAddToCart = () => { TrackATC(); };  
  window.upcartOnAddUpsell = () => { TrackATC(); };  
</script>

Ce que cela fait :

Envoie un événement « Added to Cart » à Klaviyo chaque fois qu’un produit ou une vente incitative est ajouté via Upcart
Ajoute un message de confirmation (Klaviyo ATC) dans la console de votre navigateur pour vous indiquer que cela fonctionne

Comment tester votre configuration

Pour confirmer que votre intégration Klaviyo fonctionne correctement :

Suivez le guide de Klaviyo pour tester les événements Add to Cart
Utilisez l’onglet Console de votre navigateur pour vérifier que le message « Klaviyo ATC » apparaît après l’ajout d’un produit
Consultez le tableau de bord analytique de Klaviyo pour les données d’événements ATC

Si vous ne voyez toujours pas de données de suivi, confirmez que les scripts sur site de Klaviyo sont installés et activés. Pour obtenir de l’aide, contactez le centre d’aide Klaviyo.

Résumé


Méthode	Avantages	Quand l’utiliser
Option 1 – Activer la compatibilité AJAX	Configuration la plus rapide, aucun code requis	Lorsque les autres applications n’interfèrent pas
Option 2 – Ajouter un script personnalisé	Le plus fiable, Upcart garde le contrôle	Lorsque l’Option 1 provoque une redirection du panier

Si vous utilisez Klaviyo et Upcart ensemble, ce guide devrait vous aider à suivre les événements sans problème tout en préservant l’expérience de votre tiroir de panier.

Besoin d’aide supplémentaire ? Contactez-nous via l’assistance intégrée à l’application.

Getting Started

Cart Modules

Cart Settings

Sticky Cart Button

Multicart

Customizations

Analytics

Integrations & Compatibility

Billing & Account

Troubleshooting

Suivi des événements d'ajout au panier Klaviyo dans Upcart

Aperçu

Option 1 : Utiliser la compatibilité AJAX (configuration la plus rapide)

Comment l’activer :

Option 2 (recommandée) : Ajouter un script Klaviyo personnalisé

Étapes :

Ce que cela fait :

Comment tester votre configuration

Résumé

​Aperçu

​Option 1 : Utiliser la compatibilité AJAX (configuration la plus rapide)

​Comment l’activer :

​Option 2 (recommandée) : Ajouter un script Klaviyo personnalisé

​Étapes :

​Ce que cela fait :

​Comment tester votre configuration

​Résumé

Aperçu

Option 1 : Utiliser la compatibilité AJAX (configuration la plus rapide)

Comment l’activer :

Option 2 (recommandée) : Ajouter un script Klaviyo personnalisé

Étapes :

Ce que cela fait :

Comment tester votre configuration

Résumé