Fonti di dati esterne
Porta dati dinamici esterni in html
L'integrazione di fonti di dati esterne nei modelli di email consente di creare contenuti altamente personalizzati e dinamici, migliorando il coinvolgimento e la rilevanza. Questa guida ti guiderà nella configurazione delle fonti di dati esterne e nel loro utilizzo nei tuoi modelli di email.
Le fonti di dati esterne forniscono contenuti dinamici ai tuoi modelli di email estraendo informazioni da API esterne. Questo è utile per:
Personalizzare i contenuti basati su un feed esterno
Visualizzare dati in tempo reale come lo stato del volo da un'API
Personalizzare i link passando parametri e ottenendo i link finali tramite uno strumento esterno
Crea un data source esterno
Utilizzo di fonti di dati esterne in Email
Una volta che la tua fonte di dati esterna è stata configurata correttamente, puoi utilizzare il suo output nel modello di email utilizzando il linguaggio di modelli liquid.
Utilizzo di una Fonte di Dati Esterna per il Feed di Contenuti
Per mostrare un feed di contenuti, puoi creare un'API che fornisce un json con molti elementi del feed di contenuti. Come esempio, potrebbe apparire come segue:
Il feed json sopra può essere utilizzato come URL API durante la creazione di una fonte di dati esterna.
Una volta creata, puoi riferirti ad essa in un modello di email come segue:
Prima aggiungi un elemento html e aggiungi il codice sottostante per ottenere la fonte di dati esterna per nome, cioè {% datafetch "external-data-source-name" %}
Utilizza la funzione for in liquid per ottenere tutti gli elementi nel tuo feed insieme al percorso, cioè {% for <your-item> in dataFetchResponse.<your-json-path> %}.
Se hai solo un elemento, questo potrebbe non essere necessario
Supponendo che sample-data-feed sia il nome della fonte di dati esterna e feed.items sia il percorso nel feed json per ottenere gli elementi, apparirà come segue:

Dopo aver aggiunto questo, puoi quindi aggiungere qualsiasi immagine, testo, elementi di pulsante e fare riferimento alla fonte di dati esterna come mostrato di seguito assumendo la struttura di sample-data-feed:
{{item.title}} - Per mostrare il titolo in un elemento di testo
{{item.description}} - Per mostrare la descrizione in un elemento di testo
{{item.link}} - Per aggiungere un link in un elemento di pulsante
{{item.thumbnail}} - Per aggiungere un URL di origine immagine in un elemento immagine
Ora aggiungi un altro blocco html per terminare il recupero della fonte di dati esterna e la funzione for come mostrato di seguito
Per visualizzare in anteprima la tua email, puoi passare alla vista di anteprima e vedere come appare il tuo feed di contenuti
Nota: Se hai un feed statico, puoi aggiornarlo manualmente qui selezionando la fonte di dati esterna nel menu a discesa Aggiorna Fonte di Dati Esterna.

Utilizzo di External Data Source per personalizzare gli URLs
Puoi anche utilizzare fonti di dati esterne insieme a variabili nell'URL dell'API. Questo aiuta a passare qualsiasi parametro a un'API esterna e restituire una risposta da aggiungere a un modello di email
Ad esempio, puoi utilizzare un URL API come indicato di seguito passando variabili come mostrato di seguito
https://api.bird.com/workspaces/?email={{email}}&referenceId={{referenceId}}&locale={{locale}}&name={{name}}

Per utilizzare questa fonte di dati esterna in un modello di email, devi fornire anche i valori delle variabili nel tag liquid:
Aggiungi il primo elemento html come {% datafetch "name", "variable1", "variable1 value", "variable2", "variable2 value" %}
Nell'esempio seguente, la prima linea evita problemi quando l'indirizzo email ha un segno +. La seconda linea avvia effettivamente il flusso di dati esterni con le variabili. Puoi fornire valori statici come "value" oppure puoi fornire riferimenti a variabili come contact.attributes.userId.
GenerateLink è il nome della fonte di dati esterna sopra menzionata.
Per rendere un link personalizzato puoi utilizzare un elemento button con il link definito come {{dataFetchResponse.url}} dove url contiene la risposta dalla tua API

Dopo di ciò, aggiungi l'elemento html di chiusura come di seguito: