Come aggiungere immagini personalizzate su Iterable
Usa i campi di Handlebars che invii già a Iterable per disegnare il nome, i dettagli della prenotazione o il saldo su un'immagine per ogni utente.
Data di Prima Pubblicazione: Inserisci i dati che conservi in Iterable nelle immagini che vedono i tuoi utenti.
I modelli Iterable recuperano già i dati del profilo e degli eventi tramite Handlebars. Sendtric immagini personalizzate fanno un passo in più e inseriscono quei valori direttamente su un’immagine, con i tuoi caratteri e il tuo layout: un’immagine in stile carta d’imbarco con il percorso dell’utente, o una carta fedeltà con il suo saldo aggiornato. L’immagine viene creata quando apri l’e-mail.
L'editor Drag and Drop di Iterable ha un' opzione "Immagine dinamica" nel blocco "Immagine" che carica un'immagine da un URL contenente Handlebars, e la sua stessa documentazione rimanda a servizi di immagini esterni per creare tali immagini. Sendtric è uno di questi servizi: tu progetti l'immagine e il suo URL contiene i tuoi campi Iterable.
Cosa puoi fare con le immagini personalizzate su Iterable
- Riepiloghi del viaggio e delle prenotazioni: città di partenza, città di arrivo e data di un evento di prenotazione, tutte raccolte in un'unica immagine di viaggio. Guarda il testo personalizzato sulle immagini per alcuni esempi.
- Traguardi dell'app: "Hai completato 30 allenamenti" o "12 lezioni fatte" da un campo personalizzato del profilo, in un'e-mail di congratulazioni.
- Riepilogo fedeltà: punti, livello e nome dell’iscritto sull’immagine di una tessera in un’e-mail mensile sul percorso del cliente.
- Riepiloghi di fine anno: diverse statistiche dal profilo utente su un unico sfondo, un uso comune per le le email di riepilogo dell'anno.
| Caratteristiche dell'immagine | Free | Micro | Standard | Potere e grandi aziende |
|---|---|---|---|---|
| Livelli di testo personalizzati per ogni immagine | 1 | 2 | 4 | 20 |
| I tuoi livelli immagine (logo, prodotto) | No | No | Yes | Yes |
| Sfondo a tinta unita | No | No | Yes | Yes |
| Sfondo trasparente | No | No | No | Yes |
Come aggiungere un'immagine personalizzata a Iterable
Passo 1: Crea l'immagine
In Sendtric, vai su Personalizzazione delle immagini e clicca su Crea nuovo. Scegli uno sfondo dalla libreria multimediale, oppure una tela a tinta unita o trasparente, quindi aggiungi Testo dinamico per ogni valore. Regola le dimensioni di ogni casella di testo in base al valore più lungo che prevedi, dato che il testo va a capo ma non si riduce.
Passaggio 2: inserisci il campo "Iterable" per ogni livello
Per ogni livello di testo dinamico, assegna alla variabile un nome in minuscolo Nome della variabile e inserisci l’espressione Handlebars iterabile in tag di unione ESP, ad esempio {{firstName}}. I campi sono specifici del tuo progetto, quindi usa i nomi esatti che vedi sul profilo utente, inclusa la notazione con il punto per i campi annidati, ad esempio {{address.city}} se la tua città si trova all’interno di un oggetto indirizzo. Aggiungi Testo di riserva per gli utenti senza un valore.
Passaggio 3: Salva e copia il codice
Salva l'immagine. Dopo il primo salvataggio compare la casella del codice, con ogni variabile aggiunta all'URL dell'immagine e compilata con la tua espressione Iterable. Scegli l'allineamento e clicca su Copia codice.
Passaggio 4: Incollalo in un blocco HTML
Apri il tuo modello Iterable e clicca su Modifica design. Nell'editor Drag and Drop, trascina un blocco HTML da scheda "Contenuto" nella posizione giusta, selezionalo e incolla il codice nell'editor HTML. Nell'editor WYSIWYG o Side by Side, incolla il codice nel codice sorgente.
Passo 5: Anteprima con utenti reali
Clicca Anteprima, inserisci l'indirizzo e-mail (o l'ID utente) di un utente e clicca su Carica dati utente per visualizzare l'immagine con i relativi valori. Prova con un utente dal nome lungo e uno con un campo vuoto. Poi invia una bozza a te stesso, che compila i campi con i dati del tuo profilo.
Usare il blocco "Immagine" al posto dell'HTML
Se preferisci mantenere un blocco "Immagine", copia solo l'indirizzo all'interno del src del codice di Sendtric, trascina un blocco "Immagine" , attiva l’opzione Immagine dinamica e incolla l'indirizzo in URL dinamico. Se il blocco sembra vuoto mentre stai progettando, controllalo in Anteprima con i dati di un utente già caricati.
Soluzioni alternative in Iterable o in Sendtric
Puoi lasciare che sia il "Fallback Text" di Sendtric a gestire i valori vuoti, oppure usare l'helper di Iterable all'interno del tag, ad esempio {{defaultIfEmpty firstName 'there'}}. Usa le virgolette singole per il valore predefinito, perché l'espressione si trova all'interno dell'indirizzo dell'immagine racchiuso tra virgolette doppie. Se Iterable fornisce un valore predefinito, il testo di riserva di Sendtric non viene mai visualizzato.
Domande frequenti sulla personalizzazione delle immagini di Iterable
Posso usare i dati degli eventi, non solo i campi del profilo?
Sì. Qualsiasi valore Handlebars che Iterable può risolvere al momento del rendering dell'e-mail può essere inserito in un layer, compresi i campi dell'evento che ha attivato un percorso o una campagna. La documentazione di Iterable precisa che un campo dell'evento con lo stesso nome di un campo del profilo ha la priorità e {{profile.fieldName}} legge esplicitamente il valore del profilo.
E se un valore contenesse spazi o caratteri speciali?
Se un campo può contenere spazi o caratteri come & o #, racchiudilo nell'helper urlEncode , ad esempio {{#urlEncode}}{{city}}{{/urlEncode}}, in modo che l'indirizzo dell'immagine rimanga intatto. Poi controlla il risultato in Anteprima.
Cosa vedono gli utenti quando un campo è vuoto?
Se hai impostato il "Testo di riserva", vedranno solo quello, quindi scrivilo come una frase completa. Senza di esso, l'intero livello rimane nascosto, comprese le parole che circondano la variabile.
Posso aggiornare l'immagine dopo averla inviata?
Sì. Quando salvi in Sendtric, l'immagine in ogni email inviata cambia a partire dalla prossima volta che la apri. Le versioni renderizzate vengono memorizzate nella cache per circa un'ora per ogni combinazione di valori, e salvando si cancella tutto.
Le anteprime contano ai fini delle visualizzazioni?
Le anteprime nell'editor di Sendtric non lo fanno. Ogni vero caricamento dell'immagine invece sì, comprese le bozze Iterable che apri e le aperture ripetute.
Questa guida tratta un aspetto della piattaforma di personalizzazione delle email di Sendtric. Per ogni immagine personalizzata e gli esempi, dai un'occhiata alla pagina principale.
Altre guide su Iterable
- Timer per il conto alla rovescia - Come aggiungere timer per il conto alla rovescia a Iterable
- Timer per il conto alla rovescia - Aggiungi timer dinamici in Iterable
- Sondaggi in tempo reale - Come aggiungere sondaggi in tempo reale a Iterable
- Immagini basate su regole - Come aggiungere immagini basate su regole a Iterable
- Meteo dinamico - Come aggiungere il Meteo dinamico a Iterable
- Avvisi critici - Come aggiungere avvisi critici a Iterable
- Contatori di social proof - Come aggiungere i contatori di social proof a Iterable
Usi una piattaforma diversa? Dai un’occhiata a tutte le integrazioni di Sendtric.
