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:
- Um evento unitário. Saiba mais.
- Uma jornada que começa com um evento. Saiba mais.
- Uma mensagem de email na jornada. Saiba mais
- O corpo de um email. Saiba mais.
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.
-
Crie um evento cujo esquema inclua a matriz
productListItems. -
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.
-
Crie uma jornada que comece com este evento.
-
Adicione uma atividade de Email à jornada.
Etapa 2: criar o email configure-email
-
Na atividade de Email, clique em Editar conteúdo e em Email Designer.
-
Na paleta esquerda da página inicial do Designer de email, arraste e solte três componentes de estrutura no corpo da mensagem.
-
Arraste e solte um componente de conteúdo do HTML em cada novo componente de estrutura.
Etapa 3: insira o nome do cliente em letras maiúsculas uppercase-function
-
Na página inicial do Designer de email, clique no componente do HTML ao qual deseja adicionar o nome do cliente.
-
Na barra de ferramentas contextual, clique em Mostrar o código-fonte.
-
Na janela Editar HTML, adicione a função de cadeia de caracteres
upperCase:-
No menu esquerdo, selecione funções auxiliares.
-
Use o campo de pesquisa para localizar “caixa alta”.
-
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) %}
-
-
Remova o espaço reservado “string” da expressão.
-
Adicione o token de nome:
-
No menu esquerdo, selecione Atributos do perfil.
-
Selecione Pessoa > Nome completo.
-
Adicione o token Nome à expressão.
O editor de expressão mostra esta expressão:
code language-handlebars {%= upperCase(profile.person.name.firstName) %}
Saiba mais sobre o tipo de dados do nome da pessoa na documentação do Adobe Experience Platform.
-
-
Clique em Validar e em Salvar.
-
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.
-
Reabra o conteúdo da mensagem.
-
Na página inicial do Designer de email, clique no componente do HTML onde deseja listar o conteúdo do carrinho.
-
Na barra de ferramentas contextual, clique em Mostrar o código-fonte.
-
Na janela Editar HTML, adicione o auxiliar
each:-
No menu esquerdo, selecione funções auxiliares.
-
Use o campo de pesquisa para localizar “cada”.
-
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}}
-
-
Adicionar a matriz
productListItemsà expressão:-
Remova o espaço reservado “someArray” da expressão.
-
No menu esquerdo, selecione Atributos contextuais.
Atributos contextuais só estão disponíveis depois que o contexto de jornada é passado para a mensagem.
-
Selecione Journey Optimizer > Events > event_name e expanda o nó productListItems.
Neste exemplo, event_name representa o nome do evento.
-
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.
-
Modifique a expressão:
- Remova a string “.product”.
- 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|}}
-
-
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> -
Adicione os tokens de personalização para o nome do item, a quantidade e o preço:
- Remova o espaço reservado “#name” da tabela do HTML.
- 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}} -
Clique em Validar e em Salvar.
Etapa 5: inserir uma observação específica do produto if-helper
-
Na página inicial do Designer de email, clique no componente do HTML onde deseja inserir a nota.
-
Na barra de ferramentas contextual, clique em Mostrar o código-fonte.
-
Na janela Editar HTML, adicione o auxiliar
if:-
No menu esquerdo, selecione funções auxiliares.
-
Use o campo de pesquisa para localizar “if”.
-
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%}
-
-
Remova essa condição da expressão:
code language-handlebars {%else if condition2%} render_2Este exemplo mostra a expressão modificada:
code language-handlebars {%#if condition1%} render_1 {%else%} default_render {%/if%} -
Adicione o token do nome do produto à condição:
-
Remova o espaço reservado “condition1” da expressão.
-
No menu esquerdo, selecione Atributos contextuais.
-
Selecione Journey Orchestration > Events > event_name e expanda o nó productListItems.
Neste exemplo, event_name representa o nome do evento.
-
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%}
-
-
Modifique a expressão:
-
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%} -
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%} -
Remova o espaço reservado “default_render” da expressão.
-
-
Clique em Validar e em Salvar.
-
Salve a mensagem.
Etapa 6: testar e publicar a jornada test-and-publish
-
Ative a opção Testar e clique em Acionar um evento.
-
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.
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:
-
Verifique se não há erros e publique a jornada.
Tópicos relacionados related-topics
Funções Handlebars handlebars
Casos de uso use-case
Vídeo tutorial video
Saiba como usar funções auxiliares.
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, andif— 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
productListItemsarray - 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.productListItemswith{{#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)eachhelper: A Handlebars block helper ({{#each array as |alias|}} ... {{/each}}) that iterates over an array such asproductListItems. (product-specific)ifhelper: 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 includingname,quantity, andpriceTotal. (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), andif(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
productListItemsarray, accessed via Contextual attributes atcontext.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.