Überblick

Standardmäßig übernimmt Upcart die Warenkorb-Funktionalität von Shopify, was Drittanbieter-Apps wie Klaviyo daran hindern kann, Warenkorb-Aktualisierungen zu erkennen. Zum Glück gibt es zwei zuverlässige Möglichkeiten, das Add-to-Cart-Tracking (ATC) in Klaviyo wiederherzustellen und Upcart dabei aktiv zu lassen. Bevor du beginnst, stelle sicher, dass Klaviyo Onsite Tracking richtig konfiguriert ist. Du kannst deren Einrichtungsanleitung hier befolgen:
👉 Einrichtungsanleitung für Klaviyo Onsite Tracking

Option 1: AJAX-Kompatibilität verwenden (schnellste Einrichtung)

Upcart enthält eine Einstellung, die die Kompatibilität mit anderen Apps wiederherstellt, indem sie Shopifys natives Warenkorb-Aktualisierungsverhalten verfügbar macht. Wenn diese aktiviert ist, kann Klaviyo wieder auf Add-to-Cart-Events lauschen.

So aktivierst du sie:

Gehe zu Upcart > Cart Editor > Settings > Cart settings
Scrolle zu Advanced Settings und klappe den Bereich auf
Aktiviere Enhanced Ajax API compatibility
Klicke auf Save und teste das Ergebnis

⚠️ Wichtig: Kompromisse bei Enhanced AJAX API Compatibility
Diese Einstellung ist für die meisten Stores standardmäßig deaktiviert. Aktiviere sie NUR, wenn dein Store eine nicht standardmäßige AJAX-Cart-API verwendet und Upcart Add-to-Cart-Events nicht abfängt. Wenn sie aktiviert ist, erhalten andere Apps mehr Kontrolle über das Warenkorb-Verhalten, was zu Weiterleitungsschleifen führen oder Kunden zur Shopify-Warenkorbseite schicken kann, anstatt den Upcart-Drawer zu öffnen. Wenn das Aktivieren dieser Einstellung Weiterleitungen verursacht, deaktiviere sie und wechsle stattdessen zu Option 2 mit der manuellen Upcart-API (upcartRegisterAddToCart). Eine vollständige Anleitung zu dieser Einstellung findest du unter Enhanced AJAX API Compatibility.

Option 2 (empfohlen): Ein benutzerdefiniertes Klaviyo-Skript hinzufügen

Diese Methode bietet dir das Beste aus beiden Welten: Upcart behält die volle Kontrolle und das Klaviyo-Tracking funktioniert weiterhin.

Schritte:

Öffne Upcart > Cart Editor > Settings
Scrolle nach unten zum Abschnitt Custom HTML
Wähle im Dropdown-Menü Scripts (Before Load)
Füge das folgende Skript ein:

Moderne API (empfohlen):

<script>
  function TrackATC(){
    var _learnq = window._learnq || [];
    _learnq.push(['track', 'Added to Cart']);
    console.log("Klaviyo ATC");
  }

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

Füge den gesamten Block ein, einschließlich der Funktion TrackATC. Der Subscriber ruft sie auf — ein Snippet mit nur den beiden upcartSubscribe…-Zeilen wirft bei jedem Add-to-Cart den Fehler Uncaught ReferenceError: TrackATC is not defined und sendet nichts an Klaviyo.

Legacy-API (funktioniert noch, ist aber veraltet):

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

Was dieses Skript bewirkt:

Sendet ein „Added to Cart“-Event an Klaviyo, sobald ein Produkt oder Upsell über Upcart hinzugefügt wird
Fügt eine Bestätigungsmeldung (Klaviyo ATC) in deiner Browser-Konsole hinzu, damit du weißt, dass es funktioniert

So testest du deine Einrichtung

Um zu bestätigen, dass deine Klaviyo-Integration richtig funktioniert:

Folge Klaviyos Anleitung zum Testen von Add-to-Cart-Events
Verwende den Tab Console deines Browsers, um zu überprüfen, ob nach dem Hinzufügen eines Produkts der Log-Eintrag „Klaviyo ATC“ erscheint
Prüfe das Analytics-Dashboard von Klaviyo auf ATC-Event-Daten

Wenn du weiterhin keine Tracking-Daten siehst, bestätige, dass die Onsite-Skripte von Klaviyo installiert und aktiviert sind. Hilfe findest du im Klaviyo Help Center.

Zusammenfassung


Methode	Vorteile	Wann verwenden
Option 1 – AJAX-Kompatibilität aktivieren	Schnellste Einrichtung, kein Code erforderlich	Wenn andere Apps nicht stören
Option 2 – Benutzerdefiniertes Skript hinzufügen	Am zuverlässigsten, Upcart behält die Kontrolle	Wenn Option 1 Warenkorb-Weiterleitungen verursacht

Wenn du Klaviyo und Upcart zusammen verwendest, sollte dir diese Anleitung helfen, Events reibungslos zu tracken und gleichzeitig dein Cart-Drawer-Erlebnis intakt zu halten.

Brauchst du weitere Hilfe? Kontaktiere uns über den In-App-Support.

Erste Schritte

Warenkorb-Module

Warenkorb-Einstellungen

Sticky-Warenkorb-Button

Multicart

Anpassungen

Analytics

Integrationen & Kompatibilität

Abrechnung & Konto

Fehlerbehebung

Klaviyo-Add-to-Cart-Event-Tracking in Upcart

Überblick

Option 1: AJAX-Kompatibilität verwenden (schnellste Einrichtung)

So aktivierst du sie:

Option 2 (empfohlen): Ein benutzerdefiniertes Klaviyo-Skript hinzufügen

Schritte:

Was dieses Skript bewirkt:

So testest du deine Einrichtung

Zusammenfassung

​Überblick

​Option 1: AJAX-Kompatibilität verwenden (schnellste Einrichtung)

​So aktivierst du sie:

​Option 2 (empfohlen): Ein benutzerdefiniertes Klaviyo-Skript hinzufügen

​Schritte:

​Was dieses Skript bewirkt:

​So testest du deine Einrichtung

​Zusammenfassung

Überblick

Option 1: AJAX-Kompatibilität verwenden (schnellste Einrichtung)

So aktivierst du sie:

Option 2 (empfohlen): Ein benutzerdefiniertes Klaviyo-Skript hinzufügen

Schritte:

Was dieses Skript bewirkt:

So testest du deine Einrichtung

Zusammenfassung