Caso de uso do Personalization: email de abandono de carrinho personalization-use-case-helper-functions

Nesta página: Siga um caso de uso de abandono de carrinho que personaliza um corpo de email usando upperCase, cada um e se as funções auxiliares no Adobe Journey Optimizer.

Neste exemplo, você personalizará o corpo de uma mensagem de email. Essa mensagem é direcionada aos clientes que deixaram itens em seus carrinhos de compras, mas não concluíram a compra.

Você usará estes tipos de funções auxiliares:

  • A função de sequência de caracteres upperCase, para inserir o nome do cliente em letras maiúsculas. Saiba mais.
  • O auxiliar each, para listar os itens que estão no carrinho. Saiba mais.
  • O auxiliar do if, para inserir uma observação específica do produto se o produto relacionado estiver no carrinho. Saiba mais.

➡️ Saiba como usar funções auxiliares neste vídeo

Antes de começar, verifique se você sabe como configurar esses elementos:

Siga estas etapas:

Etapa 1: criar o evento inicial e a jornada relacionada create-context

O conteúdo do carrinho é uma informação contextual da jornada. Portanto, você deve adicionar um evento inicial e o email a uma jornada antes de poder adicionar informações específicas do carrinho ao email.

  1. Crie um evento cujo esquema inclua a matriz productListItems.

  2. Defina todos os campos dessa matriz como campos de carga para esse evento.

    Saiba mais sobre o tipo de dados do item de lista de produtos na documentação do Adobe Experience Platform.

  3. Crie uma jornada que comece com este evento.

  4. Adicione uma atividade de Email à jornada.

    Jornada a tela com um evento e uma atividade de email no fluxo

Etapa 2: criar o email configure-email

  1. Na atividade de Email, clique em Editar conteúdo e em Email Designer.

    Atividade de email com as opções Editar conteúdo e Designer de email

  2. Na paleta esquerda da página inicial do Designer de email, arraste e solte três componentes de estrutura no corpo da mensagem.

  3. Arraste e solte um componente de conteúdo do HTML em cada novo componente de estrutura.

    Enviar email para o Designer com três componentes de estrutura e componentes de conteúdo do HTML no corpo

Etapa 3: insira o nome do cliente em letras maiúsculas uppercase-function

  1. Na página inicial do Designer de email, clique no componente do HTML ao qual deseja adicionar o nome do cliente.

  2. Na barra de ferramentas contextual, clique em Mostrar o código-fonte.

    Barra de ferramentas contextual com a opção Mostrar o código-fonte

  3. Na janela Editar HTML, adicione a função de cadeia de caracteres upperCase:

    1. No menu esquerdo, selecione funções auxiliares.

    2. Use o campo de pesquisa para localizar “caixa alta”.

    3. Nos resultados da pesquisa, adicione a função upperCase. Para fazer isso, clique no sinal de adição (+) ao lado de {%= upperCase(string) %}: string.

      O editor de expressão mostra esta expressão:

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

      Editor de expressão com a função upperCase selecionada nas funções Auxiliares

  4. Remova o espaço reservado “string” da expressão.

  5. Adicione o token de nome:

    1. No menu esquerdo, selecione Atributos do perfil.

    2. Selecione Pessoa > Nome completo.

    3. Adicione o token Nome à expressão.

      O editor de expressão mostra esta expressão:

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

      Editor de expressão mostrando upperCase com token de nome de perfil

      Saiba mais sobre o tipo de dados do nome da pessoa na documentação do Adobe Experience Platform.

  6. Clique em Validar e em Salvar.

    Editar janela do HTML com os botões Validar e Salvar

  7. Salve a mensagem.

Etapa 4: inserir a lista de itens do carrinho each-helper

Esta etapa demonstra a iteração pelos dados do evento. Para obter exemplos abrangentes de iteração em diferentes fontes de dados (eventos, respostas de ação personalizadas e outros dados contextuais), consulte Iterar dados contextuais com Handlebars.

  1. Reabra o conteúdo da mensagem.

  2. Na página inicial do Designer de email, clique no componente do HTML onde deseja listar o conteúdo do carrinho.

  3. Na barra de ferramentas contextual, clique em Mostrar o código-fonte.

    Barra de ferramentas contextual com a opção Mostrar o código-fonte

  4. Na janela Editar HTML, adicione o auxiliar each:

    1. No menu esquerdo, selecione funções auxiliares.

    2. Use o campo de pesquisa para localizar “cada”.

    3. Nos resultados da pesquisa, adicione o auxiliar do each.

      O editor de expressão mostra esta expressão:

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

      Editor de expressão com cada modelo auxiliar

  5. Adicionar a matriz productListItems à expressão:

    1. Remova o espaço reservado “someArray” da expressão.

    2. No menu esquerdo, selecione Atributos contextuais.

      Atributos contextuais só estão disponíveis depois que o contexto de jornada é passado para a mensagem.

    3. Selecione Journey Optimizer > Events > event_name e expanda o nó productListItems.

      Neste exemplo, event_name representa o nome do evento.

    4. Adicionar o token do Produto à expressão.

      O editor de expressão mostra esta expressão:

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

      Neste exemplo, event_ID representa a ID do evento.

      Editor de expressão com productListItems em atributos contextuais

    5. Modifique a expressão:

      1. Remova a string “.product”.
      2. Substitua o espaço reservado “variável” por “produto”.

      Este exemplo mostra a expressão modificada:

      code language-handlebars
      {{#each context.journey.events.event_ID.productListItems as |product|}}
      
  6. Cole este código entre a tag de abertura {{#each}} e a tag de fechamento {{/each}}:

    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. Adicione os tokens de personalização para o nome do item, a quantidade e o preço:

    1. Remova o espaço reservado “#name” da tabela do HTML.
    2. A partir dos resultados da pesquisa anterior, adicione o token Name à expressão.

    Repita essas etapas duas vezes:

    • Substitua o espaço reservado “#quantity” pelo token de Quantidade.
    • Substitua o espaço reservado “#priceTotal” pelo token de Preço total.

    Este exemplo mostra a expressão modificada:

    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. Clique em Validar e em Salvar.

    Editor de expressão com Validar e Salvar após configurar cada bloco

Etapa 5: inserir uma observação específica do produto if-helper

  1. Na página inicial do Designer de email, clique no componente do HTML onde deseja inserir a nota.

  2. Na barra de ferramentas contextual, clique em Mostrar o código-fonte.

    Barra de ferramentas contextual com a opção Mostrar o código-fonte

  3. Na janela Editar HTML, adicione o auxiliar if:

    1. No menu esquerdo, selecione funções auxiliares.

    2. Use o campo de pesquisa para localizar “if”.

    3. Nos resultados da pesquisa, adicione o auxiliar do if.

      O editor de expressão mostra esta expressão:

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

      Editor de expressão com o modelo auxiliar if

  4. Remova essa condição da expressão:

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

    Este exemplo mostra a expressão modificada:

    code language-handlebars
    {%#if condition1%} render_1
       {%else%} default_render
    {%/if%}
    
  5. Adicione o token do nome do produto à condição:

    1. Remova o espaço reservado “condition1” da expressão.

    2. No menu esquerdo, selecione Atributos contextuais.

    3. Selecione Journey Orchestration > Events > event_name e expanda o nó productListItems.

      Neste exemplo, event_name representa o nome do evento.

    4. Adicione o token Name à expressão.

      O editor de expressão mostra esta expressão:

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

      Editor de expressão com token de nome productListItems na condição if

  6. Modifique a expressão:

    1. No editor de expressão, especifique o nome do produto após o token name.

      Use esta sintaxe, onde product_name representa o nome do seu produto:

      code language-javascript
      = "product_name"
      

      Neste exemplo, o nome do produto é “Juno Jacket”:

      code language-handlebars
      {%#if context.journey.events.`event_ID`.productListItems.name = "Juno Jacket" %}
         render_1
         {%else%} default_render
      {%/if%}
      
    2. Substitua o espaço reservado “render_1” pelo texto da nota.

      Exemplo:

      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. Remova o espaço reservado “default_render” da expressão.

  7. Clique em Validar e em Salvar.

    Editar janela do HTML com Validar e Salvar após configurar o bloco if

  8. Salve a mensagem.

Etapa 6: testar e publicar a jornada test-and-publish

  1. Ative a opção Testar e clique em Acionar um evento.

    Jornada com a opção Testar ativada e acionar um botão de evento

  2. Na janela Configuração de evento, digite os valores de entrada e clique em Enviar.

    O modo de teste funciona somente com perfis de teste.

    Janela de configuração de evento com valores de entrada e botão Enviar

    O email é enviado para o endereço do perfil de teste.

    Neste exemplo, o email contém a observação sobre o Juno Jacket porque este produto está no carrinho:

    Exemplo de email mostrando a nota de envio Juno Jacket no corpo da mensagem

  3. Verifique se não há erros e publique a jornada.

Funções Handlebars handlebars

Casos de uso use-case

Vídeo tutorial video

Saiba como usar funções auxiliares.

AI Knowledge Reference

This section contains structured knowledge intended to support interpretation, retrieval, and question answering related to this topic.

For complete understanding, this information should be combined with the documentation on this page. Neither source is intended to stand alone; the page describes the feature, while this section provides additional context that helps disambiguate terminology, intent, applicability, and constraints.

  • TL;DR: This page walks through a cart abandonment email use case using three helper functions — upperCase, each, and if — to display a customer’s first name in capitals, list cart items, and insert a product-specific shipping note conditionally.

Intents:

  • Create a journey event whose schema includes the productListItems array
  • Insert a customer’s first name in uppercase using {%= upperCase(profile.person.name.firstName) %}
  • List cart items by iterating over context.journey.events.event_ID.productListItems with {{#each}}
  • Display a product-specific note conditionally using {%#if context.journey.events.\event_ID`.productListItems.name = “product_name” %}`
  • Test the journey in test mode using a test profile with event payload, then publish

Glossary:

  • upperCase: A PQL string function that converts a string to uppercase; called with {%= upperCase(string) %}. (product-specific)
  • each helper: A Handlebars block helper ({{#each array as |alias|}} ... {{/each}}) that iterates over an array such as productListItems. (product-specific)
  • if helper: A conditional block helper ({%#if condition%} ... {%else%} ... {%/if%}) that renders content only when the specified condition is true.
  • productListItems: A standard XDM array representing cart contents, with fields including name, quantity, and priceTotal. (product-specific)
  • Test mode: A journey feature that enables sending test messages to test profile addresses to verify journey and message behavior before publication. (product-specific)

Guardrails:

  • Contextual attributes (including journey event data) are available in the personalization editor only after the message has been placed inside a journey that includes the relevant event.
  • Test mode works only with test profiles.

Terminology:

  • Canonical name: cart abandonment email — variants: cart abandonment use case
  • Do not confuse: context.journey.events.event_ID.productListItems (event-sourced array, accessed via Contextual attributes) ≠ profile.* attributes (profile-sourced, always available)

FAQ:

  • Q: What helper functions are used in this use case? — Three: upperCase (renders first name in capitals), each (iterates over the cart items array), and if (conditionally displays a product-specific shipping note).
  • Q: Where does the cart item data come from in the personalization expression? — From the journey event’s productListItems array, accessed via Contextual attributes at context.journey.events.event_ID.productListItems.
  • Q: Can contextual attributes be used before placing the message inside a journey? — No. Contextual attributes are available in the personalization editor only after the message is placed inside a journey that includes the relevant event.
  • Q: How do I test the email with cart data? — Turn on the Test toggle in the journey, click Trigger an event, and enter the input values in the Event configuration window, then click Send. The email is sent to the test profile’s address.
recommendation-more-help
journey-optimizer-help