Como usar um bloco de tabela em um e-mail

O que você vai aprender 

Saiba como usar um bloco de tabela em um e-mail. Esses blocos podem exibir imagens e textos lado a lado. O bloco de tabelas também pode ser dinâmico, iterando sobre os dados para personalizar o e-mail para cada Destinatários.

Entendendo o bloco de mesa 

Há dois tipos de bloco de mesa: 

• Estático
  Esse tipo de bloco de tabela exibe o número exato de linhas e colunas que o senhor selecionar. Cada Destinatários vê a mesma tabela layout, mas o conteúdo pode variar se o senhor usar personalização, evento, catálogo ou outra tag. 
• Dinâmica
  Esses blocos de tabela permitem que o senhor itere sobre uma lista de dados (por exemplo, uma lista de itens em um carrinho abandonado ou fluxo de confirmação de pedido). O número de linhas é determinado pelo número de itens da lista: se alguém pediu 1 item, terá 1 linha; se pediu 5 itens, terá 5 linhas. 

O caso de uso mais comum de um bloco de tabela dinâmica é destacar produtos em uma mensagem de carrinho abandonado. Isso usa um bloco dinâmico para exibir várias linhas com imagens, nomes de produtos e preços de cada item abandonado. 

Quando usar o bloco de mesa

Um bloco de tabela é uma das várias maneiras de colocar duas ou mais partes de conteúdo lado a lado. As alternativas incluem divisão bloco e colunas. 

Saiba mais sobre as diferentes opções para colocar o conteúdo lado a lado na tabela abaixo. 

Bloco de mesa estático 

A palavra "estático" aqui significa simplesmente que o conteúdo e o número de linhas na tabela permanecem os mesmos para todos os Destinatários. O único momento em que o conteúdo muda é quando o senhor adiciona conteúdo dinâmico, como personalização, data e tag de catálogo, em um bloco de tabela estática. 

Casos de uso para bloco de tabelas estáticas

Use um bloco de tabela estática para:

• Mostrar um item específico, por exemplo, para vendas rápidas ou lançamentos de produtos.
• Inclua sempre o mesmo número de itens (por exemplo, mostre o item visualizado mais recentemente em uma mensagem de carrinho abandonado). 
• Crie uma mensagem de fluxo em que os dados do evento contenham apenas um item, que inclui: 
  • carrinho abandonado fluxo (adicionado ao gatilho do carrinho) 
  • fluxo de abandono de navegação 
  • reposição de estoque e queda de preço fluxo 
• O senhor gostaria de colocar texto estático e imagens lado a lado

Como criar um bloco de tabela estática

1. Navegue até um e-mail (ou seja, uma Campanha modelos de e-mail, ou fluxo de e-mail). 
2. No menu de blocos, arraste um bloco Table para a tela.
   
3. Abra o menu Styles do bloco. Observe que Static já está selecionado, pois essa é a configuração padrão para o bloco de tabelas.
   
4. Em Columns (Colunas), clique em Add column (Adicionar coluna ) para adicionar colunas adicionais.
   
5. Em Rows (Linhas), clique em Add row (Adicionar linha ) para adicionar linhas adicionais.
   
6. Retorne à guia de conteúdo do bloco. 
7. Use a área do seletor de células para escolher a célula que o senhor deseja editar.
   
8. Escolha se essa célula deve ser um texto ou uma imagem usando o menu Cell conteúdo. Repita o procedimento para cada célula.
9. Adicione conteúdo (ou seja, texto ou uma imagem) abaixo do menu Cell conteúdo. 
10. Depois de adicionar conteúdo a todas as células, clique na seta de voltar para retornar ao menu principal de conteúdo e continuar a criar seu e-mail.
    

Bloco de mesa dinâmico 

O bloco de tabela dinâmica itera sobre um conjunto de dados para repetir o conteúdo com base no número de entradas dentro dele. O bloco itera até atingir o final da lista. Por exemplo, o senhor pode mostrar o número exato de produtos no carrinho de alguém.  

Para usar um bloco dinâmico, o senhor deve fazer referência a dados formatados como uma lista aninhada, em que cada entrada da lista segue o mesmo formato. O caso de uso mais comum são as informações sobre produtos encontradas em um evento de acionamento de fluxo (por exemplo, início de checkout, pedido feito), mas o senhor também pode usar um feed da Web para listar postagens de blog ou dados de referência do perfil formatados como uma lista. 

elemento de um bloco de tabela dinâmico

A criação de um bloco de conteúdo dinâmico requer 3 elementos: 

• Coleção de linhas
  O local dos dados a serem iterados. Ao analisar seus dados de origem (por exemplo, os itens nos metadados de um evento de checkout iniciado ), essa é a parte da tag do modelo relevante que é a mesma para todos os tag.
• Alias de linha
  Uma forma abreviada de fazer referência à sua coleção de linhas à medida que a tabela itera pelo seu conjunto de dados. O alias de linha geralmente é item, mas o senhor pode usar qualquer texto. 
• Conteúdo dinâmico
  O conteúdo que aparecerá em cada linha. Por exemplo, o senhor pode querer exibir uma imagem, o nome do produto, o preço e as informações sobre a variante de cada item que alguém deixou no carrinho. 

Casos de uso para bloco de tabelas dinâmicas

Use um bloco de tabela dinâmica se estiver fazendo referência dinâmica a uma lista de dados e se todas as entradas da lista estiverem formatadas da mesma forma. Isso inclui: 

• carrinho abandonado fluxo (checkout started trigger) 
• Confirmação do pedido fluxo 
• Fluxo de vendas ascendente ou cruzado

Como criar um bloco de tabela dinâmico

Esta seção aborda o bloco de tabelas dinâmicas em um alto nível. Para obter instruções mais detalhadas sobre esse processo, saiba como criar um bloco dinâmico em um fluxo E-mail.

1. Navegue até o editor de um e-mail. Se o senhor estiver usando dados de eventos (por exemplo, detalhes do carrinho abandonado), navegue até um e-mail dentro de um fluxo acionado pelo evento relevante.  
2. No menu de blocos, arraste um bloco Table para a tela.
   
3. Abra o menu Styles (Estilos ) do bloco e selecione Dynamic (Dinâmico).
    
4. Defina sua coleção Row: use a parte do site tag do modelo que é consistente em cada item que o senhor gostaria de exibir.
   • Por exemplo, se {{ event.products.0.imageURL }} é a tag da imagem do primeiro item e {{ event.products.1.name }} é a tag do nome do segundo item, então sua coleção de linhas deve ser event.products. 
   • A coleção de linhas quase sempre será a parte da tag que precede o primeiro número (por exemplo, event.extra.line_items se a tag completa for {{ event.extra.line_items.0.product.name }}).
5. Defina seu alias de Row como item. 
6. Retorne à guia de conteúdo do bloco. 
   • Adicione conteúdo a cada célula da tabela. Em geral, a célula à esquerda é uma imagem e a célula à direita é um texto que contém uma tag dinâmica com informações sobre o produto. 
7. Substitua tudo o que precede o primeiro número em cada tag da tabela pelo seu alias de linha (ou seja, "item"). Por exemplo:
   • {{ event.extra.line_items.0.imageURL }} torna-se {{ item.imageURL }} 
   • {{ event.items.0.product.name }} torna-se {{ item.product.name }}
8. Clique em Preview & test para visualizar seu e-mail. 
   • Certifique-se de que a visualização esteja sendo feita com os dados corretos (por exemplo, se for uma mensagem de carrinho abandonado, visualize usando o evento Started checkout ) ou a tabela não exibirá nada. 

Esse processo permite que os desenvolvedores e os profissionais de marketing com conhecimento de código criem conteúdo altamente personalizado. Se não tiver um desenvolvedor em sua equipe e não se sentir à vontade para criar esse bloco por conta própria, considere a possibilidade de entrar em contato com um parceiro da Klaviyo para obter ajuda.

Saiba mais sobre como criar um carrinho abandonado fluxo ou usar dados de eventos para personalizar o e-mail e SMS fluxo.

Como funcionam os blocos de tabelas dinâmicas

Os blocos de tabelas dinâmicas funcionam exatamente como um loop for na maioria das linguagens de programação. 

• A coleção Row identifica a parte dos dados a ser percorrida em loop. 
• O alias Row é um alias para identificar onde o conteúdo dinâmico aparece. 
• Cada tag que usa o alias Row fará referência à linha correta nos dados do evento, com base na linha em que ela aparece. 

Quando o e-mail é renderizado, o site Klaviyo percorre cada item do conjunto de dados. Na primeira vez, o alias da linha é substituído por [row collection].0., fazendo referência ao primeiro item do conjunto de dados. Na segunda vez, o alias da linha é substituído por [row collection].1, indicando o segundo item no conjunto de dados. Esse processo continua até que nenhum item permaneça e haja uma linha para cada item no conjunto de dados. 

Recursos adicionais

• curso: Personalizar e customizar o e-mail usando o Django
• Como exibir produtos verticalmente no e-mail