Rastrear agregar al carrito en una herramienta de terceros

Aftersell maneja el agregar al carrito por sí mismo, lo que significa que las herramientas de analíticas que observan las solicitudes de carrito predeterminadas de Shopify pueden no verlo. Suscribirse a los eventos del SDK restaura el seguimiento, y te da un payload más limpio que raspar la Ajax API. Esto es lo más común para lo que los comerciantes usan el SDK.

El patrón

Toda integración son las mismas tres líneas: suscríbete a un evento, lee el payload, reenvíalo a tu herramienta.

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

Pégalo en Cart settings → Custom script → Initialization. Suscribirse es una llamada de configuración, así que es seguro al principio de todo, de modo que no necesitas esperar a que el carrito se cargue.

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

Asegúrate de que el seguimiento onsite de Klaviyo esté instalado primero. Este script solo dispara el evento; no carga 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,
    }],
  });
});

Otros eventos que vale la pena rastrear

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

Usa navigator.sendBeacon en un handler de checkout. La página está a punto de descargarse, y un fetch normal puede cancelarse a mitad de camino. Tampoco puedes cancelar el checkout desde este handler; es una notificación, no una compuerta.

Cosas que hay que hacer bien

Los precios están en centavos. Divide entre 100 para las herramientas que esperan un monto decimal. formatMoney es solo para visualización, así que no envíes una cadena formateada a una herramienta de analíticas.
Un aumento de cantidad no es item_added. Pasar de 1 a 3 en una línea existente dispara cart_updated, no item_added. Si tu herramienta necesita ver eso, compara contra el estado anterior en un handler de cart_updated.
No rastrees desde cart_updated si quieres decir “agregado”. Se dispara en cada cambio, incluyendo eliminaciones y ediciones de cantidad, así que reportarás de más.
Verifica el doble conteo. Si tu herramienta ya captura el agregar al carrito de otra manera, este script lo reportará dos veces. Verifica en la vista en vivo de la herramienta antes de salir en vivo.

Probarlo

Agrega un console.log junto a tu llamada de seguimiento, luego abre la consola del navegador y agrega un producto:

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

Si el log no aparece, el script no se está ejecutando, así que verifica que se guardó en el slot de Initialization. Si el log aparece pero la herramienta no muestra nada, el problema está en el formato del payload de la herramienta, no en el SDK.

Adónde ir después

Eventos: cada evento y cuándo se dispara.
Objeto cart: cada campo que puedes enviar.
Analíticas del carrito: los reportes que Aftersell proporciona de fábrica.

Primeros pasos

Página de inicio

Mejores prácticas

Ventas adicionales poscompra

Carrito

Ventas adicionales en el pago (Shopify Plus)

Página de agradecimiento

Ventas adicionales en la página de producto

Rokt Thanks

Estrategias

Analíticas y seguimiento

Integraciones

Aftersell MCP

Facturación y cuenta

Solución de problemas

Rastrear agregar al carrito en una herramienta de terceros

El patrón

Klaviyo

Triple Whale

Google Analytics 4

Otros eventos que vale la pena rastrear

Cosas que hay que hacer bien

Probarlo

Adónde ir después

​El patrón

​Klaviyo

​Triple Whale

​Google Analytics 4

​Otros eventos que vale la pena rastrear

​Cosas que hay que hacer bien

​Probarlo

​Adónde ir después

El patrón

Klaviyo

Triple Whale

Google Analytics 4

Otros eventos que vale la pena rastrear

Cosas que hay que hacer bien

Probarlo

Adónde ir después