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

Cosa imparerai

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

L' evento Aggiunto al carrello differisce dall'evento Klaviyo Pagamento avviato. L'evento Pagamento avviato 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 continua a pagare. Questo avviene più avanti nel funnel, mentre Aggiunto al carrello 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 Aggiunto al carrello funzioni correttamente, assicurati di aver già abilitato il tracciamento sul sito di Klaviyo (compreso il tracciamento del prodotto visualizzato).
• Tieni presente che l'evento Aggiunto al carrello traccia solo gli utenti precedentemente cookizzati da Klaviyo.

Crea l'evento "Aggiunto al carrello"

Segui questi tre passaggi per creare l'evento Aggiunto al carrello: 

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 Negozio online > Temi.
2. Cerca il tuo tema e clicca su Personalizza.
3. Nella parte in alto della pagina, clicca sul menu a discesa Pagina iniziale.
4. Seleziona Prodotti > Prodotto predefinito per accedere alla pagina del prodotto predefinito.
5. Clicca su Aggiungi sezione nella barra laterale sinistra e poi seleziona Liquid personalizzato.
6. Incolla lo snippet nella casella.
7. Clicca su Salva in alto a destra.
8. Nella barra laterale sinistra, il tuo nuovo blocco Liquid personalizzato per Aggiunto al carrello dovrebbe apparire automaticamente sotto le altre sezioni della pagina.
   • Se vuoi spostare il blocco Aggiunto al carrello, 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 Negozio online > Temi.
2. Cerca il tuo tema e clicca su 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 Aggiunto al carrello 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 "Aggiunto al carrello"

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 Aggiunto al carrello 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 Aggiunto al carrello 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. Aggiorna la visualizzazione della 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 Aggiunto al carrello è stato tracciato nel tuo feed di attività.

Hai problemi a tracciare l'evento "Aggiunto al carrello" con lo snippet fornito?

Se hai problemi a tracciare l'evento Aggiunto al carrello 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(= "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. Per 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 Aggiunto al carrello dopo aver provato queste diverse opzioni, potrebbe esserci un problema di identificazione del pulsante Aggiunto al carrello. In questo caso, contatta l'assistenza di Klaviyo.

Passaggio successivo: abilita il flusso "Aggiunto al carrello" abbandonato

Il flusso di carrello abbandonato predefinito di Klaviyo viene attivato dall'evento Pagamento avviato, mentre il flusso di carrello abbandonato Aggiunto al carrello si rivolge ad acquirenti occasionali che devono ancora iniziare il pagamento.

Per attivare 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 per prodotto aggiunto al carrello o carrello abbandonato. Ci sono due opzioni: solo e-mail oppure e-mail e SMS.
   
4. Se hai creato l'evento Aggiunto al carrello, 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 "Aggiunto al carrello" 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:
  
  • Pagamento avviato (Buy with Prime) zero volte dall'inizio di questo flusso E
  • Ordine effettuato (Buy with Prime) zero volte dall'avvio di questo flusso.

Risultato finale 

Alla fine della procedura avrai creato e testato un evento Aggiunto al carrello di Shopify e attivato un flusso Aggiunto al carrello abbandonato. 

Risorse aggiuntive

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