Personalization use case: cart abandonment email

In this example, you will personalize the body of an email message. This message targets customers who have left items in their shopping cart, but have not completed their purchase.

You will use these types of helper functions:

• The upperCase string function, to insert the customer’s first name in capital letters. Learn more.
• The each helper, to list the items that are in the cart. Learn more.
• The if helper, to insert a product-specific note if the related product is in the cart. Learn more.

➡️ Learn how to use helper functions in this video

Before you start, ensure you know how to configure these elements:

• A unitary event. Learn more.
• A journey that starts with an event. Learn more.
• An email message in your journey. Learn more
• The body of an email. Learn more.

Follow these steps:

1. Create the initial event and the journey.
2. Create an email message.
3. Insert the customer’s first name in capital letters.
4. Add the cart content to the email.
5. Insert a product-specific note.
6. Test and publish the journey.

Step 1: Create the initial event and the related journey

The cart content is contextual information from the journey. Therefore, you must add an initial event and the email to a journey before you can add cart-specific information to the email.

1. Create an event whose schema includes the productListItems array.

2. Define all the fields from this array as payload fields for this event.

   Learn more about the product list item data type in Adobe Experience Platform documentation.

3. Create a journey that starts with this event.

4. Add an Email activity to the journey.

   

Step 2: Create the email

1. In the Email activity, click Edit content, then click Email Designer.

   

2. From the left palette of the Email Designer home page, drag and drop three structure components onto the body of the message.

3. Drag and drop an HTML content component onto each new structure component.

   

Step 3: Insert the customer’s first name in capital letters

1. On the Email Designer home page, click on the HTML component where you want to add the customer’s first name.

2. On the contextual toolbar, click Show the source code.

   

3. In the Edit HTML window, add the upperCase string function:

   1. In the left menu, select Helper functions.

   2. Use the search field to find “upper case”.

   3. From the search results, add the upperCase function. To do this, click the Plus (+) sign next to {%= upperCase(string) %}: string.

      The Expression editor shows this expression:

      {%= upperCase(string) %}
      

      

4. Remove the “string” placeholder from the expression.

5. Add the first name token:

   1. In the left menu, select Profile attributes.

   2. Select Person > Full name.

   3. Add the First name token to the expression.

      The Expression editor shows this expression:

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

      

      Learn more about the person name data type in Adobe Experience Plaform documentation.

6. Click Validate, then click Save.

   

7. Save the message.

Step 4: Insert the list of items from the cart

1. Reopen the message content.

2. On the Email Designer home page, click on the HTML component where you want to list the cart content.

3. On the contextual toolbar, click Show the source code.

   

4. In the Edit HTML window, add the each helper:

   1. In the left menu, select Helper functions.

   2. Use the search field to find “each”.

   3. From the search results, add the each helper.

      The Expression editor shows this expression:

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

      

5. Add the productListItems array to the expression:

   1. Remove the “someArray” placeholder from the expression.

   2. In the left menu, select Contextual attributes.

      Contextual attributes are available only after the journey context has been passed to the message.

   3. Select Journey Optimizer > Events > event_name, then expand the productListItems node.

      In this example, event_name represents the name of your event.

   4. Add the Product token to the expression.

      The Expression editor shows this expression:

      {{#each context.journey.events.event_ID.productListItems.product as |variable|}} {{/each}}
      

      In this example, event_ID represents the ID of your event.

      

   5. Modify the expression:

      1. Remove the “.product” string.
      2. Replace the “variable” placeholder with “product”.

      This example shows the modified expression:

      {{#each context.journey.events.event_ID.productListItems as |product|}}
      

6. Paste this code between the opening {{#each}} tag and the closing {/each}} tag:

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

7. Add the personalization tokens for the item name, the quantity, and the price:

   1. Remove the placeholder “#name” from the HTML table.
   2. From the previous search results, add the Name token to the expression.

   Repeat these steps twice:

   • Replace the placeholder “#quantity” with the Quantity token.
   • Replace the placeholder “#priceTotal” with the Total price token.

   This example shows the modified expression:

   {{#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. Click Validate, then click Save.

   

Step 5: Insert a product-specific note

1. On the Email Designer home page, click on the HTML component where you want to insert the note.

2. On the contextual toolbar, click Show the source code.

   

3. In the Edit HTML window, add the if helper:

   1. In the left menu, select Helper functions.

   2. Use the search field to find “if”.

   3. From the search results, add the if helper.

      The Expression editor shows this expression:

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

      

4. Remove this condition from the expression:

   {%else if condition2%} render_2
   

   This example shows the modified expression:

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

5. Add the product name token to the condition:

   1. Remove the “condition1” placeholder from the expression.

   2. In the left menu, select Contextual attributes.

   3. Select Journey Orchestration > Events > event_name, then expand the productListItems node.

      In this example, event_name represents the name of your event.

   4. Add the Name token to the expression.

      The Expression editor shows this expression:

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

      

6. Modify the expression:

   1. In the Expression editor, specify the product name after the name token.

      Use this syntax, where product_name represents the name of your product:

      = "product_name"
      

      In this example, the product name is “Juno Jacket”:

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

   2. Replace the “render_1” placeholder with the text of the note.

      Example:

      {%#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. Remove the “default_render” placeholder from the expression.

7. Click Validate, then click Save.

   

8. Save the message.

Step 6: Test and publish the journey

1. Turn on the Test toggle, then click Trigger an event.

   

2. In the Event configuration window, enter the input values, then click Send.

   The test mode works only with test profiles.

   

   The email is sent to the address of the test profile.

   In this example, the email contains the note about the Juno Jacket because this product is in the cart:

   

3. Verify that there is no error, then publish the journey.

Related topics

Handlebars functions

• Helpers

• String functions

Use cases

• Personalization with profile information, context, and offer

• Personalization with decision-based offer

How-to video

Learn how to use helper functions.