Como mostrar ou ocultar blocos e seções do modelo com base em variáveis dinâmicas
O que você vai aprender
Saiba como mostrar um bloco ou seção específico em um e-mail para determinados destinatários usando o criador de lógica de mostrar/ocultar do editor de modelos.
Você pode usar isso para exibir conteúdos diferentes para, por exemplo, pessoas em determinados níveis de fidelidade ou que compraram um produto específico. Esse recurso permite que você segmente o conteúdo do seu e-mail com base em informações sobre seus assinantes, para que cada destinatário tenha uma experiência de marketing altamente personalizada.
Antes de começar
Você pode mostrar/ocultar conteúdo com base em:
- Dados de perfil (ou seja, perfil ou propriedades personalizadas)
- Variáveis de eventos, mas apenas para:
- Fluxos acionados por eventos (também chamados de fluxos acionados por métricas)
- Blocos de mostrar/ocultar com código personalizado
Antes de criar seu e-mail, você precisa ter os dados necessários na sua conta. Em outras palavras, você precisa ter 1 evento ou perfil com a propriedade que quer usar.
Usando dados do perfil
Se você quiser mostrar/ocultar condições com base em dados do perfil (por exemplo, local, idioma etc.), você precisa de pelo menos 1 perfil com esses dados.
O perfil e as propriedades personalizadas podem ser adicionados das seguintes maneiras:
- Formulários de registro
- Uploads de CSV
- Integrações de e-commerce
- Liste integrações de crescimento da lista e fidelidade, como Typeform ou Yotpo
Saiba mais sobre Propriedades do perfil no Klaviyo.
Usar propriedades do evento
Da mesma forma, para propriedades de evento, deve haver 1 evento na sua conta Klaviyo. Em seguida, você pode mostrar/ocultar blocos com base no evento de acionamento desse fluxo usando blocos com código personalizado. Você não pode referenciar dados de evento usando o criador de lógica.
Assim, em um fluxo de carrinho abandonado com o gatilho Started Checkout, você pode criar condições de mostrar/ocultar com base no valor de um carrinho ou nos itens específicos que o cliente adicionou.
Digite sua mensagem
O criador de lógica de mostrar/ocultar é compatível com dados de perfil formatados como texto, números e listas. Ele não é compatível com dados de evento, datas ou booleanos. Se você quiser usar dados não compatíveis na sua condição de mostrar/ocultar, use código personalizado para escrever a condição.
- Adicione um bloco ou uma seção a um modelo de e-mail.
- Selecione a aba Exibição.
- Em Mostrar/ocultar lógica, selecione Usar o criador de lógica.
- Selecione uma condição.
- Você pode criar uma condição simples com um único critério ou uma condição mais complexa com vários critérios conectados por AND ou OR. Saiba mais sobre conectores AND versus OR.
- Use o botão Adicionar condição para adicionar condições adicionais, se desejar.
- Selecione Save.
Se você usar a lógica de mostrar/ocultar em uma seção e em um bloco dentro dessa seção, as configurações podem interagir e causar conflitos. Saiba mais no nosso artigo sobre opções de exibição.
E vs. OU em condições de mostrar/ocultar
Ao avaliar a lógica de mostrar/ocultar, as condições conectadas por AND são avaliadas antes das condições conectadas por OR. Ao escrever sua lógica, considere a ordem em que ela será avaliada para garantir que seja interpretada como você pretende.
Como exemplo, considere a seguinte condição:
Com base nestes critérios, veja se o bloco fica visível para alguns destinatários de amostra:
Destinatário | O bloco aparece? | Por quê? |
Joana loyalty_points = 145 Cor favorita = verde Fruta favorita = banana | Não | Jane poderia se qualificar se a cor favorita dela fosse azul ou se a fruta favorita dela fosse banana. |
Alex Cor favorita = azul Fruta favorita = maçã | Não | O Alex poderia se qualificar com mais pontos de fidelidade ou se a fruta favorita dele fosse kiwi. |
Amanda Cor favorita = azul Fruta favorita = romã | Sim | Amanda se qualifica porque ela tem > 99 pontos de fidelidade e a cor favorita dela é azul. A fruta favorita dela não é considerada porque ela atende aos dois critérios no lado oposto do operador OR. |
Stephanie Cor favorita = laranja Fruta favorita = kiwi | Sim | Stephanie se qualifica porque a fruta favorita dela é kiwi. As outras condições não são consideradas porque ela atende aos critérios de um lado do operador OR. |
Casos de uso de blocos mostrar/ocultar
Banner do programa de fidelidade
Se você tiver um programa de fidelidade, mostre aos participantes com atividade quantos pontos eles têm no momento. Ofereça aos contatos que ainda não se inscreveram no programa um incentivo para participar. Para configurar isso, você vai precisar de 2 banners.
Mostre aos participantes com atividade do programa de fidelidade um banner com esta condição de exibir/ocultar:
Pontos de fidelidade > é maior que 0
Mostrar aos potenciais clientes um banner com esta condição:
loyalty_points > não está definido
Talvez você precise ajustar os critérios com base nos dados disponíveis na sua própria conta.
Imagens personalizadas
Se você coletar informações sobre como seus assinantes usam seu produto, mostre a eles imagens que tenham relação com eles.
Por exemplo, uma marca que vende mochilas pode perguntar se os assinantes as usam para ir ao trabalho, viajar ou fazer trilhas. Dependendo da resposta, essa marca pode mostrar imagens dos seus produtos nesses ambientes.
Para configurar isso, você vai precisar de 3 blocos de imagem mostrando seu produto em 3 cenários diferentes.
Mostre aos usuários em deslocamento uma imagem de um ciclista usando a mochila durante o trajeto com esta condição:
Preferência de bolsa = Deslocamento
Mostre aos viajantes uma foto de uma das suas mochilas em um aeroporto movimentado com esta condição:
Preferência de bagagem = Viagem
Mostre para todas as outras pessoas uma foto de uma das suas mochilas em uma paisagem externa cênica com esta condição:
Preferência de bolsa > não é igual a > Viagem AND Preferência de bolsa > não é igual a > Deslocamento
Observe que a última imagem não é direcionada apenas a quem faz trilha; qualquer pessoa que não seja um(a) usuário(a) que se desloca diariamente ou um(a) viajante vai vê-la. É importante considerar os destinatários que talvez não tenham essa propriedade definida, para que seu e-mail fique ótimo para todo mundo.
Notas específicas do produto
Para fazer referência a um item dentro do evento de gatilho de um fluxo, é necessário usar código personalizado.
Comunique informações específicas do produto para abandonadores de carrinho, para dar a eles informações essenciais que podem influenciar a decisão de compra. Por exemplo, se um produto estiver acabando, adicione um bloco de texto com um aviso de baixo estoque que só aparece para pessoas com esse item no carrinho com esta condição:
ITEM_NAME in event.Items
Mensagens específicas por local
Condições específicas de localização só podem avaliar texto; elas não podem avaliar a distância de um CEP. Mostre um banner personalizado para moradores que vivem em uma determinada área, como aqueles na mesma cidade que sua loja pop-up física, com esta condição:
Cidade = Boston
Solução de problemas de blocos de mostrar/ocultar
Se o seu bloco de mostrar/ocultar não estiver sendo renderizado como esperado, use o botão Converter em código para converter a lógica do editor em código. Depois, você pode inspecionar e ajustar o código para renderizar como esperado.
A conversão da lógica em código não é reversível.
Ao solucionar problemas, confirme se o tipo de dado usado no valor da condição é o mesmo que o tipo de dado nos perfis aos quais você está se referindo. Por exemplo, o número 22 é diferente do valor de texto "22". Se a sua condição estiver definida como Número, mas seus valores estiverem armazenados como texto no perfil, a condição não vai conseguir avaliar corretamente.
Convertendo texto em números
Se você tiver propriedades numéricas, mas elas estiverem armazenadas como texto em um perfil, você poderá convertê-las em números no campo de código personalizado usando o filtro |multiply. Para usar isso, adicione o filtro diretamente após o nome da variável:
person.Birthday|multiply:"1" > 21
Valores booleanos armazenados como texto
Se seus dados verdadeiro/falso estiverem armazenados como texto, não como um booleano, ou se você estiver fazendo referência a uma propriedade que contém booleanos e texto, você pode usar essas estruturas para abranger todos os cenários. Inclua todas as grafias e capitalizações presentes nos seus dados.
Condição de amostra | Mostrar o bloco se... |
person|lookup:'VIP' == 1 or person|lookup:'VIP' == 'true' or person|lookup:'VIP' == 'True' | A propriedade VIP é definida como o valor booleano true ou as strings true ou True |
person|lookup:'VIP' == 0 or person|lookup:'VIP' == 'false' or person|lookup:'VIP' == 'False' | A propriedade VIP é definida como o valor booleano false ou as strings false ou False |
Caracteres não alfanuméricos nas propriedades
Se as propriedades ou valores referenciados pelo seu bloco de mostrar/ocultar contiverem caracteres não alfanuméricos (por exemplo, símbolos como =, ), sua condição não será aceita e você verá uma mensagem de erro. Para obter os melhores resultados, use apenas letras (maiúsculas ou minúsculas, com distinção entre maiúsculas e minúsculas), números, sublinhados (_), ou hifens (-).
Mostrar/ocultar blocos de codificação personalizada
Se você preferir mais controle, ou se quiser criar uma condição usando dados de eventos, datas ou booleanos, personalize o código dos seus blocos de mostrar/ocultar em vez de usar o construtor de lógica. Para começar do zero usando código, selecione o botão Usar código nas configurações da lógica de mostrar/ocultar.
Como alternativa, converta uma condição existente de mostrar/ocultar para usar código com o botão Converter para código.
A conversão da lógica em código não é reversível.
Se você optar por usar código, garanta que tenha um bom entendimento de Django, lógica de programação e dos tipos de dados da Klaviyo. A equipe de suporte da Klaviyo não pode oferecer suporte direto nem solucionar problemas de código personalizado.
Saiba mais sobre estruturas de condição compatíveis.
Mostrar/ocultar condições com base nos dados do evento
Se o seu e-mail for enviado como parte de um fluxo acionado por evento (por exemplo, um fluxo de carrinho abandonado ou de confirmação de pedido), você poderá mostrar/ocultar blocos com base nos detalhes do evento de gatilho desse fluxo. Então, em um fluxo de carrinho abandonado com o gatilho Started Checkout, você pode criar condições de mostrar/ocultar com código personalizado com base no valor do carrinho ou nos itens específicos que o cliente adicionou. Saiba mais sobre variáveis de eventos.
Entenda como os dados são armazenados
Antes de configurar sua condição de mostrar/ocultar, verifique como seus dados são armazenados. Existem 5 tipos de dados na Klaviyo:
- Texto
- Número
- Data
- Booleano
- Lista
A forma como seus dados são armazenados vai influenciar quais condições de mostrar/ocultar funcionarão para você. Saiba como identificar tipos de dados na sua própria conta.
Digite sua mensagem
A primeira etapa para adicionar condições de mostrar/ocultar com código personalizado em uma mensagem é criar o modelo de e-mail. Esta seção vai apresentar um exemplo específico, mas você pode seguir as mesmas etapas para definir qualquer bloco para ser exibido com base nos seus próprios critérios.
Por exemplo, se a sua empresa vende bolsas de couro, você pode coletar as preferências dos clientes sobre como eles usam as bolsas com um formulário de registro, como mostrado abaixo.
Você pode, então, exibir uma imagem diferente com base na preferência de bolsa do seu cliente. Por exemplo, se a preferência do cliente for "Trabalho", a bolsa aparecerá em uma imagem ao lado de um laptop. Se a preferência do cliente for "Ao ar livre", a bolsa aparecerá perto de um mirante em uma trilha de caminhada.
- Crie uma mensagem de campanha ou de fluxo.
- Adicione um bloco de imagens.
- Faça upload da imagem relacionada ao trabalho no bloco.
- Clique em Exibir no menu de personalização do bloco de imagem.
- Em Mostrar/ocultar lógica, selecione Usar código.
- Adicione esta condição: person|lookup:'Bag Preference' == 'Work'.
- Clique em Salvar alterações.
- Clique em Concluído no bloco.
Este bloco será exibido apenas para pessoas que selecionaram "Trabalho" como preferência.
Em seguida, adicione a imagem relacionada a viagem em um novo bloco abaixo da imagem relacionada a trabalho. Siga as mesmas etapas de antes, mas, desta vez, use a condição person|lookup:'Bag Preference' == 'Outdoors'.
Este bloco só será exibido para pessoas que selecionaram "Ao ar livre" como preferência.
Por fim, adicione uma imagem para aparecer para qualquer pessoa que não tenha selecionado "Trabalho" nem "Ao ar livre." Use uma imagem mais genérica e esta condição: person|lookup:'Bag Preference' != 'Work' e person|lookup:'Bag Preference' != 'Outdoors'.
Aqui, != significa "não é igual a"; portanto, essa condição procura pessoas que escolheram algo diferente de “Trabalho” ou “Atividades ao ar livre” ou que nunca selecionaram uma preferência.
Depois de configurar cada um dos blocos, visualize a prévia da sua mensagem usando 3 perfis. Esses perfis devem ser assinantes que atendam a um dos critérios de imagem:
- Cliente que escolheu "Atividades ao ar livre"
- Cliente que escolheu "Trabalho"
- E clientes sem preferência/outra preferência
Você pode usar estas etapas para mostrar ou ocultar blocos com base em qualquer dado de perfil ou de evento na sua conta.
Crie uma condição de mostrar/ocultar com dados de perfil
Se você estiver criando uma condição de mostrar/ocultar com código personalizado com base em uma Propriedade do perfil, substitua a variável de exemplo das tabelas na referência de lógica condicional (por exemplo, person|lookup:'Favorite Color') pela Propriedade do perfil.
Para encontrar a variável correta a ser usada:
- Clique em Personalização para abrir o menu de personalização.
- Escolha uma opção no menu para adicioná-la ao bloco de texto.
- Copie o nome da variável de dentro da tag. Para identificar o nome da variável, remova as chaves ao redor da variável, bem como |default:'' no final (se houver), junto com quaisquer outros filtros.
Por exemplo, na captura de tela abaixo, a tag completa é {{ person|lookup:"Accepts Marketing"|default:"" }}. O nome da variável é person|lookup:"Accepts Marketing", então selecione essa parte para usar na sua condição de mostrar/ocultar.
Crie uma condição de mostrar/ocultar com dados do evento
Você pode usar dados de evento para mostrar ou ocultar um bloco se sua mensagem fizer parte de um fluxo acionado por evento. Somente dados dentro do evento de acionamento podem ser usados em uma condição de mostrar/ocultar.
Para identificar variáveis de eventos:
- No editor de modelos, clique em Visualização e teste.
- Em Pré-visualizar fonte de dados, clique em Evento.
- No menu suspenso, selecione o evento que acionará a mensagem que você está criando.
- Role pelas Propriedades do evento para encontrar os dados que você gostaria de incluir.
- Clique no nome da propriedade para copiar a tag.
- Cole a tag em um bloco de texto ou editor de texto.
- Remova as chaves (ou seja, {{ e }}) da tag, assim como quaisquer filtros.
- Use a variável que permanece na sua condição de exibição/ocultação.
Na captura de tela abaixo, você verá a tag {{ event|lookup:'Item Count' }}. Você só vai precisar do texto event|lookup:'Item Count' para sua condição de mostrar/ocultar. Observe que seus dados podem usar uma estrutura diferente, como {{ event.extra.line_items.0.title }} ou {{ event.ShippingAddress.address1 }}. Use a variável como ela aparece nos dados do seu evento.
Personalize suas condições de mostrar/ocultar
Saiba como criar condições personalizadas de mostrar/ocultar usando a referência de lógica condicional. Este recurso contém exemplos de condições, que você pode personalizar usando seus próprios dados de perfil e de evento.
Recursos adicionais
- Conditional logic reference for templates
Learn about all the available conditions you can use to dynamically display a block, section, or custom-coded piece of content only to certain recipients. To learn how to use these conditions in your templates, head to our article on how to show or hide template blocks based on dynamic variables.
- Message personalization reference
Learn how to use Klaviyo’s personalization variables, or tags, to customize the experience for your customers.
- Understanding profiles in Klaviyo
Learn about profiles, including how to find them and the data available on the profile page. Profiles are used to keep track of all the information you have about your customers and prospects.
- Apply programming logic concepts to build more personalized messages