Come creare un evento "Aggiunto al carrello" per BigCommerce

Imparerai

Scopra come creare un evento Added to Cart per BigCommerce, che tiene traccia di quando un cliente aggiunge un articolo al suo carrello e può attivare un flusso di carrello abbandonato. Gli eventi Added to Cart non vengono tracciati automaticamente quando si integra con BigCommerce; deve prima aggiungere (e potenzialmente modificare) uno snippet JavaScript (incluso in questa guida) ai file del suo tema BigCommerce.

• Non è necessario creare l'evento Added to Cart per inviare un flusso di carrello abbandonato; il flusso di carrello abbandonato Added to Cart è separato dal flusso di carrello abbandonato standard, che viene attivato da Started Checkout. 
• L'integrazione di Klaviyo con BigCommerce tiene già traccia dell'evento Started Checkout, quando un cliente inserisce la propria e-mail durante il processo di checkout, dopo aver aggiunto uno o più articoli al carrello. 

Prima di iniziare

L'evento Aggiunto al carrello viene tracciato solo per gli utenti che sono stati precedentemente selezionati da Klaviyo. 

Per far sì che l'evento Aggiunto al carrello funzioni correttamente, è necessario che sia già installato il monitoraggio del prodotto visualizzato. In genere, i clienti di Klaviyo lo installano durante il processo di integrazione con BigCommerce e le istruzioni possono essere trovate nel nostro articolo sull'integrazione. 

Aggiunga lo snippet

1. Apra l'amministrazione di BigCommerce e si rechi su Storefront > I miei temi.
2. Trovi il suo tema attuale e clicchi sul menu a tendina Impostazioni avanzate.
3. Cerchi il file product.html e faccia clic per aprirlo.
4. Incolli lo snippet sottostante direttamente sotto lo snippet Klaviyo Viewed Product.

   <script text="text/javascript"> 
   //Inizializza l'oggetto Klaviyo immediatamente al caricamento della pagina
   !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]=argomenti[w];var t="function"==typeof o[o.length-1]?o.pop():void 0,e=new Promise((function(n){finestra._klOnsite.push([i].concat(o,[function(i){t&&t(i),n(i)}]))});return e}}})}catch(n){finestra.klaviyo=finestra.klaviyo||[],finestra.klaviyo.push=funzione(){var n;(n=finestra._klSito).push.apply(n,argomenti)}}}}(); </script>
   <script text="text/javascript">
   /Aggiungi al carrello
   var klaviyo = window.klaviyo || [];
   document.getElementById("form-action-addToCart").addEventListener('click',function (){
      klaviyo.track("Added to Cart", item);
   });
   </script>

5. Successivamente, verifichi se deve modificare il suo snippet. Per farlo, dovrà controllare l'ID del pulsante "Aggiungi al carrello" sul suo sito e verificare se corrisponde alla variabile "Aggiungi al carrello" evidenziata nello snippet qui sotto, il cui valore predefinito è form-action-addToCart.
   
6. Per verificare l'ID del pulsante, apra una delle pagine di prodotto del suo sito, faccia clic con il pulsante destro del mouse sul pulsante "Aggiungi al carrello" e selezioni Ispezione.
   
7. 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.
   
8. L'ID del pulsante nella pagina qui mostrata corrisponde a form-action-addToCart, quindi non è necessario apportare modifiche.
   • Se l'ID del pulsante "Aggiungi al carrello" sul suo sito non è form-action-addToCart, dovrà cambiare il testo della variabile all'interno delle virgolette per farlo corrispondere all'ID del pulsante.
9. Se il suo codice sorgente non mostra l'ID di un pulsante, passi alla prossima sezione e apprenda come utilizzare uno snippet alternativo con la notazione di classe invece di quella di pulsante. 
10. Quando ha finito, salvi il suo file product.html. 

Ha finito di aggiungere lo snippet e ora terrà traccia dell'evento Added to Cart. 

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

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

Se il suo pulsante "Aggiungi al carrello" non ha un ID pulsante (che può determinare seguendo i passi della sezione precedente) e utilizza invece una notazione di classe, deve utilizzare lo snippet di codice alternativo qui sotto per attivare l'evento Aggiunto al carrello. 

1. Se il suo pulsante è definito dalla notazione di classe, incolli il seguente snippet alternativo in fondo al suo file product.html:

   <script text="text/javascript"> 
   //Inizializza l'oggetto Klaviyo immediatamente al caricamento della pagina
   !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]=argomenti[w];var t="function"==typeof o[o.length-1]?o.pop():void 0,e=new Promise((function(n){finestra._klOnsite.push([i].concat(o,[function(i){t&&t(i),n(i)}]))});return e}}})}catch(n){finestra.klaviyo=finestra.klaviyo||[],finestra.klaviyo.push=funzione(){var n;(n=finestra._klSito).push.apply(n,argomenti)}}}}(); </script>
   <script text="text/javascript">
   /Prodotto visualizzato
   var klaviyo = window.klaviyo || [];
   var classname = document.getElementsByClassName("add-to-cart");
   var addToCart = function() {
      klaviyo.track("Added to Cart", item);
   }; 
   per (var i = 0; i < classname.length; i++) {
      classname[i].addEventListener('click', addToCart, false);
   }
   </script>
   

2. Probabilmente questo codice dovrà essere modificato con il nome della sua classe. Confronti il nome della classe del suo pulsante tra le virgolette, evidenziato nell'esempio seguente, con il contenuto tra le parentesi dopo getElementsByClassName nel frammento di codice precedente. Per 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, cambi lo snippet di codice per riflettere il nome della classe del suo pulsante.
3. Per esempio, il frammento di codice qui sotto è stato modificato con il valore classname btn product-form_cart-submit btn-secondary-accent circondato da doppie virgolette.
   
4. Salvi il suo file product.html

Una volta salvato, ha finito di aggiungere lo snippet e può ora tracciare l'evento Added to Cart. 

Risoluzione dei problemi del suo snippet "Added to Cart"

Dopo aver aggiunto lo snippet, dovrebbe osservare il pulsante "Add to Cart'' e tracciare un evento Added to Cart ogni volta che un visitatore abilitato fa clic su questo pulsante. 

Questo evento funziona in modo simile all'evento Prodotto visto. Ogni articolo aggiunto al carrello innesca un nuovo evento. Può visualizzare questi eventi da:

1. Navigazione in Analytics > Metriche in Klaviyo
2. Ricerca dell'evento
3. Cliccando su Feed attività
   
   

Se non vede gli eventi Aggiunti al carrello nel suo account, provi a seguire:

• Si assicuri che il suo Klaviyo.js (noto anche come snippet Active on Site) sia funzionante, il che è necessario affinché Added to Cart funzioni correttamente. Questo dovrebbe essere stato aggiunto al suo sito automaticamente al momento dell'integrazione con Klaviyo, ma può verificare che funzioni seguendo i passaggi della sezione Conferma dell'installazione del tracking onsite del nostro articolo sull'integrazione di BigCommerce.
• Verifichi che il tracciamento del prodotto visualizzato funzioni, il che è necessario anche per il corretto funzionamento di Aggiungi al carrello . Questo snippet viene aggiunto manualmente e può apprendere come aggiungerlo e testarlo nella sezione Prodotto visto del nostro articolo sull'integrazione. 

Il flusso "Aggiunto al carrello" carrello abbandonato

Quando crea un flusso di carrelli abbandonati (utilizzando Added to Cart o Started Checkout), può sfruttare gli SMS di Klaviyo oltre alle e-mail. Per motivi di conformità, si assicuri di inviare un solo SMS nel suo flusso e se utilizza più tipi di flussi di carrelli abbandonati, si assicuri di utilizzare gli SMS solo in uno di essi. 

Nella sezione Essentials della libreria, troverà il flusso standard di sollecito del carrello abbandonato. Questo flusso viene attivato dall'evento Checkout avviato.

Per iniziare a creare un flusso di carrelli abbandonati utilizzando l'evento Added to Cart, le consigliamo di utilizzare il flusso precostituito disponibile nella Libreria dei flussi di Klaviyo, che ha i filtri del flusso appropriati già impostati. Questo flusso tende a rivolgersi a potenziali acquirenti più occasionali che devono ancora iniziare il checkout.

Il flusso del carrello abbandonato attivato dall'evento Added to Cart si trova nella sezione "Prevenire le vendite perse". 

Se ha implementato lo snippet Added to Cart di BigCommerce, questo flusso sarà pronto per l'uso, con tutti i filtri raccomandati e i contenuti dinamici delle e-mail, pronti ad alimentare le e-mail personalizzate di follow-up del carrello.

Stai utilizzando Amazon Buy con Prime?

Se utilizza Buy with Prime per gestire il pagamento e l'evasione dei prodotti del suo negozio, dovrebbe farlo:

• Integrare Buy with Prime con Klaviyo per portare i dati di Buy with Prime nel suo account Klaviyo.
• Per il suo flusso "Added to Cart" abbandonato, aggiunga i seguenti filtri al flusso per escludere i clienti che hanno iniziato il checkout o hanno effettuato acquisti tramite Buy with Prime dal ricevere messaggi errati:
  
  • Ha avviato il Checkout (Acquisto con Prime) zero volte dall'inizio di questo flusso E
  • Effettuato ordine (Acquisto con Prime) zero volte dall'avvio di questo flusso.

Risorse aggiuntive

• Creare un flusso di carrelli abbandonati
• Riferimento dati BigCommerce