GTM. Koszyk AJAX bez przeładowania. Custom event z frontu po sukcesie API.

Na czym to polega w sklepie

Przyciski „Dodaj do koszyka” w SPA i headless wywołują API - strona się nie przeładowuje. Click trigger nie wystarczy do pełnych danych produktu; po sukcesie API front pushuje add_to_cart z aktualną ceną i SKU.

Przykład ze sklepu internetowego

Fetch do /api/cart/add zwraca pozycję koszyka - dopiero wtedy push:

const res = await fetch('/api/cart/add', { method: 'POST', body: JSON.stringify({ sku, qty }) });
if (res.ok) {
  const line = await res.json();
  dataLayer.push({ ecommerce: null });
  dataLayer.push({
    event: 'add_to_cart',
    ecommerce: {
      currency: 'PLN',
      value: line.price * line.quantity,
      items: [{ item_id: line.sku, item_name: line.name, price: line.price, quantity: line.quantity }]
    }
  });
}

Co zrobić po stronie biznesu

• Push tylko po sukcesie API - błąd 409 nie powinien generować add_to_cart.
• Cena z odpowiedzi serwera, nie z DOM - zgodność z finalnym purchase.
• Opcjonalnie Click trigger jako sygnał UX, ecommerce push jako źródło prawdy GA4.

W skrócie

AJAX wymaga custom event z backendowej odpowiedzi. GTM mapuje push - front odpowiada za poprawność danych produktowych.