Caso di utilizzo di Personalization: e-mail di abbandono del carrello personalization-use-case-helper-functions

Creare un evento il cui schema include l’array productListItems.

Definisci tutti i campi di questo array come campi payload per questo evento.

Ulteriori informazioni sul tipo di dati dell’elemento dell’elenco prodotti nella documentazione di Adobe Experience Platform.

Crea un percorso che inizia con questo evento.

Aggiungi un’attività E-mail al percorso.

Nell’attività E-mail, fai clic su Modifica contenuto, quindi su E-mail Designer.

Dalla palette a sinistra della home page di E-mail Designer, trascina e rilascia tre componenti struttura sul corpo del messaggio.

Trascina e rilascia un componente di contenuto HTML su ciascun nuovo componente struttura.

Nella home page di E-mail Designer, fai clic sul componente HTML in cui desideri aggiungere il nome del cliente.

Sulla barra degli strumenti contestuale fare clic su Mostra codice sorgente.

Nella finestra Modifica HTML, aggiungi la funzione stringa upperCase:

1. Nel menu a sinistra, seleziona Funzioni helper.

2. Utilizza il campo di ricerca per trovare “maiuscolo”.

3. Aggiungere la funzione upperCase dai risultati della ricerca. A tale scopo, fare clic sul segno più (+) accanto a {%= upperCase(string) %}: string.

   L’editor espressioni mostra questa espressione:

   code language-handlebars
   {%= upperCase(string) %}

   

Rimuovi il segnaposto “stringa” dall’espressione.

Aggiungi il token di nome:

1. Nel menu a sinistra, seleziona Attributi del profilo.

2. Selezionare Persona > Nome completo.

3. Aggiungi il token First name all’espressione.

   L’editor espressioni mostra questa espressione:

   code language-handlebars
   {%= upperCase(profile.person.name.firstName) %}

   

   Ulteriori informazioni sul tipo di dati del nome della persona nella documentazione di Adobe Experience Platform.

Fai clic su Convalida, quindi su Salva.

Salva il messaggio.

Riapri il contenuto del messaggio.

Nella pagina Home di E-mail Designer, fai clic sul componente HTML in cui desideri elencare il contenuto del carrello.

Sulla barra degli strumenti contestuale fare clic su Mostra codice sorgente.

Nella finestra Modifica HTML, aggiungi l’helper each:

1. Nel menu a sinistra, seleziona Funzioni helper.

2. Utilizza il campo di ricerca per trovare “ciascuno”.

3. Aggiungere l’helper each dai risultati della ricerca.

   L’editor espressioni mostra questa espressione:

   code language-handlebars
   {{#each someArray as |variable|}} {{/each}}

   

Aggiungere l’array productListItems all’espressione:

1. Rimuovi il segnaposto “someArray” dall’espressione.

2. Nel menu a sinistra, seleziona Attributi contestuali.

   Gli attributi contestuali sono disponibili solo dopo che il contesto di percorso è stato passato al messaggio.

3. Seleziona Journey Optimizer > Events > event_name, quindi espandi il nodo productListItems.

   In questo esempio, nome_evento rappresenta il nome dell’evento.

4. Aggiungi il token Product all’espressione.

   L’editor espressioni mostra questa espressione:

   code language-handlebars
   {{#each context.journey.events.event_ID.productListItems.product as |variable|}} {{/each}}

   In questo esempio, event_ID rappresenta l’ID dell’evento.

   

5. Modifica l’espressione:

   1. Rimuovi la stringa “.product”.
   2. Sostituisci il segnaposto “variable” con “product”.

   Questo esempio mostra l’espressione modificata:

   code language-handlebars
   {{#each context.journey.events.event_ID.productListItems as |product|}}

Incolla questo codice tra il tag di apertura {{#each}} e il tag di chiusura {{/each}}:

<table>
   <tbody>
      <tr>
         <td><b>#name</b></td>
         <td><b>#quantity</b></td>
         <td><b>$#priceTotal</b></td>
      </tr>
   </tbody>
</table>

Aggiungi i token di personalizzazione per il nome dell’articolo, la quantità e il prezzo:

1. Rimuovi il segnaposto “#name” dalla tabella HTML.
2. Dai risultati della ricerca precedente, aggiungi il token Name all’espressione.

Ripeti questi passaggi due volte:

• Sostituisci il segnaposto “#quantity” con il token Quantity.
• Sostituisci il segnaposto “#priceTotal” con il token Total price.

Questo esempio mostra l’espressione modificata:

{{#each context.journey.events.event_ID.productListItems as |product|}}
   <table>
      <tbody>
         <tr>
         <td><b>{{product.name}}</b></td>
         <td><b>{{product.quantity}}</b></td>
         <td><b>${{product.priceTotal}}</b></td>
         </tr>
      </tbody>
   </table>
{{/each}}

Fai clic su Convalida, quindi su Salva.

Nella home page di E-mail Designer, fai clic sul componente HTML in cui desideri inserire la nota.

Sulla barra degli strumenti contestuale fare clic su Mostra codice sorgente.

Nella finestra Modifica HTML, aggiungi l’helper if:

1. Nel menu a sinistra, seleziona Funzioni helper.

2. Utilizza il campo di ricerca per trovare “if”.

3. Aggiungere l’helper if dai risultati della ricerca.

   L’editor espressioni mostra questa espressione:

   code language-handlebars
   {%#if condition1%} render_1 {%else if condition2%} render_2 {%else%} default_render {%/if%}

   

Rimuovi questa condizione dall’espressione:

{%else if condition2%} render_2

Questo esempio mostra l’espressione modificata:

{%#if condition1%} render_1
   {%else%} default_render
{%/if%}

Aggiungi il token del nome del prodotto alla condizione:

1. Rimuovi il segnaposto “condition1” dall’espressione.

2. Nel menu a sinistra, seleziona Attributi contestuali.

3. Seleziona Journey Orchestration > Events > event_name, quindi espandi il nodo productListItems.

   In questo esempio, nome_evento rappresenta il nome dell’evento.

4. Aggiungi il token Name all’espressione.

   L’editor espressioni mostra questa espressione:

   code language-handlebars
   {%#if context.journey.events.`event_ID`.productListItems.name%} render_1 {%else%} default_render {%/if%}

   

Modifica l’espressione:

1. Nell’editor espressioni specificare il nome del prodotto dopo il token name.

   Utilizza questa sintassi, in cui product_name rappresenta il nome del prodotto:

   code language-javascript
   = "product_name"

   In questo esempio, il nome del prodotto è “Juno Jacket”:

   code language-handlebars
   {%#if context.journey.events.`event_ID`.productListItems.name = "Juno Jacket" %} render_1 {%else%} default_render {%/if%}

2. Sostituite il segnaposto “render_1” con il testo della nota.

   Esempio:

   code language-handlebars
   {%#if context.journey.events.`event_ID`.productListItems.name = "Juno Jacket" %} Due to longer than usual lead times on the Juno Jacket, please expect item to ship two weeks after purchase. {%else%} default_render {%/if%}

3. Rimuovi il segnaposto “default_render” dall’espressione.

Fai clic su Convalida, quindi su Salva.

Salva il messaggio.

Attiva il Test, quindi fai clic su Attiva un evento.

Nella finestra Configurazione evento, immetti i valori di input, quindi fai clic su Invia.

La modalità di test funziona solo con i profili di test.

L’e-mail viene inviata all’indirizzo del profilo di test.

In questo esempio, l’e-mail contiene la nota sulla Giacca Juno, perché questo prodotto si trova nel carrello:

Verifica che non vi sia alcun errore, quindi pubblica il percorso.