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.
| conteúdo layout | Número de colunas | Opções de largura | Tipos de conteúdo permitidos | As colunas podem ser empilhadas na visualização móvel? |
| divisão bloco | 2 | Controle preciso (use as configurações de divisão > Larguras de coluna) | Somente imagem ou texto | Sim |
| Colunas | 1-4 | Seleção limitada | Qualquer tipo de bloco de conteúdo (por exemplo, bloco de texto, bloco de imagem, bloco de citação de revisão) | Sim |
| Bloco de mesa | Qualquer número | Controle preciso (use a largura da coluna > Manual) | Somente imagem ou texto | Não |
As tabelas podem ser um desafio para a acessibilidade, pois os leitores de tela têm dificuldade em analisá-las.
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
- Navegue até um e-mail (ou seja, uma Campanha modelos de e-mail, ou fluxo de e-mail).
- No menu de blocos, arraste um bloco Table para a tela.
- Abra o menu Styles do bloco. Observe que Static já está selecionado, pois essa é a configuração padrão para o bloco de tabelas.
- Em Columns (Colunas), clique em Add column (Adicionar coluna ) para adicionar colunas adicionais.
- Em Rows (Linhas), clique em Add row (Adicionar linha ) para adicionar linhas adicionais.
- Retorne à guia de conteúdo do bloco.
- Use a área do seletor de células para escolher a célula que o senhor deseja editar.
- 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.
- Adicione conteúdo (ou seja, texto ou uma imagem) abaixo do menu Cell conteúdo.
- 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
Se a sua plataforma de comércio eletrônico tiver integrações padrão com o site Klaviyo, o senhor não precisará criar um bloco de tabela dinâmico. Em vez disso, use o bloco de mesa encontrado no carrinho abandonado padrão ou o fluxo de pedido colocado encontrado na biblioteca fluxo.
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
Todas as tags usadas nestas instruções são exemplos e provavelmente diferem da tag correta para sua conta. A tag correta para sua mensagem depende da origem e da estrutura de seus dados (geralmente uma plataforma de comércio eletrônico), que é diferente para muitas contas Klaviyo.
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.
- 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.
- No menu de blocos, arraste um bloco Table para a tela.
- Abra o menu Styles (Estilos ) do bloco e selecione Dynamic (Dinâmico).
- 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 }}).
- Defina seu alias de Row como item.
- 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.
- 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 }}
- 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.