Come creare manualmente un evento "Added to Cart" per Shopify

Cosa imparerai

Scopri come creare manualmente un evento Added to Cart per Shopify e tracciare quando un cliente aggiunge un articolo al suo carrello, da utilizzare per attivare un flusso di carrello abbandonato. 

L'evento Added to Cart differisce dall'evento Checkout Started di Klaviyo. L'evento Checkout Started si attiva dopo che un cliente aggiunge uno o più articoli al suo carrello, inserisce la sua e-mail durante il processo di pagamento e passa al pagamento. Questo avviene più avanti nel funnel, mentre Added to Cart si attiva non appena un cliente aggiunge un articolo al suo carrello. 

Prima di iniziare

• Prima di continuare con questo articolo, leggi il nostro articolo Primi passi con Shopify per scoprire le istruzioni passo per passo sull'integrazione.
• Affinché l'evento Added to Cart funzioni correttamente, assicurati di aver già abilitato il tracciamento sul sito di Klaviyo (compreso il tracciamento del prodotto visualizzato).
• Tieni presente che l'evento Added to Cart traccia solo gli utenti precedentemente cookizzati da Klaviyo.

Crea l'evento "Added to Cart"

Segui questi tre passaggi per creare l'evento Added to Cart: 

1. Scegli dove posizionare lo snippet di codice.
2. Aggiungi lo snippet al tuo negozio.
3. Testa lo snippet di codice.

Dove devo incollare lo snippet?

Assicurati di incollare lo snippet sia nella tua pagina di prodotto predefinita, sia in tutte le altre pagine di prodotto.

Se il tuo negozio dispone di blocchi Liquid personalizzati, utilizzane uno per lo snippet 

1. In Shopify, vai in Online Store (Negozio online) > Themes (Temi).
2. Cerca il tuo tema e clicca su Customize (Personalizza).
3. Nella parte in alto della pagina, clicca sul menu a discesa Home Page (Pagina iniziale).
4. Seleziona Products (Prodotti) > Default product (Prodotto predefinito) per accedere alla pagina del prodotto predefinito.
5. Clicca su Add section (Aggiungi sezione) nella barra laterale sinistra e poi seleziona Custom Liquid (Liquid personalizzato).
6. Incolla lo snippet nella casella.
7. Clicca su Save (Salva) in alto a destra.
8. Nella barra laterale sinistra, il tuo nuovo blocco Liquid personalizzato per Added to Cart dovrebbe apparire automaticamente sotto le altre sezioni della pagina.
   • Se vuoi spostare il blocco Added to Cart, passa il mouse sul blocco e clicca sui sei punti per trascinarlo sotto le altre sezioni.
     
     

Se il tuo negozio non dispone di blocchi Liquid personalizzati, inserisci lo snippet nel tuo file theme.liquid

1. In Shopify, vai in Online Store (Negozio online) > Themes (Temi).
2. Cerca il tuo tema e clicca su Customize (Personalizza).
3. Clicca sui tre punti in alto e seleziona Modifica codice.
4. Apri il file theme.liquid.
5. Incolla lo snippet dopo tutti gli altri codici, prima del tag di chiusura </body >.
   
6. Sopra lo snippet, aggiungi il seguente tag di apertura: {% if product %}
   
7. Subito dopo lo snippet, aggiungi il seguente tag di chiusura: {% endif %}
8. Il tuo file dovrebbe avere questo aspetto:
   
9. Clicca su Salva.

Aggiungi lo snippet al tuo sito

Lo snippet Added to Cart dovrebbe funzionare per la maggior parte dei negozi Shopify.

Aggiungi lo snippet qui sotto al tuo negozio Shopify nella posizione stabilita in precedenza.

<script>
  window.addEventListener('load', function() {
  var _learnq = window._learnq || [];
  function addedToCart() {
   fetch(`${window.location.origin}/cart.js`)
   .then(res => res.clone().json().then(data => {
    var cart = {
      total_price: data.total_price/100,
      $value: data.total_price/100,
      total_discount: data.total_discount,
      original_total_price: data.original_total_price/100,
      items: data.items
    }
    if (item !== 'undefined') {
      cart = Object.assign(cart, item)
    }
    se (klAjax) {
       _learnq.push(['track', 'Added to Cart', cart]);
       klAjax = false;
      }
   }))
  };
  (function (ns, fetch) {
    ns.fetch = function() {
      const response = fetch.apply(this, arguments);
      response.then(res => {
        if (`${window.location.origin}/cart/add.js`
          .includes(res.url) && res.url !== '') {
              addedToCart()
        }
      });
 return response
     }
  }(window, window.fetch));
  var klAjax = true;
  var atcButtons = document.querySelectorAll("form[action*='/cart/add'] button[type='submit']");
  per (var i = 0; i < atcButtons.length; i++) { 
    atcButtons[i].addEventListener("click", function() {
      if (klAjax) {
        _learnq.push(['track', 'Added to Cart', item]);
        klAjax = false;
      }
    })
  }
  });
</script>

Una volta terminato, testa l'evento utilizzando le indicazioni riportate nella prossima sezione.

Testa l'evento "Added to Cart"

Klaviyo traccia solo gli "utenti conosciuti" o che sono stati tracciati dai cookie (cliccando su un'e-mail, compilando un modulo, ecc.). Per questo motivo, gli eventi Added to Cart potrebbero non comparire subito sul tuo account, come auspicabile. Per saperne di più su chi traccia Klaviyo, consulta il nostro articolo sul tracciamento sul sito. 

Per testare il tuo evento Added to Cart dovrai inserire manualmente il tuo indirizzo e-mail. Segui questi passaggi:

1. Vai sul tuo sito web.
2. Nella tua homepage, aggiungi quanto segue alla fine dell'URL, sostituendo testing.email@gmail.com con il tuo indirizzo e-mail:
   ?utm_email=testing.email@gmail.com
   
   
3. Ricarica la pagina.
4. Vai alla pagina di un prodotto sul tuo sito e clicca sul pulsante Aggiungi al carrello.
5. Cerca il tuo indirizzo e-mail in Klaviyo.
   

A questo punto dovresti vedere che è stato creato un profilo Klaviyo per te (se non ne esisteva già uno) e che l'evento Added to Cart è stato tracciato nel tuo feed di attività.

Hai problemi a tracciare l'evento "Added to Cart" con lo snippet fornito?

Se hai problemi a tracciare l'evento Added to Cart con lo snippet indicato, puoi provare i due snippet aggiuntivi che trovi qui sotto, convenzionalmente chiamati Snippet 2 e Snippet 3. Prima di testare un nuovo snippet, assicurati di rimuovere quello che non ha funzionato.

Scegli quale snippet di backup provare

Il tuo negozio utilizza un ID per identificare il pulsante Aggiungi al carrello? Se la risposta è sì, prova lo Snippet 2. Se il tuo pulsante Aggiungi al carrello è invece definito da una notazione di classe, utilizza lo Snippet 3. Ecco come scoprire se il tuo negozio utilizza un ID per identificare il pulsante o una notazione di classe:

1. 1. Apri una delle pagine dei prodotti del tuo sito. 
   2. Clicca con il tasto destro del mouse sul pulsante "Aggiungi al carrello" e seleziona Ispeziona.
   3. La console si aprirà, mostrando il codice sorgente del tuo pulsante "Aggiungi al carrello" nella scheda Elementi della console.
   4. Nella scheda Elementi, il tuo codice potrebbe assomigliare a questo:
      
   5. Tieni presente che il pulsante "Aggiungi al Carrello" non ha un ID (che includerebbe qualcosa come id = "button_ID_name"); è invece definito da una notazione di classe (class= "btn product-form_cart-submit btn–secondary-accent").

Snippet 2

Se il tuo pulsante Aggiungi al carrello è definito da un ID, aggiungi lo snippet qui sotto al tuo negozio Shopify nella posizione indicata nella sezione "Dove devo posizionare lo snippet?" insieme ai tag necessari.

<script type="text/javascript">
var _learnq = _learnq || [];
	document.getElementById("AddToCart").addEventListener('click',function (){
 		_learnq.push(['track', 'Added to Cart', item]);
	});
</script>

Probabilmente lo snippet dovrà essere modificato, visto che la variabile Aggiungi al carrello al suo interno deve corrispondere all'ID del pulsante utilizzato sul tuo sito.

La variabile Aggiungi al carrello, il cui nome predefinito è AddToCart, è evidenziata nello snippet sottostante:

La verifica dell'ID del pulsante richiede gli stessi passaggi necessari per verificare la presenza di un ID sul tuo sito: 

1. Apri una delle pagine dei prodotti presenti sul tuo sito.
2. Clicca con il tasto destro del mouse sul pulsante "Aggiungi al carrello" e seleziona Ispeziona.
3. La console si aprirà, mostrando il codice sorgente del tuo pulsante "Aggiungi al carrello". L'immagine seguente mostra l'ID del pulsante "Aggiungi al carrello" evidenziato nella console.
   
   L'ID del pulsante nella pagina qui mostrata(addToCart-product-template) è diverso dalla variabile nello snippet predefinito(AddToCart). 
4. Se non corrispondono, modifica lo snippet in modo che corrisponda all'ID del tuo pulsante. Lo snippet modificato del nostro esempio si presenta così:
   

Snippet 3

Se il pulsante Aggiungi al carrello è definito dalla notazione di classe, aggiungi lo snippet sottostante al tuo negozio Shopify nella posizione definita nella sezione "Dove devo posizionare lo snippet?" insieme ai tag necessari.

<script type="text/javascript">
var _learnq = _learnq || [];
  var classname = document.getElementsByClassName("add-to-cart");
var addToCart = function() {
_learnq.push(['track', 'Added to Cart', item]);
}; for (var i = 0; i < classname.length; i++) {
classname[i].addEventListener('click', addToCart, false);
}
</script>

Probabilmente dovrai modificare lo snippet, perché la variabile Aggiungi al carrello al suo interno deve corrispondere alla classe utilizzata sul tuo sito.

1. Apri una delle pagine dei prodotti presenti sul tuo sito.
2. Clicca con il tasto destro del mouse sul pulsante "Aggiungi al carrello" e seleziona Ispeziona.
3. La console si aprirà, mostrando il codice sorgente del tuo pulsante "Aggiungi al carrello". L'immagine seguente mostra la classe del pulsante "Aggiungi al carrello" evidenziata nella console.
   
4. Confronta il codice del pulsante tra le virgolette, evidenziato nell'esempio precedente, con il contenuto tra le parentesi dopo getElementsByClassName nel frammento di codice precedente. Ad esempio, la classe elencata nello screenshot è btn product-form_cart-submit btn--secondary-accent e la variabile elencata nello snippet è add-to-cart.
5. Se non corrispondono, modifica lo snippet in modo che corrisponda alla classe del pulsante. Lo snippet modificato del nostro esempio si presenta così:
   

Se stai riscontrando dei problemi nel tracciare l'evento Added to Cart dopo aver provato queste diverse opzioni, potrebbe esserci un problema di identificazione del pulsante Added to Cart. In questo caso, contatta l'assistenza di Klaviyo.

Passaggio successivo: abilita il flusso "Added to Cart" abbandonato

Il flusso di carrello abbandonato predefinito di Klaviyo viene attivato dall'evento Checkout Started, mentre il flusso di carrello abbandonato Added to Cart si rivolge ad acquirenti occasionali che devono ancora iniziare il pagamento.

Per abilitare questo flusso, ti consigliamo di utilizzare il flusso precostituito disponibile nella libreria di flussi di Klaviyo:

1. Vai nella libreria dei flussi di Klaviyo.
2. Clicca nella sezione dell'obiettivo "Previeni le vendite perse".
3. Seleziona un flusso di trigger in caso di prodotto aggiunto al carrello e promemoria di carrello abbandonato. Ci sono due opzioni: solo e-mail oppure e-mail e SMS.
   
4. Se hai creato l'evento Added to Cart, il flusso sarà pronto per essere usato con tutti i filtri raccomandati e il contenuto dinamico dell'e-mail. Potrai così generare la messaggistica personalizzata di follow-up del carrello.

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.

Risultato 

Alla fine della procedura avrai creato e testato un evento Added to Cart di Shopify e attivato un flusso Added to Cart abbandonato. 

Risorse aggiuntive

• Primi passi con il flusso del carrello abbandonato
• Documentazione sui dati di Shopify
• Risoluzione dei problemi dell'integrazione con Shopify