Cas d’utilisation de la personnalisation : e-mail d’abandon de panier personalization-use-case-helper-functions

Créez un événement dont le schéma inclut le tableau productListItems.

Définissez tous les champs de ce tableau comme champs de payload pour cet événement.

En savoir plus sur le type de données d’élément de liste de produit dans la documentation d’Adobe Experience Platform.

Créez un parcours commençant par cet événement.

Ajoutez une activité E-mail au parcours.

Dans l’activité E-mail, cliquez sur Modifier le contenu, puis cliquez sur concepteur d’e-mail.

Dans la palette gauche de la page d’accueil du concepteur d’e-mail, effectuez un glisser-déposer de trois composants de structure dans le corps du message.

Effectuez un glisser-déposer d’un composant de contenu HTML dans chaque nouveau composant de structure.

Sur la page d’accueil du concepteur d’e-mail, cliquez sur le composant HTML dans lequel vous souhaitez ajouter le prénom du client.

Dans la barre d’outils contextuelle, cliquez sur Afficher le code source.

Dans la fenêtre Modifier le code HTML, ajoutez la fonction de chaîne upperCase :

1. Dans le menu de gauche, sélectionnez Fonctions d’assistance.

2. Utilisez le champ de recherche pour trouver « upper case ».

3. À partir des résultats de la recherche, ajoutez la fonction upperCase. Pour ce faire, cliquez sur le signe plus (+) en regard de {%= upperCase(string) %}: string.

   L’éditeur d’expression affiche cette expression :

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

   

Supprimez l’espace réservé « string » de l’expression.

Ajoutez le jeton de prénom :

1. Dans le menu de gauche, sélectionnez Attributs de profil.

2. Sélectionnez Personne > Nom complet.

3. Ajoutez le jeton Prénom à l’expression.

   L’éditeur d’expression affiche cette expression :

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

   

   En savoir plus sur le type de données de nom de personne dans la documentation d’Adobe Experience Platform.

Cliquez sur Valider, puis sur Enregistrer.

Enregistrez le message.

Rouvrez le contenu du message.

Sur la page d’accueil du concepteur d’e-mail, cliquez sur le composant HTML dans lequel vous souhaitez répertorier le contenu du panier.

Dans la barre d’outils contextuelle, cliquez sur Afficher le code source.

Dans la fenêtre Modifier le code HTML, ajoutez la fonction helper each :

1. Dans le menu de gauche, sélectionnez Fonctions d’assistance.

2. Utilisez le champ de recherche pour trouver « each ».

3. À partir des résultats de la recherche, ajoutez la fonction helper each.

   L’éditeur d’expression affiche cette expression :

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

   

Ajoutez le tableau productListItems à l’expression :

1. Supprimez l’espace réservé « someArray » de l’expression.

2. Dans le menu de gauche, sélectionnez Attributs contextuels.

   Les attributs contextuels ne sont disponibles qu’une fois que le contexte du parcours a été transmis au message.

3. Sélectionnez Journey Optimizer > Événements > event_name, puis développez le nœud productListItems.

   Dans cet exemple, event_name représente le nom de votre événement.

4. Ajoutez le jeton Produit à l’expression.

   L’éditeur d’expression affiche cette expression :

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

   Dans cet exemple, event_ID représente l’identifiant de votre événement.

   

5. Modifiez l’expression :

   1. Supprimez la chaîne « .product ».
   2. Remplacez l’espace réservé « variable » par « product ».

   Cet exemple illustre l’expression modifiée :

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

Collez ce code entre la balise {{#each}} d’ouverture et la balise {{/each}} de fermeture :

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

Ajoutez les jetons de personnalisation pour le nom de l’article, la quantité et le prix :

1. Supprimez l’espace réservé « #name » du tableau HTML.
2. À partir des résultats de recherche précédents, ajoutez le jeton Nom à l’expression.

Répétez deux fois ces étapes :

• Remplacez l’espace réservé « #quantity » par le jeton Quantité.
• Remplacez l’espace réservé « #priceTotal » par le jeton Prix total.

Cet exemple illustre l’expression modifiée :

{{#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}}

Cliquez sur Valider, puis sur Enregistrer.

Sur la page d’accueil du concepteur d’e-mail, cliquez sur le composant HTML dans lequel vous souhaitez insérer la note.

Dans la barre d’outils contextuelle, cliquez sur Afficher le code source.

Dans la fenêtre Modifier le code HTML, ajoutez la fonction helper if :

1. Dans le menu de gauche, sélectionnez Fonctions d’assistance.

2. Utilisez le champ de recherche pour trouver « if ».

3. À partir des résultats de la recherche, ajoutez la fonction helper if.

   L’éditeur d’expression affiche cette expression :

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

   

Supprimez cette condition de l’expression :

{%else if condition2%} render_2

Cet exemple illustre l’expression modifiée :

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

Ajoutez le jeton de nom de produit à la condition :

1. Supprimez l’espace réservé « condition1 » de l’expression.

2. Dans le menu de gauche, sélectionnez Attributs contextuels.

3. Sélectionnez Journey Orchestration > Événements > event_name, puis développez le nœud productListItems.

   Dans cet exemple, event_name représente le nom de votre événement.

4. Ajoutez le jeton Nom à l’expression.

   L’éditeur d’expression affiche cette expression :

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

   

Modifiez l’expression :

1. Dans l’éditeur d’expression, indiquez le nom du produit après le jeton name.

   Utilisez cette syntaxe, où product_name représente le nom de votre produit :

   code language-javascript
   = "product_name"

   Dans cet exemple, le nom du produit est « Juno Jacket » :

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

2. Remplacez l’espace réservé « render_1 » par le texte de la note.

   Exemple :

   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. Supprimez l’espace réservé « default_render » de l’expression.

Cliquez sur Valider, puis sur Enregistrer.

Enregistrez le message.

Activez le bouton d’activation/désactivation Test, puis cliquez sur Déclencher un événement.

Dans la fenêtre Configuration de l’événement, saisissez les valeurs d’entrée, puis cliquez sur Envoyer.

Le mode test fonctionne uniquement avec les profils de test.

L’e-mail est envoyé à l’adresse du profil de test.

Dans cet exemple, l’e-mail contient la note relative à Juno Jacket, car ce produit se trouve dans le panier :

Vérifiez qu’il n’y a pas d’erreur et publiez le parcours.