Traccia l'aggiunta al carrello in uno strumento di terze parti

Aftersell gestisce da solo l’aggiunta al carrello, il che significa che gli strumenti di analytics che osservano le richieste standard del carrello di Shopify potrebbero non vederla. Iscriversi agli eventi dell’SDK ripristina il tracciamento e ti offre un payload più pulito rispetto a fare scraping dell’Ajax API. Questa è la cosa più comune per cui i merchant usano l’SDK.

Il pattern

Ogni integrazione sono le stesse tre righe: iscriviti a un evento, leggi il payload, inoltralo al tuo strumento.

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

Incollalo in Cart settings → Custom script → Initialization. L’iscrizione è una chiamata di set-up, quindi è sicura proprio all’inizio, e non devi aspettare che il carrello si carichi.

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

Assicurati prima che il tracciamento onsite di Klaviyo sia installato. Questo script si limita a lanciare l’evento; non carica 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,
    }],
  });
});

Altri eventi che vale la pena tracciare

// 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 in un gestore checkout. La pagina sta per essere scaricata, e un normale fetch potrebbe essere cancellato in volo. Inoltre non puoi annullare il checkout da questo gestore; è una notifica, non un cancello.

Cose da fare bene

I prezzi sono in centesimi. Dividi per 100 per gli strumenti che si aspettano un importo decimale. formatMoney serve solo per la visualizzazione, quindi non inviare una stringa formattata a uno strumento di analytics.
Un aumento di quantità non è item_added. Passare da 1 a 3 su una riga esistente attiva cart_updated, non item_added. Se il tuo strumento deve vederlo, confronta con lo stato precedente in un gestore cart_updated.
Non tracciare da cart_updated se intendi “aggiunto”. Si attiva a ogni cambiamento, incluse rimozioni e modifiche di quantità, quindi sovra-riporteresti.
Verifica il doppio conteggio. Se il tuo strumento cattura già l’aggiunta al carrello in un altro modo, questo script la riporterà due volte. Verifica nella vista live dello strumento prima di andare in produzione.

Testarlo

Aggiungi un console.log accanto alla tua chiamata di tracciamento, poi apri la console del browser e aggiungi un prodotto:

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

Se il log non appare, lo script non è in esecuzione, quindi verifica che sia stato salvato nello slot Initialization. Se il log appare ma lo strumento non mostra nulla, il problema è nel formato del payload dello strumento, non nell’SDK.

Dove andare adesso

Events: ogni evento e quando si attiva.
Cart object: ogni campo che puoi inviare.
Cart analytics: la reportistica che Aftersell fornisce di serie.

Per iniziare

Pagina iniziale

Best practice

Upsell post-acquisto

Carrello

Upsell al checkout (Shopify Plus)

Pagina di ringraziamento

Upsell nella pagina prodotto

Rokt Thanks

Strategie

Analisi e monitoraggio

Integrazioni

Aftersell MCP

Fatturazione e account

Risoluzione dei problemi

Traccia l'aggiunta al carrello in uno strumento di terze parti

Il pattern

Klaviyo

Triple Whale

Google Analytics 4

Altri eventi che vale la pena tracciare

Cose da fare bene

Testarlo

Dove andare adesso

​Il pattern

​Klaviyo

​Triple Whale

​Google Analytics 4

​Altri eventi che vale la pena tracciare

​Cose da fare bene

​Testarlo

​Dove andare adesso

Il pattern

Klaviyo

Triple Whale

Google Analytics 4

Altri eventi che vale la pena tracciare

Cose da fare bene

Testarlo

Dove andare adesso