Come costruire blocchi dinamici in un flusso e-mail

Imparerai

Scopra come utilizzare i blocchi di tabelle dinamiche per aggiungere informazioni sui prodotti e su altri eventi ai suoi flussi metrici. In questo articolo, imparerà a creare un blocco dinamico utilizzando l'esempio di un promemoria per il carrello abbandonato che mostra i prodotti che sono stati lasciati.

Se utilizza una delle integrazioni ecommerce precostituite di Klaviyo (ad esempio, Shopify, BigCommerce, Magento o WooCommerce), non deve creare questi blocchi manualmente. Utilizzi invece la libreria dei flussi per trovare email di flusso precostituite e completamente funzionali da utilizzare come modelli. 

All'interno di un flusso con attivazione metrica, può personalizzare il contenuto delle sue e-mail in base all'evento che attiva il flusso. Per esempio, se qualcuno inizia un checkout, può includere immagini e prezzi dei prodotti all'interno di un'e-mail di carrello abbandonato, per incoraggiare i destinatari a tornare al carrello e concludere l'acquisto. Il blocco della tabella dinamica si ripeterà automaticamente con le informazioni specificate per ogni articolo del carrello.

Prima di iniziare

Prima di lanciarsi, si assicuri di avere i dati dell'evento da utilizzare. Si rechi su Analytics > Metrics per assicurarsi che l'evento esista in Klaviyo.

Se non ha familiarità con l'utilizzo di dati di eventi o profili nelle e-mail, come primo passo consulti la nostra guida alla personalizzazione dei messaggi. 

Sarà utile anche comprendere i tipi di dati in Klaviyo, in particolare gli elenchi (cioè gli array). Un array è un modo per memorizzare più dati strutturati allo stesso modo. Per esempio, gli articoli del carrello di un cliente sono memorizzati come un array all'interno di un evento Checkout Started. L'array items contiene una voce per ogni articolo ordinato e ogni voce contiene i dettagli di quell'articolo (ad esempio, il nome dell'articolo, l'URL dell'immagine, la quantità, la taglia, il colore, ecc.) 

Quali tipi di flussi possono utilizzare i blocchi di tabelle dinamiche? 

I blocchi di tabelle dinamiche contengono informazioni su uno o più prodotti con cui il cliente ha interagito in qualche modo (ad esempio, acquistati o lasciati nel carrello). Questi blocchi di tabelle sono utili per gli eventi che potrebbero contenere un numero diverso di prodotti, a seconda dell'azione del cliente. I blocchi di tabelle dinamiche sono utili per i flussi attivati da questi eventi: 

• Ordine effettuato (flusso di conferma dell'ordine)
• Inizio del pagamento (flusso del carrello abbandonato) 
• Ordine evaso (flusso di conferma della spedizione) 
• Ordine annullato (conferma di annullamento) 
• Qualsiasi altro evento che contenga l'elenco di uno o più prodotti.

I blocchi di tabelle dinamiche non sono utili se il suo evento contiene sempre un solo prodotto. Gli eventi sottostanti richiedono invece blocchi di tabelle statiche. 

• Aggiunto al carrello (flusso di pagamento abbandonato)
• Prodotto visualizzato (flusso di abbandono della navigazione) 

Scopra come creare un blocco di tabelle statiche per gli eventi di un singolo prodotto. 

Passo 1: creare il suo flusso

1. Si rechi nella scheda Flussi di Klaviyo.
2. Clicchi su Crea flusso. 
3. Clicchi su Crea da zero. 
4. Dare un nome al flusso e cliccare su Crea flusso. 
5. In Impostazione trigger, faccia clic su Metrica. 
6. Scelga l'evento che deve innescare il suo flusso. In questo esempio, utilizzeremo l'evento Checkout Started. Questo assicura che abbiamo accesso ai dati degli eventi necessari per costruire un blocco di carrello abbandonato.
7. Clicchi su Fine. 
8. Trascini e rilasci un'azione Email nel flusso.

Passo 2: aggiungere una tabella dinamica

1. Clicchi sul blocco e-mail che ha aggiunto al suo flusso nell'ultima sezione. 
2. Clicchi su Configura contenuto. 
3. Scelga il Drag and Drop. 
4. Scelga un modello da utilizzare come base.
5. Trascini un blocco tabella nella sua e-mail.
6. Clicchi su Impostazioni tabella > Dinamica per convertire la tabella in un blocco dinamico. Vedrà apparire due campi: Collezione di righe e Alias di righe; completeremo questi campi nei prossimi passi.
7. Ritorni alla scheda Contenuto per regolare i tipi di colonna.
8. In genere, un messaggio di carrello abbandonato mostra le immagini degli articoli abbandonati a sinistra e i dettagli dell'articolo a destra. Clicchi sul selettore di riga sinistro o destro, quindi clicchi su Testo o Immagine per cambiare il tipo di cella.
   

Passo 3: identificare la sua collezione di file

In questo passaggio, aggiungerà il nome dell'array che intende iterare al campo di raccolta Row. Per trovare il nome del suo array:

1. Clicchi su Anteprima e faccia il test.
2. Clicchi su Evento. 
3. Selezioni l'evento che innesca questo flusso (ad esempio, Checkout Started).
4. Scorra i dati di anteprima del suo evento fino a trovare un array che contiene le informazioni di cui ha bisogno. Può utilizzare le icone a forma di freccia sulla sinistra dei dati per eliminare le sezioni non necessarie e facilitare la navigazione.
   Se nessuno ha ancora completato l'azione di attivazione del flusso, non ci saranno dati di anteprima disponibili per il flusso. Può navigare sul suo sito per compiere l'azione (ad esempio, aggiungere articoli al carrello e avviare il pagamento), e poi l'evento verrà visualizzato nelle opzioni di anteprima di Klaviyo.
   
   In questo esempio, ci sono 2 array che memorizzano le informazioni sugli articoli: 
   
   • Articoli
     Un array di primo livello contenente un semplice elenco del nome di ciascun elemento.
   • line_items,
     Un array annidato all'interno dell'array extra contenente maggiori dettagli, tra cui il titolo, il prezzo, la SKU e l'URL dell'immagine di ciascun articolo.
     

   Vorrà utilizzare l'array più dettagliato, line_items, poiché contiene le informazioni dettagliate necessarie per la visualizzazione nel blocco della tabella ripetuta. Per trovare la variabile appropriata da impostare nel campo di raccolta Riga, selezioni due variabili all'interno della prima sezione dell'array e le copi. In questo esempio, copi i tag per prezzo_variante e titolo. Ecco i due tag di questo esempio: 

   {{ event.extra.line_items.0.variant_price }}

   {{ event.extra.line_items.0.title }}

5. Ignori le parentesi graffe e osservi le variabili al loro interno. Noti che l'inizio di entrambe le variabili è lo stesso: event.extra.line_items.0. 

6. Utilizzi tutto ciò che è fino a (ma escluso) il punto e il numero alla fine di questa parte della variabile come collezione di righe. In questo esempio, l'impostazione appropriata per il campo di raccolta Row è event.extra.line_items.

Opzionale: impostare il contenuto di fallback

Il contenuto di riserva apparirà se non ci sono dati nella collezione di righe da lei selezionata. Questo è necessario solo quando costruisce una tabella basata su dati che non appaiono in modo coerente all'interno dell'evento trigger. Per aggiungere un contenuto di riserva, selezioni l'opzione Contenuto di riserva e aggiunga un contenuto (ad esempio, un testo o un'immagine) al campo che appare. 

Passo 4: scegliere un alias di riga

Il suo alias di riga può essere qualsiasi testo che desidera utilizzare (senza caratteri speciali o spazi). Utilizzerà questo alias all'interno del suo blocco di tabelle dinamiche per identificare le variabili che devono essere estratte dall'array selezionato in precedenza. È utile scegliere un alias semplice ma descrittivo, in modo che sia facile da ricordare. 

In questo esempio, il blocco della tabella dinamica si ripete su un elenco di articoli di un carrello abbandonato, quindi item è un buon alias da utilizzare. Se il suo blocco si ripete su un elenco di post del blog, potrebbe utilizzare post come alias.

Può utilizzare qualsiasi alias che desidera; si assicuri solo di utilizzare coerentemente tale alias nelle variabili del suo array (come indicato nei passi successivi). 

Una volta compilati i campi Collezione di righe e Alias di righe, è pronto per iniziare a costruire la sua tabella. 

Passo 5: aggiungere i dettagli dinamici del prodotto

Dopo aver impostato la fonte di dati, può utilizzare i tag per aggiungere del testo nella sua e-mail. Poiché questa e-mail riguarda un flusso di carrello abbandonato, è importante mostrare il nome del prodotto abbandonato, insieme ad altri dettagli come il prezzo e il link per l'acquisto.

Per inserire il titolo del prodotto nel suo blocco:

1. Si sposti su una delle colonne della tabella. Se desidera un'immagine nella prima colonna e il testo nella seconda, faccia clic sul selettore di colonna a destra della sezione Contenuto del blocco.
2. Incolli la variabile evento completa dalla modale di anteprima (ad esempio, {{ event.extra.line_items.0.title }}).
3. Sostituisca la collezione di righe all'interno della variabile (cioè il testo che ha utilizzato per la collezione Row) e il punto e il numero seguenti con l'alias selezionato nell'ultimo passaggio (ad esempio, item), mantenendo le parentesi circostanti. Per questo esempio, {{ event.extra.line_items.0.title }} diventa {{ item.title }}.
   
4. Visualizzi l'anteprima dell'e-mail per assicurarsi che il titolo appaia. Se non appare, ricontrolli l'ortografia, la capitalizzazione e la formattazione del testo, così come le sue impostazioni nella scheda Impostazioni tabella, per assicurarsi che non ci siano errori.

Ripeta gli stessi passaggi per aggiungere i dettagli di altri articoli. 

Collegamento ipertestuale del titolo di un prodotto

Per aggiungere un collegamento ipertestuale al titolo del prodotto: 

1. Trovi la variabile URL del prodotto nei dettagli del suo evento.
2. Sostituisca la collezione di righe e il numero con il suo alias di riga, come per la variabile precedente (ad esempio, {{ event.extra.line_items.url }} diventa {{ item.url }}). 
3. Evidenzia la variabile completa per il titolo dell'articolo (ad esempio, {{ item.title }}). 
4. Clicchi sull'icona del link e incolli la sua variabile URL nel campo URL.

Considerazioni sulle variabili valutarie

Se il prezzo dell'articolo viene passato come numero nei dettagli dell'evento (senza simbolo di valuta), utilizzi il tag currency_format per applicare la formattazione della valuta. Per applicare questo tag, sostituisca nome_variabile nel codice sottostante con la variabile prezzo completa, escludendo le parentesi graffe dalla variabile originale: 

{% currency_format variable_name %}

Quindi, la sua variabile finale potrebbe assomigliare a questa: 

{% currency_format item.price %}

Passo 6: aggiungere un'immagine

Per inserire un'immagine dinamica, trovi la variabile evento per l'immagine nell'anteprima modale. Spesso, questa variabile è elencata sotto image, img o src, ma dipende dalla sua integrazione. Qui è sotto src: {{ event.extra.line_items.0.product.images.0.src }}. Applichi a questa variabile le stesse regolazioni descritte nel passaggio cinque (sostituendo event.extra.line_items.0 con l'articolo). Si tratta di un array di variabili evento all'interno di event.extra.line_items, che contiene le immagini di questo articolo specifico.

1. Una volta ottenuta questa variabile, si diriga alla colonna in cui desidera visualizzare l'immagine (la colonna sinistra, in questo caso).
2. Clicchi su Immagine sotto il contenuto della cella, se attualmente è impostato su Testo.
3. Clicchi su Aggiungi immagine dinamica / Sfoglia immagine.
4. Nella scheda Immagine dinamica, incolli la sua variabile immagine nel campo Variabile dinamica o URL dinamico.
   
5. Inserisca la variabile evento immagine personalizzata, {{ item.product.images.0.src }}.
6. Clicca su Salva.
7. Aggiunga la variabile URL del prodotto dal passaggio cinque nel campo Indirizzo link, in modo che l'immagine sia cliccabile.
8. Imposti una larghezza massima per l'immagine, iniziando con 250-300 e regolando in base alle esigenze.
9. Una volta terminate le modifiche, clicchi su Fine e visualizzi l'anteprima dell'e-mail per assicurarsi che appaia come previsto. Se l'immagine non appare, verifichi l'ortografia della variabile rispetto a quella presente nell'anteprima modale.

Passo 7: visualizzare l'anteprima dell'e-mail

Dopo aver completato i passaggi sopra descritti, il modello di e-mail dovrebbe essere simile a quello qui sotto.

Per vedere come apparirebbe con un contenuto dinamico e per assicurarsi che i link funzionino correttamente, faccia clic su Anteprima e prova. Se ci sono errori, controlli l'ortografia e la struttura delle sue variabili, nonché la scheda Impostazioni tabella. 

Può utilizzare questi stessi concetti per creare blocchi dinamici aggiuntivi per i flussi attivati in base a metriche diverse.

Sommario

Per ricapitolare, segua questi passaggi per costruire un blocco di tabelle dinamiche nel suo flusso e-mail:

1. Creare un flusso con innesco metrico.
2. Aggiunga un blocco tabella e lo imposti su Dinamico.
3. Utilizzi l'anteprima modale per identificare la sua collezione di file. 
4. Scelga un alias di fila.
5. Aggiunga dettagli dinamici sul prodotto regolando le variabili.
6. Aggiunga un'immagine dinamica.
7. Anteprima.

Creare un blocco di tabelle statiche per gli eventi di un singolo prodotto 

Se un evento può contenere un solo prodotto, utilizzi un blocco tabella statico. Per questi eventi, non è necessario impostare una collezione di righe o un alias di righe, e può utilizzare variabili non modificate direttamente dai dati dell'evento. 

1. Si rechi nella scheda Flussi di Klaviyo.
2. Clicchi su Crea flusso. 
3. Clicchi su Crea da zero. 
4. Dare un nome al flusso e cliccare su Crea flusso. 
5. In Impostazione trigger, faccia clic su Metrica. 
6. Scelga una metrica relativa ad un singolo prodotto, come ad esempio Prodotto visto o Aggiunto al carrello. 
7. Clicchi su Fine. 
8. Trascini e rilasci un'azione Email nel flusso.
9. Clicchi su Seleziona modello per scegliere un modello. 
10. Selezioni un modello da utilizzare come base.
11. Trascini un blocco tabella nella sua e-mail.
12. Per impostazione predefinita, il campo Dati tabella è impostato su Statico sotto Impostazioni tabella; non modifichi questa impostazione.
    
13. Clicchi su Anteprima & test per vedere le variabili disponibili per il suo messaggio. Clicchi sulla variabile URL dell'immagine per copiarla.
    
14. Utilizzando il selettore di celle e i campi Contenuto della cella, imposti la cella sinistra in modo che utilizzi il tipo di cella Immagine.
    
15. Clicchi su Seleziona immagine. 
16. Selezionare Immagine dinamica. 
17. Incolli la variabile URL dell'immagine che ha copiato nel campo Variabile dinamica o URL dinamico. 
18. Clicchi su Salva. 
19. Impostate la cella di destra in modo che utilizzi il tipo di cella Testo. 
20. Copi le variabili che desidera visualizzare (ad esempio, titolo del prodotto, prezzo del prodotto) e le incolli nella cella di testo.
    
21. Aggiunga ulteriori blocchi, come un pulsante CTA per tornare al carrello, e stili l'e-mail come desidera.
22. Quando ha finito, clicchi su Esci.

Risorse aggiuntive

• Come creare un flusso di carrello abbandonato
• Riferimento alla personalizzazione del messaggio
• Come visualizzare i prodotti in verticale nelle e-mail
• Corso: Applica i concetti di logica di programmazione per costruire messaggi più personalizzati