Śledź dodania do koszyka w narzędziu zewnętrznym

Aftersell samodzielnie obsługuje dodawanie do koszyka, co oznacza, że narzędzia analityczne obserwujące domyślne żądania koszyka Shopify mogą tego nie widzieć. Subskrypcja zdarzeń SDK przywraca śledzenie i daje czystszy payload niż zbieranie danych z Ajax API. To najczęstsze zastosowanie SDK przez sprzedawców.

Schemat

Każda integracja to te same trzy linie: zasubskrybuj zdarzenie, odczytaj payload, przekaż go do swojego narzędzia.

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
  });
});

Wklej to w Cart settings → Custom script → Initialization. Subskrypcja to wywołanie konfiguracyjne, więc jest bezpieczna na samej górze i nie musisz czekać na załadowanie koszyka.

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`,
  }]);
});

Upewnij się najpierw, że śledzenie onsite Klaviyo jest zainstalowane. Ten skrypt jedynie wysyła zdarzenie; nie ładuje Klaviyo.

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,
    }],
  });
});

Inne zdarzenia warte śledzenia

// 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,
  }));
});

W obsłudze zdarzenia checkout używaj navigator.sendBeacon. Strona za chwilę się wyładuje, a zwykły fetch może zostać anulowany w trakcie. Z tej obsługi nie da się też anulować checkoutu; to powiadomienie, a nie bramka.

Rzeczy, które trzeba zrobić dobrze

Ceny są w centach. Dziel przez 100 dla narzędzi oczekujących kwoty dziesiętnej. formatMoney służy tylko do wyświetlania, więc nie wysyłaj sformatowanego ciągu do narzędzia analitycznego.
Zwiększenie ilości to nie item_added. Przejście z 1 na 3 na istniejącej pozycji wywołuje cart_updated, a nie item_added. Jeśli Twoje narzędzie musi to widzieć, porównuj z poprzednim stanem w obsłudze cart_updated.
Nie śledź z cart_updated, jeśli chodzi Ci o „dodano”. To zdarzenie odpala się przy każdej zmianie, w tym usunięciach i edycjach ilości, więc zawyżysz raporty.
Sprawdź podwójne zliczanie. Jeśli Twoje narzędzie już przechwytuje dodania do koszyka w inny sposób, ten skrypt zgłosi je dwukrotnie. Zweryfikuj w podglądzie na żywo narzędzia przed wdrożeniem.

Testowanie

Dodaj console.log obok wywołania śledzącego, następnie otwórz konsolę przeglądarki i dodaj produkt:

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

Jeśli log się nie pojawia, skrypt nie działa — sprawdź, czy zapisał się w slocie Initialization. Jeśli log się pojawia, ale narzędzie nic nie pokazuje, problem leży w formacie payloadu narzędzia, a nie w SDK.

Co dalej

Events: każde zdarzenie i kiedy się odpala.
Obiekt koszyka: każde pole, które możesz wysłać.
Analityka koszyka: raporty, które Aftersell udostępnia od razu.

Pierwsze kroki

Strona główna

Najlepsze praktyki

Upselle po zakupie

Koszyk

Upselle przy realizacji zakupu (Shopify Plus)

Strona z podziękowaniem

Upselle na stronie produktu

Rokt Thanks

Strategie

Analityka i śledzenie

Integracje

Aftersell MCP

Rozliczenia i konto

Rozwiązywanie problemów

Śledź dodania do koszyka w narzędziu zewnętrznym

Schemat

Klaviyo

Triple Whale

Google Analytics 4

Inne zdarzenia warte śledzenia

Rzeczy, które trzeba zrobić dobrze

Testowanie

Co dalej

​Schemat

​Klaviyo

​Triple Whale

​Google Analytics 4

​Inne zdarzenia warte śledzenia

​Rzeczy, które trzeba zrobić dobrze

​Testowanie

​Co dalej

Schemat

Klaviyo

Triple Whale

Google Analytics 4

Inne zdarzenia warte śledzenia

Rzeczy, które trzeba zrobić dobrze

Testowanie

Co dalej