Authoring dei messaggi e-mail

Dopo aver aggiunto una risorsa e-mail a un nodo di azione del percorso, puoi definire il contenuto del messaggio e-mail.

Fai clic su Modifica contenuto e-mail nella scheda Dettagli nel pannello di destra.

Fare clic su Modifica contenuto e-mail {width="700" modal="regular"}

Questa azione avvia gli strumenti di progettazione delle e-mail, in cui puoi scegliere come progettare le e-mail dalle seguenti opzioni:

Dopo aver creato e personalizzato il contenuto dell’e-mail, puoi esportarlo per la convalida o per un utilizzo successivo. Fai clic su Esporta HTML per salvare il contenuto come file .zip che include il HTML e le risorse.

TIP
Utilizza l’Assistente AI in Adobe Journey Optimizer B2B edition, basato su intelligenza artificiale generativa, per elevare i contenuti al livello successivo. L’Assistente AI può aiutarti a ottimizzare l’impatto delle consegne generando e-mail intere, contenuto di testo mirato e ricevendo consigli dall’Assistente AI per le immagini che risuonano con il tuo pubblico. Ulteriori informazioni

Creare e-mail da zero design-from-scratch

Utilizza lo spazio di progettazione del contenuto visivo per definire la struttura e il contenuto dell’e-mail. Aggiungendo e spostando componenti strutturali con semplici azioni di trascinamento della selezione, puoi progettare la forma del contenuto dell’e-mail riutilizzabile in pochi secondi.

  1. Dalla home page di Progetta modello, seleziona l'opzione Progetta da zero.

  2. Nella finestra di dialogo Crea e-mail, scegli il tipo di contenuto e-mail che desideri creare.

    • Usa temi - Scegliere questa opzione per creare l'e-mail in modalità tema. In questa modalità, puoi utilizzare un tema del brand definito per semplificare il processo di authoring dei contenuti e assicurarti che la progettazione sia allineata agli standard definiti.

    • Stile manuale - Scegliere questa opzione per creare l'e-mail in Modalità manuale. In questa modalità, puoi impostare manualmente lo stile per tutti i componenti di struttura e contenuto aggiunti all’area di lavoro vuota.

  3. Aggiungi struttura e contenuto al modello.

  4. Rivedi e aggiorna i collegamenti.

  5. Verifica e-mail.

Quando si è soddisfatti del contenuto, fare clic su Salva.

Importa contenuto HTML esistente

Il contenuto importato può essere:

  • Un file HTML con un foglio di stile incorporato

  • Un file .zip che include un file HTML, il foglio di stile (.css) e le immagini

    note note
    NOTE
    La struttura del file .zip non è soggetta a vincoli. Tuttavia, i riferimenti devono essere relativi e adattarsi alla struttura ad albero della cartella .zip. Le immagini vengono sempre caricate nell’archivio delle risorse di Marketo Engage collegate. Se desideri gestire i file immagine in Experience Manager Assets, caricali separatamente nell’interfaccia dell’app e modifica i collegamenti immagine nell’e-mail designer.

Per importare un file contenente contenuto HTML:

  1. Dalla home page di Progettare il modello, selezionare l'opzione Importa HTML.

  2. Trascina e rilascia il file HTML o .zip contenente il contenuto HTML e fai clic su Importa.

importa contenuto html in un file zip {width="500"}

NOTE
L'utilizzo di un tag <table> come primo livello in un file HTML può causare la perdita di stile, incluse le impostazioni di sfondo e larghezza nel tag del livello superiore.

Puoi personalizzare il contenuto importato in base alle esigenze con gli strumenti dell’editor e-mail visivo.

Seleziona un modello

Puoi scegliere tra:

  • Modelli di esempio. L’interfaccia di Journey Optimizer offre 20 modelli e-mail preconfigurati tra cui puoi scegliere.

  • Modelli salvati. Utilizza un modello personalizzato salvato che hai creato da zero utilizzando il menu Modelli o salvato da un'e-mail in un percorso utilizzando l'opzione Salva come modello di contenuto.

Utilizza la sezione Seleziona modello struttura per iniziare a creare il contenuto da un modello. Puoi utilizzare un modello di esempio o un modello e-mail personalizzato salvato dall’istanza Journey Optimizer B2B Edition.

Modelli salvati

Nella home page di Progettare il modello, la scheda Modelli di esempio è selezionata per impostazione predefinita. Per utilizzare un modello personalizzato, selezionare la scheda Modelli salvati.

Viene visualizzato l’elenco di tutti i modelli e-mail creati nella sandbox corrente. Puoi ordinarli per Nome, Ultima modifica e Ultima creazione.

Scegli un modello salvato {width="800" modal="regular"}

Selezionare il modello desiderato dall'elenco.

Dopo la selezione, viene visualizzata un'anteprima del modello. In modalità anteprima puoi spostarti tra tutti i modelli di una categoria (campione o salvato, a seconda della selezione) utilizzando le frecce destra e sinistra.

Anteprima del modello salvato {width="800" modal="regular"}

Quando la visualizzazione corrisponde a quella che si desidera utilizzare, fare clic su Usa questo modello in alto a destra nella finestra di anteprima.

Questa azione copia il contenuto nel designer del contenuto visivo, dove puoi modificarlo in base alle esigenze.

Modelli di esempio

Adobe Journey Optimizer B2B Edition offre una selezione di modelli e-mail preconfigurati, che possono essere utilizzati per la creazione di e-mail e modelli e-mail.

Scegli un modello fornito da Adobe {width="800" modal="regular"}

NOTE
Ai modelli salvati possono essere applicate impostazioni di governance (blocco del contenuto) a uno o più componenti. Lo spazio di progettazione visivo fornisce indicazioni sui componenti bloccati quando si crea un messaggio e-mail da un modello gestito.

Aggiungere struttura e contenuto structure-content

  1. Per iniziare la progettazione del contenuto, trascina un elemento dalle Strutture e rilascialo nell'area di lavoro.

    Aggiungi tutti gli elementi da Strutture necessari e modifica le impostazioni per ciascuno nel riquadro a destra.

    note tip
    TIP
    Seleziona il componente n:n column per definire il numero di colonne desiderato (tra tre e 10). Puoi anche definire la larghezza di ciascuna colonna spostando le frecce sotto di essa.

    Trascina una struttura nell'area di lavoro e regola le impostazioni {width="800" modal="regular"}

    Le dimensioni di ogni colonna non possono essere inferiori al 10% della larghezza totale del componente struttura. È possibile rimuovere solo colonne vuote.

  2. Espandi la sezione Contents e aggiungi tutti i componenti di contenuto necessari in uno o più componenti della struttura.

    Trascina un elemento di contenuto nell'area di lavoro e regola le impostazioni {width="800" modal="regular"}

  3. Se necessario, puoi effettuare ulteriori personalizzazioni per ciascun componente nelle schede Impostazioni o Stile.

    Ad esempio, puoi modificare lo stile del testo, la spaziatura interna o il margine di ciascun componente.

  4. Per aggiungere contenuto condizionale e adattarlo ai profili target in base alle regole condizionali, selezionare un componente di contenuto e fare clic sull'icona Abilita contenuto condizionale nella barra degli strumenti del componente.

    Per ulteriori informazioni, vedere Contenuto condizionale.

Aggiungere CSS personalizzato

Puoi aggiungere un CSS personalizzato direttamente nello spazio di progettazione delle e-mail. Utilizza CSS personalizzato per applicare uno stile avanzato e specifico, per una maggiore flessibilità e un maggiore controllo sull’aspetto del contenuto. È consigliabile aggiungere questo stile di livello più alto prima di includere componenti di contenuto quali immagini, pulsanti e testo.

Con almeno un componente di contenuto nell'area di lavoro, seleziona il componente Corpo nella struttura di navigazione a sinistra per accedere all'editor CSS personalizzato.

NOTE
Se il messaggio di posta elettronica è progettato utilizzando un modello con contenuto bloccato, non è possibile aggiungere CSS personalizzati al contenuto. L'etichetta del pulsante diventa Visualizza CSS personalizzato ed eventuali CSS personalizzati già presenti nel contenuto sono di sola lettura.

Accedere agli stili del corpo {width="800" modal="regular"}

  1. Nella scheda Stili visualizzata a destra, fai clic su Aggiungi CSS personalizzato.

    note note
    NOTE
    Il pulsante Aggiungi CSS personalizzato è disponibile solo quando è selezionato il componente Body. Tuttavia, puoi applicare stili CSS personalizzati a tutti i componenti al suo interno.

    L'editor a comparsa Aggiungi CSS personalizzato viene visualizzato con i commenti del codice segnaposto.

  2. Immetti il codice CSS nell’editor.

    Assicurati che il CSS personalizzato sia valido e segua la sintassi corretta. Se il CSS immesso non è valido, viene visualizzato un messaggio di errore e non è possibile salvarlo. Per ulteriori informazioni, consulta Validità CSS.

  3. Fai clic su Salva per salvare il file CSS personalizzato.

    Il foglio di stile personalizzato viene applicato al contenuto esistente. Puoi verificare che il CSS personalizzato sia applicato in base alle tue esigenze. Per informazioni su come apportare modifiche e regolare l'applicazione del foglio di stile, vedere Risoluzione dei problemi.

NOTE
Se rimuovi tutto il contenuto, la sezione CSS non viene più visualizzata nel pannello stili corpo e il CSS personalizzato definito in precedenza non viene più applicato. Se aggiungi nuovamente il contenuto, viene visualizzata nuovamente la sezione Stili CSS e viene applicato nuovamente il CSS personalizzato.

Aggiungi frammenti

NOTE
I frammenti non sono compatibili tra la modalità tema e la modalità manuale nel contenuto dell'e-mail. Per utilizzare un frammento nel contenuto dell'e-mail in cui viene applicato un tema, è necessario creare il frammento anche in modalità tema.

Un frammento visivo è un componente di progettazione riutilizzabile a cui possono fare riferimento più risorse di contenuto in Adobe Journey Optimizer B2B edition. In genere si tratta di un blocco di contenuti che può essere precreato e inserito rapidamente per rendere l’authoring più rapido e coerente.

L’esempio seguente illustra i passaggi per aggiungere frammenti durante l’authoring dei contenuti.

  1. Per aprire l'elenco dei frammenti, seleziona l'icona Frammenti ( Icona Frammenti ).

    Puoi eseguire le seguenti operazioni:

    • Ordina l’inserzione.
    • Sfoglia, cerca o filtra l’inserzione.
    • Passa dalla visualizzazione delle miniature a quella dell’elenco e viceversa.
    • Aggiorna l’elenco per riflettere eventuali frammenti creati di recente.

    Selezionare un frammento dall'elenco {width="700" modal="regular"}

  2. Trascina uno dei frammenti nel componente strutturale.

    L’editor esegue il rendering del frammento all’interno della sezione/elemento della struttura e-mail.

    note tip
    TIP
    Per aggiungere il frammento in modo che occupi l’intero layout orizzontale all’interno dell’e-mail, aggiungi una struttura di colonne 1:1 e quindi trascina e rilascia il frammento al suo interno.

    Il contenuto del frammento viene aggiornato dinamicamente all’interno della struttura per mostrare come appare il contenuto nel contenuto.

recommendation-more-help

Campi modificabili nei frammenti personalizzabili

Un frammento visivo può includere campi modificabili che puoi personalizzare. I campi personalizzati ti consentono di modificare i parametri quando incorpori il frammento nel contenuto e di creare un’esperienza personalizzata senza influire sul frammento originale. L'autore del frammento può progettare il frammento per la personalizzazione dei componenti testo, immagine e pulsante. Se un frammento incluso contiene componenti con campi modificabili, puoi modificare i valori predefiniti per personalizzarlo in base al contenuto.

  1. Seleziona il componente frammento.

    Le Impostazioni visualizzate a destra includono e campi modificabili con i valori predefiniti.

    Modifica parametri componente frammento {width="700" modal="regular"}

  2. Modifica eventuali campi modificabili in base alle esigenze.

Dopo il salvataggio, l'e-mail viene visualizzata nella pagina dei dettagli del frammento quando si seleziona la scheda Usato da nel riepilogo.

Aggiungere risorse

Nell'editor del contenuto visivo, seleziona l'icona Assets di Marketo Engage ( icona Assets di Marketo Engage ) o l'icona Experience Manager Assets ( icona AEM Assets ) nella barra di navigazione a sinistra. Dal selettore delle risorse, puoi selezionare direttamente le risorse memorizzate nella libreria di origine.

NOTE
Se hai effettuato il provisioning con Adobe Experience Manager as a Cloud Services, potrai accedere agli archivi sia per Marketo Engage Design Studio che per Adobe Experience Manager Assets as a Cloud Service quando il tuo account utente dispone delle autorizzazioni necessarie. Questi archivi sono separati e non sincronizzati. Puoi utilizzare le risorse immagine da entrambe le origini.
  • Aggiungi una nuova risorsa trascinando la risorsa immagine in un componente struttura.

    Trascina una risorsa Marketo Engage nell'area di lavoro e regola le impostazioni {width="800" modal="regular"}

  • Sostituisci una risorsa immagine esistente selezionandola nell'area di lavoro e fai clic su Seleziona una risorsa negli strumenti di origine delle immagini.

    Seleziona una risorsa dalla libreria di origine {width="600" modal="regular"}

Per ulteriori informazioni sull'utilizzo delle risorse del tipo di origine, vedere Utilizzare le risorse per l'authoring dei contenuti.

Spostarsi tra livelli, impostazioni e stili

Quando si lavora con il contenuto nello spazio di progettazione visivo, è possibile accedere ai componenti, alle colonne e agli elementi di contenuto utilizzando la struttura di navigazione. Fai clic sull'icona Struttura di navigazione ( Icona Struttura di navigazione ) a sinistra per visualizzare la struttura.

Accedere ai livelli di contenuto {width="800" modal="regular"}

L’esempio seguente illustra i passaggi per regolare la spaziatura e l’allineamento verticale all’interno di un componente struttura con le colonne.

  1. Selezionare la colonna nel componente struttura direttamente nell'area di lavoro o utilizzando la struttura di spostamento visualizzata a sinistra.

  2. Dalla barra degli strumenti della colonna, fare clic sullo strumento Seleziona una colonna e scegliere quello che si desidera modificare.

    Puoi anche selezionarla dall’albero della struttura. I parametri modificabili per tale colonna vengono visualizzati nelle schede Impostazioni e Stili a destra.

    Componenti colonna visualizzati nella finestra di progettazione visiva {width="800" modal="regular"}

  3. Per modificare le proprietà della colonna, fai clic sulla scheda Stili a destra e modificale in base alle tue esigenze:

    • Per Sfondo, modifica il colore di sfondo in base alle esigenze.

      Deselezionare la casella di controllo relativa a uno sfondo trasparente. Abilita l'impostazione Immagine di sfondo per utilizzare un'immagine come sfondo invece di un colore a tinta unita.

    • Per Allineamento, seleziona l'icona Superiore, Centro o Inferiore.

    • Per Spaziatura interna, definire la spaziatura per tutti i lati.

      Selezionare Spaziatura interna diversa per ogni lato per ottimizzare la spaziatura. Fai clic sull'icona Blocca per interrompere la sincronizzazione.

    • Espandi la sezione Avanzate per definire gli stili in linea per la colonna.

    Modifica gli stili per la colonna selezionata {width="700" modal="regular"}

  4. Se necessario, ripeti questi passaggi per regolare l’allineamento e la spaziatura per le altre colonne del componente.

  5. Salva le modifiche.

Personalizzazione dei contenuti

Journey Optimizer B2B edition utilizza una sintassi semplice in linea che consente di creare espressioni con contenuto personalizzato racchiuso tra parentesi graffe {}. È possibile aggiungere più espressioni nello stesso contenuto o campo senza restrizioni.

Esempi:

  • Hello {{lead.firstName}} {{lead.lastName}}
  • Hello {%= lead.mktoName ?: "Marketer" %}
NOTE
Journey Optimizer B2B edition ora segue la sintassi camel case per i token di personalizzazione nelle e-mail in modo che corrispondano alle altre applicazioni Adobe Experience Platform per un'esperienza coerente. Questo formato di token è completamente compatibile con il linguaggio di modelli Handlebars. Tutti i token aggiunti prima di questa modifica vengono aggiornati automaticamente.

Durante l’elaborazione del contenuto, Journey Optimizer B2B edition sostituisce l’espressione con i dati contenuti nel database di Experience Platform. Il primo esempio diventa Hello John Doe.

L’esempio seguente illustra i passaggi per personalizzare il contenuto utilizzando gli attributi lead/account e i token di sistema.

  1. Seleziona il componente testo e fai clic sull'icona Aggiungi personalizzazione nella barra degli strumenti.

    Fare clic sull'icona Personalizza {width="600"}

    Questa azione apre la finestra di dialogo Modifica Personalization.

  2. Aggiungere un token facendo clic sul simbolo più ( + ) accanto a esso.

    Se desideri aggiungere il token con un fallback (testo predefinito che viene visualizzato quando tale campo non è disponibile per un lead), fai clic sull'icona Altro ( ) e scegli Inserisci con testo di fallback.

    Creare testo personalizzato utilizzando token {width="700" modal="regular"}

  3. Aggiungi eventuali altri token o altro testo statico da includere.

  4. Fai clic su Salva.

    Lo script di personalizzazione viene visualizzato nello spazio di progettazione visiva. Puoi selezionarla per apportare modifiche quando necessario.

    Seleziona script di personalizzazione {width="600"}

NOTE
Se per il percorso di account sono definiti I miei token, è possibile utilizzare anche questi token specifici del percorso per il contenuto delle e-mail. Per ulteriori informazioni, consulta Token personalizzati per la personalizzazione delle e-mail.

Modifica tracciamento URL collegato

  1. Fai clic sull'icona Collegamenti ( Mostra icona collegamenti ) a sinistra per visualizzare tutti gli URL collegati nel contenuto da tracciare.

  2. Se necessario, fare clic sull'icona Modifica ( Modifica icona ) e modificare il Tipo di tracciamento o Etichetta.

    Puoi anche aggiungere Tag per un collegamento.

Fai clic sull'icona Modifica per accedere al tracciamento dei collegamenti {width="500"}

Opzioni di visualizzazione

Sfrutta le opzioni di convalida di visualizzazione e contenuto disponibili nell’editor e-mail visivo.

  • Zoom in/out del contenuto tra le opzioni di zoom predefinite.

  • Cambia la visualizzazione del contenuto tra desktop, dispositivi mobili o solo testo/solo testo.

    • Fai clic sull'icona Visualizza per l'anteprima del contenuto tra i dispositivi.
    • Seleziona uno dei dispositivi predefiniti o immetti dimensioni personalizzate per visualizzare in anteprima il contenuto.

Altre opzioni

Dal menu Altro … nella parte superiore dello spazio di progettazione visiva, è possibile eseguire le azioni seguenti:

Fai clic su Altro per accedere alle azioni del modello {width="500"}

  • Reimposta e-mail - Fai clic su questa opzione per cancellare l'area di progettazione delle e-mail in una lavagna vuota e riavviare la creazione del contenuto.
  • Salva come frammento - Salva tutte o alcune parti dell'e-mail come frammento da riutilizzare in più e-mail o modelli di e-mail. Fornisci un nome e una descrizione per il frammento, quindi salvalo nell’elenco dei frammenti disponibili.
  • Modifica la progettazione - Torna alla pagina Progetta la tua e-mail. A questo punto è possibile scegliere un altro modello per riavviare il processo di progettazione. Puoi anche scegliere di progettare il contenuto da zero con un'area di lavoro vuota (Modalità classica) o utilizzando un tema del marchio (Modalità tema).
  • Salva come modello di contenuto - Salva il corpo dell'e-mail come modello e-mail da riutilizzare in più e-mail o modelli e-mail. Fornisci un nome e una descrizione per il modello, quindi salvalo nell’elenco dei modelli e-mail salvati.
  • Esporta HTML - Scarica il contenuto nell'area di lavoro visiva nel tuo sistema locale in formato HTML racchiuso in un file zip.

Controllare e testare l’e-mail email-testing

Una volta definito il contenuto del messaggio, puoi utilizzare i profili di test per visualizzarne l’anteprima, inviare bozze e rivederne il rendering nelle proporzioni desktop e mobile. Se hai inserito dei contenuti personalizzati, puoi visualizzare in anteprima come questi contenuti vengono visualizzati nel messaggio utilizzando i dati del profilo di test.

Per visualizzare l'anteprima del contenuto dell'e-mail, fare clic su Simula contenuto e selezionare un profilo di test per controllare il messaggio utilizzando i dati del profilo della persona.

Simula il contenuto dell'e-mail per controllare la progettazione {width="700" modal="regular"}

Puoi accedere a strumenti aggiuntivi per convalidare e rivedere il contenuto dell’e-mail:

6ef00091-a233-4243-8773-0da8461f7ef0