Como usar um bloco de tabela em um e-mail

O que você vai aprender

Aprenda a usar um bloco de tabela em um e-mail. Esses blocos podem exibir imagens e texto lado a lado. Os blocos de tabela também podem ser dinâmicos, iterando sobre dados para personalizar o e-mail para cada destinatário.

Como funcionam blocos de tabela

Há 2 tipos de blocos de tabela:

• Estático
  Este tipo de bloco de tabela exibe o número exato de linhas e colunas que você seleciona. Cada destinatário vê o mesmo layout de tabela, mas o conteúdo pode variar se você usar tags de personalização, de evento, de catálogo ou outras.
• Dinâmico
  Esses blocos de tabela permitem que você itere sobre uma lista de dados (por exemplo, uma lista de itens em um fluxo de carrinho abandonado ou de confirmação de pedido). O número de linhas é determinado pela quantidade de itens na lista: se alguém pediu 1 item, terá 1 linha; se pediu 5 itens, terá 5 linhas.

O caso de uso mais comum para 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 blocos de tabela

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

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

Blocos de tabela estática

A palavra "static" aqui simplesmente significa que o conteúdo e o número de linhas na tabela permanecem os mesmos para cada destinatário. A única vez que o conteúdo muda é se você adicionar conteúdo dinâmico, como tags de personalização, data e catálogo, dentro de um bloco de tabela estática.

Casos de uso para blocos de tabela estática

Use um bloco de tabela estática para:

• Mostrar um item específico, como em vendas-relâmpago ou lançamentos de produtos.
• Sempre inclua 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 1 item, que inclui:
  • Fluxos de carrinho abandonado (disparador: adicionado ao carrinho)
  • Fluxos de abandono de navegação
  • Fluxos de reposição de estoque e queda de preço
• Você quer colocar texto estático e imagens lado a lado

Como criar um bloco de tabela estática

1. Vá até um e-mail (isto é, um e-mail de campanha, modelo ou e-mail de fluxo).
2. No menu Blocks, arraste um bloco de Tabela para a tela.
   

3. Abra o menu Estilos do bloco. Observe que Estático já está selecionado, pois essa é a configuração padrão para blocos de tabela.
   

4. Em Colunas, clique em Adicionar coluna para adicionar colunas adicionais.
   

5. Em Linhas, clique em Adicionar linha para adicionar linhas adicionais.
   

6. Volte para a aba Conteúdo do bloco.
7. Use a área Seletor de células para escolher qual célula você gostaria de editar.
   

8. Escolha se essa célula deve ser texto ou uma imagem usando o menu Conteúdo da célula. Repita para cada célula.
9. Adicione conteúdo (ou seja, texto ou uma imagem) abaixo do menu Conteúdo da célula.
10. Depois de adicionar conteúdo a todas as células, clique na seta para voltar e retornar ao menu principal de Conteúdo, e continue criando seu e-mail.
    

Blocos de tabela dinâmica

Blocos de tabela dinâmica percorrem um conjunto de dados para repetir conteúdo com base no número de entradas dentro dele. O bloco percorre até chegar ao final da lista. Por exemplo, você pode mostrar o número exato de produtos no carrinho de alguém. 

Para usar um bloco dinâmico, você 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 é a informação de produto encontrada no evento de disparo de um fluxo (por exemplo, checkout iniciado, pedido realizado), mas você também pode usar um feed da web para listar posts do blog ou fazer referência a dados do perfil formatados como uma lista.

Elementos de um bloco de tabela dinâmica

Criar um bloco de conteúdo dinâmico exige 3 elementos:

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

Casos de uso para blocos de tabelas dinâmicas

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

• Fluxos de carrinho abandonado (gatilho: início do checkout)
• Fluxos de confirmação do pedido
• Fluxos de up-selling ou cross-selling

Como criar um bloco de tabela dinâmica

Esta seção aborda os blocos de tabela dinâmica em alto nível. Para instruções mais detalhadas sobre esse processo, saiba como criar blocos dinâmicos em um e-mail de fluxo.

1. Acesse o editor de um e-mail. Se você estiver usando dados de eventos (por exemplo, detalhes de carrinho abandonado), acesse um e-mail em um fluxo acionado pelo evento relevante. 
2. No menu Blocks, arraste um bloco de Tabela para a tela.
   

3. Abra o menu Estilos do bloco e selecione Dinâmico.
   

4. Defina sua coleção de linhas: use a parte da tag de personalização que é consistente em cada item que você gostaria de exibir.
   • Por exemplo, se {{ event.products.0.imageURL }} for a tag da imagem do primeiro item e {{ event.products.1.name }} for 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 vem antes do 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 da linha como item.
6. Volte para a aba 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 tags dinâmicas com informações do produto.
7. Substitua tudo o que vem antes do primeiro número em cada tag na sua tabela pelo alias da sua linha (por exemplo, "item"). Por exemplo:
   • {{ event.extra.line_items.0.imageURL }} se torna {{ item.imageURL }}
   • {{ event.items.0.product.name }} se torna {{ item.product.name }}
8. Clique em Visualizar e testar para visualizar seu e-mail.
   • Certifique-se de que você está visualizando a prévia usando os dados corretos (por exemplo, se esta for uma mensagem de carrinho abandonado, visualize a prévia usando o evento Started checkout), ou a tabela não vai exibir nada.

Esse processo permite que desenvolvedores e profissionais de marketing que dominam código criem conteúdo altamente personalizado. Se você não tem um desenvolvedor na sua equipe e não se sente à vontade para criar este bloco por conta própria, considere entrar em contato com um parceiro da Klaviyo para obter ajuda.

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

Como funcionam os blocos de tabela dinâmica

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

• A coleção de linhas identifica a parte dos dados pela qual fazer o loop.
• O alias de linha é um alias para identificar onde o conteúdo dinâmico aparece.
• Todas as tags que usam o alias de linha vão referenciar a linha correta nos dados do evento, com base em qual linha elas aparecem.

Quando o e-mail é renderizado, a Klaviyo percorre cada item no conjunto de dados. Na primeira vez, o alias da linha é substituído por [row collection].0., referenciando o primeiro item no 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 não restem itens, e há uma linha para cada item no conjunto de dados.

Recursos adicionais