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.

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

Follow these steps:

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

Step 1: Create the email

  1. Create or modify an email message, 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 2: 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 list, select Helper functions.

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

    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 list, select Profile.

    2. Select Profile > 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 typein Adobe Experience Plaform documentation.

  6. Click Validate, then click Save.

  7. Save the message.

Step 3: 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 typein Adobe Experience Platform documentation.

  3. Create a journey that starts with this event.

  4. Add the message to the journey.

  5. End the journey with an end activity.

    Because you have not yet published the message, you cannot neither test nor publish the journey.

  6. Click OK.

    A message informs you that the journey context has been passed to the message.

Step 4: Insert the list of items from the cart

  1. Reopen the message.

  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 list, 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 list, select Context.

      The Context option is available only after the journey context has been passed to the message.

    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 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>{{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. 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 list, 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 list, select Context.

    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 and publish the message.

Step 6: Test and publish the journey

  1. Open the journey. If the journey is already open, then refresh the page.

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

    You can turn on the test mode only after you have published the message.

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

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

Handlebars functions

Use cases

Tutorial video

On this page