Cas d’utilisation de la personnalisation : e-mail d’abandon de panier

Dans cet exemple, vous allez personnaliser le corps d’un e-mail. Ce message cible les clients qui ont laissé des articles dans leur panier mais n’ont pas effectué leur achat.

Vous utiliserez ces types de fonctions helper :

  • La fonction de chaîne upperCase permettant d'insérer le prénom du client en majuscules. En savoir plus.
  • La fonction helper each permettant de répertorier les articles qui se trouvent dans le panier. En savoir plus.
  • La fonction helper if permettant d’insérer une note spécifique au produit si le produit associé se trouve dans le panier. En savoir plus.

Avant de commencer, vérifiez que vous savez comment configurer ces éléments :

Procédez de la façon suivante :

  1. Créer un message e-mail.
  2. Insérer le prénom du client en majuscules.
  3. Créer l’événement initial et le parcours.
  4. Ajouter le contenu du panier à l’e-mail.
  5. Insérer une note spécifique au produit.
  6. Tester et publier le parcours.

Étape 1 : créer l’e-mail

  1. Créez ou modifiez un e-mail, puis cliquez sur Concepteur d’email.

  2. Dans la palette gauche de la page d'accueil du Concepteur d'email, effectuez un glisser-déposer de trois composants de structure dans le corps du message.

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

Étape 2 : insérer le prénom du client en majuscules

  1. Sur la page d’accueil du Concepteur d’email, cliquez sur le composant HTML dans lequel vous souhaitez ajouter le prénom du client.

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

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

    1. Dans la liste, sélectionnez Fonctions helper.

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

    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 :

      {%= upperCase(string) %}
      

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

  5. Ajoutez le jeton de prénom :

    1. Dans la liste, sélectionnez Profil.

    2. Sélectionnez Profil > Personne > Nom complet.

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

      L’éditeur d’expression affiche cette expression :

      {%= upperCase(profile.person.name.firstName) %}
      

      Apprenez-en davantage sur le type de données de nom de personne dans la documentation d’Adobe Experience Platform.

  6. Cliquez sur Valider, puis sur Enregistrer.

  7. Enregistrez le message.

Étape 3 : créer l’événement initial et le parcours associé

Le contenu du panier est une information contextuelle provenant du parcours. Par conséquent, vous devez ajouter un événement initial et l’e-mail à un parcours avant de pouvoir ajouter des informations spécifiques au panier à l’e-mail.

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

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

    Apprenez-en davantage sur le type de données d’élément de liste de produit dans la documentation d’Adobe Experience Platform.

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

  4. Ajoutez le message au parcours.

  5. Terminez le parcours par une activité de fin.

    Comme vous n’avez pas encore publié le message, vous ne pouvez ni tester ni publier le parcours.

  6. Cliquez sur OK.

    Un message vous informe que le contexte du parcours a été transmis au message.

Étape 4 : insérer la liste des articles du panier

  1. Rouvrez le message.

  2. Sur la page d'accueil du Concepteur d'email, cliquez sur le composant HTML dans lequel vous souhaitez répertorier le contenu du panier.

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

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

    1. Dans la liste, sélectionnez Fonctions helper.

    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 :

      {{#each someArray as |variable|}} {{/each}}
      

  5. Ajoutez le tableau productListItems à l’expression :

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

    2. Dans la liste, sélectionnez Contexte.

      L’option Contexte n’est disponible qu’une fois le contexte du parcours transmis au message.

    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 Produit à l’expression.

      L’éditeur d’expression affiche cette expression :

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

      {{#each context.journey.events.event_ID.productListItems as |product|}}
      
  6. 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>
    
  7. 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>{{context.journey.events.event_ID.productListItems.name}}</b></td>
                <td><b>{{context.journey.events.event_ID.productListItems.quantity}}</b></td>
                <td><b>${{context.journey.events.event_ID.productListItems.priceTotal}}</b></td>
             </tr>
          </tbody>
       </table>
    {{/each}}
    
  8. Cliquez sur Valider, puis sur Enregistrer.

Étape 5 : insérer une note spécifique au produit

  1. Sur la page d'accueil du Concepteur d'email, cliquez sur le composant HTML dans lequel vous souhaitez insérer la note.

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

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

    1. Dans la liste, sélectionnez Fonctions helper.

    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 :

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

  4. 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%}
    
  5. Ajoutez le jeton de nom de produit à la condition :

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

    2. Dans la liste, sélectionnez Contexte.

    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 :

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

  6. 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 :

      = "product_name"
      

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

      {%#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 :

      {%#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.

  7. Cliquez sur Valider, puis sur Enregistrer.

  8. Enregistrez le message et publiez-le.

Étape 6 : tester et publier le parcours

  1. Ouvrez le parcours. Si le parcours est déjà ouvert, actualisez la page.

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

    Vous ne pouvez activer le mode test qu’après avoir publié le message.

  3. 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 :

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

Rubriques connexes

Fonctions Handlebars

Cas d'utilisation

Tutoriel vidéo

Sur cette page