DocumentaçãoJourney OptimizerGuia do Journey Optimizer

Caso de uso de personalização: email de abandono de carrinho personalization-use-case-helper-functions

Last update: Fri Dec 29 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

Criado para:

  • Intermediate
  • Developer

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 variável upperCase função de sequência de caracteres, para inserir o nome do cliente em letras maiúsculas. Saiba mais.
  • A variável each auxiliar, para listar os itens que estão no carrinho. Saiba mais.
  • A variável if auxiliar, 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:

  1. Criar o evento inicial e a jornada.
  2. Criar uma mensagem de email.
  3. Insira o nome do cliente em letras maiúsculas.
  4. Adicionar o conteúdo do carrinho ao email.
  5. Inserir uma observação específica do produto.
  6. Testar e publicar a jornada.

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 variável productListItems matriz.

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

    Saiba mais sobre a digitação de dados do item de lista de produtos Documentação do Adobe Experience Platform.

  3. Crie uma jornada que comece com este evento.

  4. Adicionar um E-mail atividade para a jornada.

Etapa 2: criar o email configure-email

  1. No E-mail atividade, clique em Editar conteúdo e, em seguida, clique em Email Designer.

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

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

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 de HTML onde deseja adicionar o nome do cliente.

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

  3. No Editar HTML adicione a upperCase função de sequência:

    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 variável upperCase função. 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) %}

  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. Selecionar Person > Nome completo.

    3. Adicione o 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 no Documentação da Adobe Experience Platform.

  6. Clique em Validar e, em seguida, clique em Salvar.

  7. Salve a mensagem.

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

  1. Reabra o conteúdo da mensagem.

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

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

  4. No Editar HTML adicione a each auxiliar:

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

    2. Use o campo de pesquisa para localizar "cada".

    3. Nos resultados da pesquisa, adicione a variável each auxiliar.

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

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

  5. Adicione o productListItems matriz para a expressão:

    1. Remova o espaço reservado "someArray" da expressão.

    2. No menu esquerdo, selecione Atributos contextuais.

      Atributos contextuais estão disponíveis somente após o contexto de jornada ter sido passado para a mensagem.

    3. Selecionar Journey Optimizer > Eventos > event_name, em seguida expanda a variável productListItems nó.

      Neste exemplo, event_name representa o nome do evento.

    4. Adicione o 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.

    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 esse código entre a tag de abertura {{#each}} e o fechamento {/each}} tag:

    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 de HTML.
    2. A partir dos resultados da pesquisa anterior, adicione o Nome à expressão.

    Repita essas etapas duas vezes:

    • Substitua o espaço reservado "#quantity" pelo Quantidade token.
    • Substitua o espaço reservado "#priceTotal" pelo Preço total token.

    Este exemplo mostra a expressão modificada:

    code language-handlebars 
    {{#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. Clique em Validar e, em seguida, clique em Salvar.

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

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

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

  3. No Editar HTML adicione a if auxiliar:

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

    2. Use o campo de pesquisa para localizar "if".

    3. Nos resultados da pesquisa, adicione a variável if auxiliar.

      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%}

  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. Selecionar Journey Orchestration > Eventos > event_name, em seguida expanda a variável productListItems nó.

      Neste exemplo, event_name representa o nome do evento.

    4. Adicione o Nome à 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%}

  6. Modifique a expressão:

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

      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 seguida, clique em Salvar.

  8. Salve a mensagem.

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

  1. Ativar o Teste alterne e clique em Acionar um evento.

  2. No Configuração do evento insira 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:

  3. 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 explicativo video

Saiba como usar funções auxiliares.

https://video.tv.adobe.com/v/334244?quality=12

recommendation-more-help
b22c9c5d-9208-48f4-b874-1cefb8df4d76