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 (conferma d'ordine Flusso)
- Iniziato pagamento (flusso di pagamento 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.
1. Crea il tuo Flusso
Inizia creando il tuo Flusso:
- Si rechi nella scheda Flussi di Klaviyo.
- Clicca su Crea Flusso.
- Clicca su Costruisci il tuo.
- Dai un nome al tuo Flusso e clicca su Crea Flusso.
- In Seleziona un trigger, clicca su La tua metrica.
- Seleziona da quale integrazione viene inviata la metrica di attivazione (ad esempio, Shopify).
- 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.
- Clicchi su Fine.
- Trascini e rilasci un'azione Email nel flusso.
2. Aggiungi una tabella dinamica alla tua e-mail di Flusso
Successivamente, aggiungi una tabella dinamica alla tua e-mail di Flusso:
- Clicchi sul blocco e-mail che ha aggiunto al suo flusso nell'ultima sezione.
- Accanto a modello, clicca su Seleziona modello.
- Scelga un modello da utilizzare come base.
- Trascini un blocco tabella nella sua e-mail.
- Clicca su Stili > Dinamico per convertire la tabella in un blocco dinamico. Vedrai apparire due campi: raccolta di righe e Alias di righe, che dovrai compilare nei passi 3 e 4.
- Ritorni alla scheda Contenuto per regolare i tipi di colonna.
- In genere, un messaggio di carrello abbandonato mostra le immagini degli articoli abbandonati sulla sinistra e i dettagli dell'articolo sulla destra. Clicca sul selettore di riga a sinistra o a destra, poi clicca su Testo o Immagine per cambiare il tipo di cella.
3. Identifica la tua raccolta di righe
In questo passaggio, aggiungerà il nome dell'array che intende iterare al campo di raccolta di righe. Per trovare il nome del suo array:
- Clicca su Anteprima & test.
- Scorri i dati di anteprima del tuo evento fino a trovare un array che contenga le informazioni di cui hai bisogno.
- Se nessuno ha ancora completato l'azione di attivazione del Flusso, non ci saranno dati di anteprima disponibili per il Flusso. Puoi navigare nel tuo sito per compiere l'azione (ad esempio, aggiungere articoli al carrello e avviare un pagamento) e poi l'evento verrà visualizzato nelle opzioni di anteprima di Klaviyo'.
- In questo esempio, ci sono due array che contengono informazioni sugli articoli del negozio:
- 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 di righe, 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 }}
- 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.
- 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. - Utilizzi tutto ciò che è fino a (ma escluso) il punto e il numero alla fine di questa parte della variabile come raccolta di righe. In questo esempio, l'impostazione appropriata per il campo di raccolta di righe è
event.extra.line_items.
Imposta il contenuto di fallback (opzionale)
Il contenuto di riserva apparirà se non ci sono dati nella raccolta 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.
4. Scegli 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 Raccolta di righe e Alias di righe, è pronto per iniziare a costruire la sua tabella.
5. Aggiungi 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:
- 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.
- Incolli la variabile evento completa dalla modale di anteprima (ad esempio,
{{ event.extra.line_items.0.title }}). - Sostituisci la raccolta di righe all'interno della variabile (cioè il testo che hai usato per la raccolta di righe) e il punto e il numero che seguono con l'alias selezionato nell'ultimo passaggio (ad esempio, item), mantenendo le parentesi circostanti. In questo esempio,
{{ event.extra.line_items.0.title }}diventa {{ item.title }}.
- Visualizza l'anteprima dell'e-mail per assicurarti che il titolo sia visibile. Se non appare, ricontrolla l'ortografia, la capitalizzazione e la formattazione del testo, così come le impostazioni della scheda Stili, per assicurarti 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:
- Trovi la variabile URL del prodotto nei dettagli del suo evento.
- Sostituisca la raccolta 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 }}).
- Evidenzia la variabile completa per il titolo dell'articolo (ad esempio,
{{ item.title }}). - Clicchi sull'icona del link e incolli la sua variabile URL nel campo URL.
Variabili URL di prodotto comuni per integrazione
BigCommerce
Variabile evento: {{ event.extra.items.0.product.url }}
Tag finale: {{ organization.url }}{{ item.product.url }}
Magento 1
Variabile evento: {{ event.extra.line_items.0.product.key }}
Tag finale: {{ organization.url }}{{ item.product.key }}
Magento 2
Variabile evento: {{ event.Items.0.Product.FullURL }}
Tag finale: {{ item.Product.FullURL }}
Shopify
Variabile evento: {{ event.extra.line_items.0.product.handle }}
Tag finale: {{ organization.url }}prodotti/{{ item.product.handle }}
WooCommerce
Variabile evento: {{ event.extra.Items.0.URL }}
Tag finale: {{ item.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 %}
6. Aggiungi 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.
- Una volta ottenuta questa variabile, si diriga alla colonna in cui desidera visualizzare l'immagine (la colonna sinistra, in questo caso).
- Clicchi su Immagine sotto il contenuto della cella, se attualmente è impostato su Testo.
- Clicca su Seleziona immagine.
- Nella scheda Immagine dinamica, incolla la tua variabile immagine nel campo Variabile dinamica o URL dinamico.
- Inserisca la variabile evento immagine personalizzata,
{{ item.product.images.0.src }}. - Clicca su Salva.
- Aggiungi la variabile URL del prodotto del punto cinque nel campo Indirizzo del link in modo che l'immagine sia cliccabile.
- Imposti una larghezza massima per l'immagine, iniziando con 250-300 e regolando in base alle esigenze.
- 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.
7. Anteprima dell'e-mail
Dopo aver completato i passaggi sopra descritti, i modelli di e-mail dovrebbero avere un aspetto simile a quello qui sotto quando vengono visualizzati in anteprima.
Per vedere come apparirebbe con un contenuto dinamico e per assicurarti che i link funzionino correttamente, clicca su Anteprima & test. Se ci sono errori, controlla l'ortografia e la struttura delle variabili, nonché la scheda Stili del blocco.
Può utilizzare questi stessi concetti per creare blocchi dinamici aggiuntivi per i flussi attivati in base a metriche diverse.
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 raccolta di righe o un alias di righe, e può utilizzare variabili non modificate direttamente dai dati dell'evento.
- Si rechi nella scheda Flussi di Klaviyo.
- Clicca su Crea Flusso.
- Clicca su Costruisci il tuo.
- Dai un nome al tuo Flusso e clicca su Crea Flusso.
- In Seleziona un trigger, clicca su La tua metrica.
- Scelga una metrica relativa ad un singolo prodotto, come ad esempio Prodotto visto o Aggiunto al carrello.
- Clicchi su Fine.
- Trascini e rilasci un'azione Email nel flusso.
- Accanto a modello, clicca su Seleziona modello.
- Selezioni un modello da utilizzare come base.
- Trascini un blocco tabella nella sua e-mail.
- Per impostazione predefinita, il campo dati è impostato su Statico in Stili; non modificare questa impostazione.
- Clicchi su Anteprima & test per vedere le variabili disponibili per il suo messaggio. Clicchi sulla variabile URL dell'immagine per copiarla.
- Utilizzando i campi Selettore cella e Contenuto cella, imposta la cella di sinistra in modo che utilizzi il tipo di cella Immagine.
- Clicchi su Seleziona immagine.
- Selezionare Immagine dinamica.
- Incolli la variabile URL dell'immagine che ha copiato nel campo Variabile dinamica o URL dinamico.
- Clicchi su Salva.
- Impostate la cella di destra in modo che utilizzi il tipo di cella Testo.
- Copi le variabili che desidera visualizzare (ad esempio, titolo del prodotto, prezzo del prodotto) e le incolli nella cella di testo.
- Aggiunga ulteriori blocchi, come un pulsante CTA per tornare al carrello, e stili l'e-mail come desidera.
- Quando ha finito, clicchi su Esci.
Risorse aggiuntive
- Come creare un flusso di carrello abbandonato
Scopri come impostare un flusso di carrello abbandonato in Klaviyo per aumentare le entrate del tuo e-commerce e personalizzare le comunicazioni con i tuoi clienti.
- Documentazione sulla personalizzazione dei messaggi
Scopri come utilizzare le variabili di personalizzazione (o tag) di Klaviyo per personalizzare l'esperienza dei clienti.
- Come visualizzare i prodotti in verticale nelle e-mail
Impari a visualizzare i prodotti nel carrello abbandonato e nei flussi di conferma dell'ordine in verticale (cioè con un'immagine sopra le informazioni del prodotto, anziché accanto).
- Applica i concetti di logica di programmazione per costruire messaggi più personalizzati