Add-to-Cart in einem Drittanbieter-Tool tracken

Aftersell wickelt Add-to-Cart selbst ab, was bedeutet, dass Analytics-Tools, die Shopifys Standard-Warenkorb-Requests beobachten, es möglicherweise nicht sehen. Ein Abonnement der SDK-Events stellt das Tracking wieder her und liefert dir ein saubereres Payload, als die Ajax-API zu scrapen. Das ist der häufigste Anwendungsfall, für den Händler das SDK nutzen.

Das Muster

Jede Integration besteht aus denselben drei Zeilen: ein Event abonnieren, das Payload lesen, an dein Tool weiterleiten.

window.aftersell.cart.events.on('item_added', (payload) => {
  myAnalytics.track('Added to cart', {
    variantId: payload.item.variantId,
    title: payload.item.title,
    quantity: payload.item.quantity,
    value: payload.item.finalLinePrice / 100, // SDK prices are in cents
  });
});

Füge es in Cart settings → Custom script → Initialization ein. Das Abonnieren ist ein Setup-Aufruf und daher ganz oben sicher — du musst also nicht warten, bis der Warenkorb geladen ist.

Klaviyo

window.aftersell.cart.events.on('item_added', (payload) => {
  const state = window.aftersell.cart.actions.getCart();
  if (!state) return;

  window._learnq ??= [];
  window._learnq.push(['track', 'Added to Cart', {
    $value: state.totalPrice / 100,
    AddedItemProductName: payload.item.productTitle,
    AddedItemProductID: payload.item.productId,
    AddedItemVariantID: payload.item.variantId,
    AddedItemQuantity: payload.item.quantity,
    AddedItemPrice: payload.item.finalLinePrice / 100,
    ItemNames: state.items.map((line) => line.productTitle),
    CheckoutURL: `${window.location.origin}/cart`,
  }]);
});

Stelle sicher, dass zuerst das Klaviyo Onsite-Tracking installiert ist. Dieses Script feuert nur das Event; es lädt Klaviyo nicht.

Triple Whale

window.aftersell.cart.events.on('item_added', (payload) => {
  window.TriplePixel('AddToCart', {
    item: payload.item.variantId,
    q: payload.item.quantity,
  });
});

Google Analytics 4

window.aftersell.cart.events.on('item_added', (payload) => {
  const line = payload.item;
  window.gtag('event', 'add_to_cart', {
    currency: window.aftersell.cart.actions.getCart().currency,
    value: line.finalLinePrice / 100,
    items: [{
      item_id: String(line.variantId),
      item_name: line.productTitle,
      item_variant: line.variantTitle,
      price: line.finalLinePrice / line.quantity / 100,
      quantity: line.quantity,
    }],
  });
});

Weitere Events, die sich zu tracken lohnen

// Cart viewed.
window.aftersell.cart.events.on('cart_opened', () => {
  myAnalytics.track('Cart viewed');
});

// Item removed.
window.aftersell.cart.events.on('item_removed', (payload) => {
  myAnalytics.track('Removed from cart', { variantId: payload.item.variantId });
});

// Checkout intent: fires just before the browser navigates.
window.aftersell.cart.events.on('checkout', () => {
  const state = window.aftersell.cart.actions.getCart();
  navigator.sendBeacon('/my-endpoint', JSON.stringify({
    event: 'checkout_started',
    value: state ? state.totalPrice / 100 : 0,
  }));
});

Verwende navigator.sendBeacon in einem checkout-Handler. Die Seite wird gleich entladen, und ein normales fetch kann mittendrin abgebrochen werden. Außerdem kannst du den Checkout aus diesem Handler nicht abbrechen; er ist eine Benachrichtigung, kein Gate.

Worauf du achten musst

Preise sind in Cent. Teile durch 100 für Tools, die einen Dezimalbetrag erwarten. formatMoney ist nur für die Anzeige gedacht, sende also keinen formatierten String an ein Analytics-Tool.
Eine Mengenerhöhung ist kein item_added. Wenn eine bestehende Position von 1 auf 3 geht, feuert cart_updated, nicht item_added. Wenn dein Tool das sehen muss, vergleiche in einem cart_updated-Handler mit dem vorherigen Zustand.
Tracke nicht über cart_updated, wenn du „hinzugefügt“ meinst. Es feuert bei jeder Änderung, auch bei Entfernungen und Mengenänderungen, du würdest also zu viel melden.
Prüfe auf Doppelzählungen. Wenn dein Tool Add-to-Cart bereits auf anderem Weg erfasst, meldet dieses Script es doppelt. Verifiziere das in der Live-Ansicht des Tools, bevor du live gehst.

Testen

Füge neben deinem Tracking-Aufruf ein console.log hinzu, öffne dann die Browser-Konsole und füge ein Produkt hinzu:

window.aftersell.cart.events.on('item_added', (payload) => {
  console.log('[tracking] item_added', payload.item.title);
  // …your tracking call
});

Wenn das Log nicht erscheint, läuft das Script nicht — prüfe, ob es im Initialization-Slot gespeichert wurde. Wenn das Log erscheint, aber das Tool nichts anzeigt, liegt das Problem im Payload-Format des Tools, nicht im SDK.

Nächste Schritte

Events: jedes Event und wann es feuert.
Cart-Objekt: jedes Feld, das du senden kannst.
Cart Analytics: das Reporting, das Aftersell von Haus aus mitbringt.

Erste Schritte

Startseite

Best Practices

Post-Purchase-Upsells

Warenkorb

Checkout-Upsells (Shopify Plus)

Danke-Seite

Produktseiten-Upsells

Rokt Thanks

Strategien

Analytics & Tracking

Integrationen

Aftersell MCP

Abrechnung & Konto

Fehlerbehebung

Add-to-Cart in einem Drittanbieter-Tool tracken

Das Muster

Klaviyo

Triple Whale

Google Analytics 4

Weitere Events, die sich zu tracken lohnen

Worauf du achten musst

Testen

Nächste Schritte

​Das Muster

​Klaviyo

​Triple Whale

​Google Analytics 4

​Weitere Events, die sich zu tracken lohnen

​Worauf du achten musst

​Testen

​Nächste Schritte

Das Muster

Klaviyo

Triple Whale

Google Analytics 4

Weitere Events, die sich zu tracken lohnen

Worauf du achten musst

Testen

Nächste Schritte