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

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.

➡️ Découvrez comment utiliser les fonctions d'assistance dans cette vidéo

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

Procédez de la façon suivante :

Étape 1 : créer l’événement initial et le parcours associé create-context

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.

    En savoir plus 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 une activité E-mail au parcours.

Étape 2 : créer l’e-mail configure-email

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

  2. 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.

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

Étape 3 : insérer le prénom du client en majuscules uppercase-function

  1. 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.

  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 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) %}
      

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

  5. 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.

  6. Cliquez sur Valider, puis sur Enregistrer.

  7. Enregistrez le message.

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

  1. Rouvrez le contenu du message.

  2. 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.

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

  5. 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|}}
      
  6. Collez ce code entre la balise {{#each}} d’ouverture et la balise {/each}} de fermeture :

    code language-html
    <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 :

    code language-handlebars
    {{#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}}
    
  8. Cliquez sur Valider, puis sur Enregistrer.

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

  1. Sur la page d'accueil du concepteur d’e-mail, 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 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%}
      

  4. Supprimez cette condition de l’expression :

    code language-handlebars
    {%else if condition2%} render_2
    

    Cet exemple illustre l’expression modifiée :

    code language-handlebars
    {%#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 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%}
      

  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 :

      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.

  7. Cliquez sur Valider, puis sur Enregistrer.

  8. Enregistrez le message.

Étape 6 : tester et publier le parcours test-and-publish

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

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

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

Rubriques connexes related-topics

Fonctions Handlebars handlebars

Cas d'utilisation use-case

Vidéo pratique video

Découvrez comment utiliser les fonctions d’assistance.

recommendation-more-help
b22c9c5d-9208-48f4-b874-1cefb8df4d76