Come creare un evento "Aggiunto al carrello" per BigCommerce

Cosa imparerai

Scopri come creare un evento Aggiunto al carrello per BigCommerce che tiene traccia di quando un cliente aggiunge un articolo al carrello e può attivare un flusso di carrello abbandonato. Gli eventi Aggiunto al carrello non vengono tracciati automaticamente quando effettui l’integrazione con BigCommerce; devi prima aggiungere (ed eventualmente modificare) uno snippet JavaScript (incluso in questa guida) ai file del tema BigCommerce.

• Non devi creare l’evento Added to Cart per inviare un flusso per carrello abbandonato; il flusso per carrello abbandonato Added to Cart è separato dal flusso per carrello abbandonato standard, che viene attivato da Started Checkout.
• L’integrazione BigCommerce integrata di Klaviyo traccia già un evento Started Checkout quando una persona inserisce il proprio indirizzo e-mail durante la procedura di pagamento dopo aver aggiunto uno o più articoli al carrello.

Prima di iniziare

L'evento Aggiunto al carrello viene tracciato solo per gli utenti precedentemente cookizzati da Klaviyo.

Perché l'evento Aggiunto al carrello funzioni correttamente, devi avere già installato il tracciamento Prodotto visualizzato. In genere, i clienti Klaviyo lo installano durante la procedura di integrazione BigCommerce e le istruzioni si trovano nel nostro articolo sull’integrazione.

Aggiungi snippet

1. Apri l'area di amministrazione di BigCommerce e vai su Storefront > My Themes.
2. Trova il tuo tema attuale e fai clic sul menu a discesa Impostazioni avanzate.
3. Cerca il file product.html e clicca per aprirlo.
4. Incolla lo snippet qui sotto direttamente sotto lo snippet Klaviyo Viewed Product.

<script text="text/javascript"> 
//Initialize Klaviyo object immediately on page load
!function(){if(!window.klaviyo){window._klOnsite=window._klOnsite||[];try{window.klaviyo=new Proxy({},{get:function(n,i){return"push"===i?function(){var n;(n=window._klOnsite).push.apply(n,arguments)}:function(){for(var n=arguments.length,o=new Array(n),w=0;w<n;w++)o[w]=arguments[w];var t="function"==typeof o[o.length-1]?o.pop():void 0,e=new Promise((function(n){window._klOnsite.push([i].concat(o,[function(i){t&&t(i),n(i)}]))}));return e}}})}catch(n){window.klaviyo=window.klaviyo||[],window.klaviyo.push=function(){var n;(n=window._klOnsite).push.apply(n,arguments)}}}}(); </script>
<script text="text/javascript">
//Added to Cart
var klaviyo = window.klaviyo || [];
document.getElementById("form-action-addToCart").addEventListener('click',function (){
   klaviyo.track("Added to Cart", item);
});
</script>

1. Poi, verifica se devi modificare il tuo snippet. Per farlo, dovrai controllare l'ID del pulsante "Aggiungi al carrello" sul tuo sito e vedere se corrisponde alla variabile "Aggiungi al carrello" evidenziata nello snippet qui sotto, il cui valore predefinito è form-action-addToCart.
   

2. Per controllare l’ID del pulsante, apri una delle pagine prodotto del tuo sito, fai clic con il tasto destro sul pulsante “Aggiungi al carrello” e seleziona Ispeziona.
   

3. La console si aprirà, mostrando il codice sorgente del pulsante “Aggiungi al carrello”. L'immagine seguente mostra l'ID del pulsante "Aggiungi al carrello" evidenziato nella console.
   

4. L'ID del pulsante nella pagina mostrata qui corrisponde a form-action-addToCart, quindi non è necessario apportare modifiche.
   • Se l’ID del pulsante "Add to Cart" sul tuo sito non è form-action-addToCart, dovrai modificare il testo della variabile tra virgolette in modo che corrisponda all’ID del pulsante
5. Se nel tuo codice sorgente non compare l’ID di un pulsante, passa alla sezione successiva e scopri come usare uno snippet alternativo con notazione di classe invece della notazione di pulsante.
6. Quando hai finito, salva il file product.html.

Hai terminato di aggiungere lo snippet e ora monitorerai l'evento Aggiunto al carrello.

Snippet alternativo per il pulsante "Aggiungi al carrello" senza un ID pulsante

Per motivi di stile, alcuni siti usano una notazione di classe invece di un ID pulsante per i pulsanti "Aggiungi al carrello".

Se il pulsante “Add to Cart” non ha un ID pulsante (che puoi determinare seguendo i passaggi nella sezione precedente) e utilizza invece una notazione di classe, dovresti usare lo snippet di codice alternativo qui sotto per abilitare l'evento Added to Cart.

1. Se il tuo pulsante è definito tramite notazione di classe, incolla il seguente snippet alternativo in fondo al file product.html:

<script text="text/javascript"> 
//Initialize Klaviyo object immediately on page load
!function(){if(!window.klaviyo){window._klOnsite=window._klOnsite||[];try{window.klaviyo=new Proxy({},{get:function(n,i){return"push"===i?function(){var n;(n=window._klOnsite).push.apply(n,arguments)}:function(){for(var n=arguments.length,o=new Array(n),w=0;w<n;w++)o[w]=arguments[w];var t="function"==typeof o[o.length-1]?o.pop():void 0,e=new Promise((function(n){window._klOnsite.push([i].concat(o,[function(i){t&&t(i),n(i)}]))}));return e}}})}catch(n){window.klaviyo=window.klaviyo||[],window.klaviyo.push=function(){var n;(n=window._klOnsite).push.apply(n,arguments)}}}}(); </script>
<script text="text/javascript">
//Viewed Product
var klaviyo = window.klaviyo || [];var classname = document.getElementsByClassName("add-to-cart");var addToCart = function() {   klaviyo.track("Added to Cart", item);}; for (var i = 0; i < classname.length; i++) {   classname[i].addEventListener('click', addToCart, false);}
</script>

1. Probabilmente questo codice dovrà essere modificato con il nome della classe. Confronta il nome della classe del pulsante tra le virgolette, evidenziato nell'esempio seguente, con il contenuto tra le parentesi dopo getElementsByClassName nello snippet di codice sopra. Ad esempio, il nome della classe nello screenshot è btn product-form_cart-submit btn--secondary-accent e la classe nello snippet si chiama add-to-cart.
   
   

• Se questi due elementi non corrispondono, modifica lo snippet di codice in modo che rispecchi il nome della classe del pulsante.

2. Ad esempio, lo snippet di codice di seguito è stato modificato con il valore classname btn product-form_cart-submit btn--secondary-accent racchiuso tra virgolette doppie.
   

3. Salva il file product.html

Dopo aver salvato, hai completato l'aggiunta dello snippet e ora puoi tracciare l'evento Added to Cart.

Risoluzione dei problemi del tuo snippet "Added to Cart"

Dopo aver aggiunto lo snippet, dovrebbe monitorare il pulsante "Aggiungi al carrello'' e tracciare un evento Aggiunto al carrello ogni volta che un visitatore con cookie clicca su questo pulsante.

Questo evento funziona in modo simile all’evento Viewed Product. Ogni articolo che qualcuno aggiunge al carrello attiverà un nuovo evento. Puoi visualizzare questi eventi:

1. Vai a Analytics > Metriche in Klaviyo
2. Ricerca dell’evento
3. Cliccando su Feed di attività
   
   

Se non vedi eventi Aggiunto al carrello nel tuo account, prova quanto segue:

• Assicurati che Klaviyo.js (noto anche come snippet Active on Site) funzioni, perché è necessario affinché Aggiunto al carrello funzioni correttamente. Questo dovrebbe essere stato aggiunto al tuo sito automaticamente quando hai eseguito l’integrazione con Klaviyo, ma puoi verificare che funzioni seguendo i passaggi nella sezione sulla conferma dell’installazione del tracciamento onsite del nostro articolo sull’integrazione BigCommerce.
• Verifica che il tracciamento Prodotto visualizzato funzioni, cosa necessaria anche perché Aggiunto al carrello funzioni correttamente. Questo snippet viene aggiunto manualmente e puoi scoprire come aggiungerlo e testarlo nella sezione Prodotto visualizzato del nostro articolo sulle integrazioni.

Se continui a riscontrare problemi con il tuo snippet Added to Cart, potrebbe dipendere da un problema nell’identificazione del pulsante “Add to Cart”. In questo caso, contatta l'assistenza di Klaviyo.

Il flusso di carrello abbandonato "Aggiunto al carrello"

Quando crei un flusso per carrello abbandonato (usando Added to Cart o Started Checkout) puoi sfruttare Klaviyo SMS oltre alle e-mail. Per motivi di conformità, assicurati di inviare un solo SMS nel tuo flusso e, se utilizzi più tipi di flussi di carrello abbandonato, assicurati di usare SMS solo in uno di essi.

Nella sezione Essentials della libreria troverai il flusso standard di promemoria per carrello abbandonato. Questo flusso è attivato dall'evento Started Checkout.

Per iniziare con un flusso di carrello abbandonato usando l'evento Aggiunto al carrello, ti consigliamo di usare il flusso predefinito disponibile nella Libreria dei flussi di Klaviyo, che ha già configurati i filtri del flusso corretti. Questo flusso tende a rivolgersi a potenziali acquirenti più occasionali che non hanno ancora iniziato il checkout.

Il flusso del carrello abbandonato attivato dall'evento Aggiunto al carrello si trova nella sezione obiettivi "Evita perdite di vendite".

Se hai implementato lo snippet BigCommerce Added to Cart, questo flusso sarà pronto per essere usato con tutti i filtri raccomandati e il contenuto dinamico dell'e-mail pronto per alimentare e-mail di follow-up del carrello personalizzate.

Stai utilizzando Amazon Buy with Prime?

Se utilizzi Buy with Prime per gestire il pagamento e la spedizione dei prodotti del tuo negozio, segui questa procedura:

• Integra Buy with Prime con Klaviyo per trasferire i dati di Buy with Prime nel tuo account Klaviyo.
• Per il flusso "Added to Cart" abbandonato, inserisci i seguenti filtri al flusso per escludere i clienti che hanno iniziato il pagamento o hanno effettuato acquisti tramite Buy with Prime, evitando così che ricevano messaggi errati:
  
  • Checkout Started (Buy with Prime) zero volte dall'inizio di questo flusso E
  • Ordine Effettuato (Buy with Prime) zero volte dall'avvio di questo flusso.

Risorse aggiuntive