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.
Referência rápida quick-reference
Esta seção contém conhecimento estruturado destinado a oferecer suporte à interpretação, recuperação e resposta a perguntas relacionadas a este tópico.
Para uma compreensão completa, essas informações devem ser combinadas com a documentação desta página. Nenhuma das origens deve ser independente; a página descreve o recurso, enquanto esta seção fornece um contexto adicional que ajuda a desfazer a ambiguidade da terminologia, intenção, aplicabilidade e restrições.
TL;DR
Esta página aborda um caso de uso de email de abandono de carrinho usando três funções auxiliares — upperCase, each e if — para exibir o nome do cliente em maiúsculas, listar itens de carrinho e inserir uma nota de remessa específica do produto condicionalmente.
Intenções
- Criar um evento de jornada cujo esquema inclua a matriz
productListItems - Insira o nome de um cliente em maiúsculas usando
{%= upperCase(profile.person.name.firstName) %} - Listar itens do carrinho iterando sobre
context.journey.events.event_ID.productListItemscom{{#each}} - Exibir uma observação específica do produto condicionalmente usando
{%#if context.journey.events.\event_ID`.productListItems.name = “product_name” %}` - Teste a jornada no modo de teste usando um perfil de teste com carga útil do evento e publique
upperCase: Uma função de cadeia de caracteres do PQL que converte uma cadeia de caracteres em maiúsculas; chamada com{%= upperCase(string) %}. (específico do produto)eachauxiliar: um auxiliar de bloco Handlebars ({{#each array as |alias|}} ... {{/each}}) que itera sobre uma matriz, comoproductListItems. (específico do produto)ifauxiliar: um auxiliar de bloco condicional ({%#if condition%} ... {%else%} ... {%/if%}) que renderiza conteúdo somente quando a condição especificada é verdadeira.productListItems: uma matriz XDM padrão que representa o conteúdo do carrinho, com campos que incluemname,quantityepriceTotal. (específico do produto)- Modo de teste: um recurso de jornada que permite o envio de mensagens de teste para endereços de perfil de teste a fim de verificar o comportamento da jornada e da mensagem antes da publicação. (específico do produto)
- Nome canônico: email de abandono do carrinho — variantes: caso de uso de abandono do carrinho
- Não confundir:
context.journey.events.event_ID.productListItems(matriz de origem de evento, acessada por atributos Contextuais) ≠profile.*atributos (origem de perfil, sempre disponível)
- Os atributos contextuais (incluindo dados do evento de jornada) estão disponíveis no editor de personalização somente após a mensagem ter sido colocada em uma jornada que inclui o evento relevante.
- O modo de teste funciona somente com perfis de teste.
P: Quais funções auxiliares são usadas neste caso de uso?
Três: upperCase (renderiza o nome em maiúsculas), each (itera sobre a matriz de itens do carrinho) e if (exibe condicionalmente uma nota de remessa específica do produto).
P: De onde vêm os dados do item do carrinho na expressão de personalização?
Da matriz productListItems do evento de jornada, acessada por atributos Contextuais em context.journey.events.event_ID.productListItems.
P: Os atributos contextuais podem ser usados antes de colocar a mensagem dentro de uma jornada?
Não. Os atributos contextuais estão disponíveis no editor de personalização somente após a mensagem ser colocada em uma jornada que inclui o evento relevante.
P: Como faço para testar o email com dados do carrinho?
Ative o botão de alternância Teste na jornada, clique em Acionar um evento e insira os valores de entrada na janela Configuração de evento e clique em Enviar. O email é enviado para o endereço do perfil de teste.