> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt
> Use this file to discover all available pages before exploring further.

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

> Dieser Artikel erklärt, wie du ein genaues Klaviyo-Event-Tracking aktivierst, wenn Kunden über Upcart Artikel zu ihrem Warenkorb hinzufügen.

<div id="overview">
  # Überblick
</div>

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](https://help.klaviyo.com/hc/en-us/articles/4425956184731)

***

<div id="option-1-use-ajax-compatibility-fastest-setup">
  ## Option 1: AJAX-Kompatibilität verwenden (schnellste Einrichtung)
</div>

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.

<div id="how-to-enable">
  ## So aktivierst du sie:
</div>

1. Gehe zu **Upcart > Cart Editor > Settings > Cart settings**
2. Scrolle zu **Advanced Settings** und klappe den Bereich auf
3. Aktiviere **Enhanced Ajax API compatibility**
4. 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](/de/upcart/enhanced_ajax_api_compatibility).

***

<div id="option-2-recommended-add-a-custom-klaviyo-script">
  ## Option 2 (empfohlen): Ein benutzerdefiniertes Klaviyo-Skript hinzufügen
</div>

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

<div id="steps">
  ## Schritte:
</div>

1. Öffne **Upcart > Cart Editor > Settings**
2. Scrolle nach unten zum Abschnitt **Custom HTML**
3. Wähle im Dropdown-Menü **Scripts (Before Load)**
4. 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>
```

<Warning>
  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.
</Warning>

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

***

<div id="what-this-does">
  ## Was dieses Skript bewirkt:
</div>

* 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

***

<div id="how-to-test-your-setup">
  ## So testest du deine Einrichtung
</div>

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

* Folge [Klaviyos Anleitung zum Testen von Add-to-Cart-Events](https://help.klaviyo.com/hc/en-us/articles/4425956184731)
* 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](https://help.klaviyo.com/hc/en-us).

***

<div id="summary">
  ## Zusammenfassung
</div>

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