Como adicionar uma imagem dinâmica a uma notificação push
O que você vai aprender
Saiba como adicionar uma imagem dinâmica a uma notificação push.
Imagens dinâmicas são uma ótima forma de personalizar suas notificações push. Por exemplo, você pode mostrar a alguém o produto exato que ela favoritou, iniciou um checkout ou comprou.
Antes de começar
Você pode usar imagens dinâmicas em:
- Fluxos acionados por métrica, usando dados de evento (por exemplo, itens de um checkout ou de um pedido feito) ou tag do catálogo para um evento.
- Campanhas e fluxos acionados por lista e segmento, mas apenas quando o URL da imagem existir como uma propriedade personalizada no perfil do destinatário.
Além disso, observe o seguinte sobre imagens dinâmicas de push:
- Apenas 1 imagem dinâmica é permitida por notificação push.
- As imagens devem ter menos de 1 MB.
- Você pode usar instruções condicionais com imagens dinâmicas.
Quer solicitar um recurso para as notificações push da Klaviyo? Preencha este formulário do Google para nos contar sobre isso!
Adicionar uma imagem dinâmica a uma notificação push
- Selecione a mensagem em que você quer incluir sua imagem dinâmica.
- Na barra lateral esquerda, clique em Configurar conteúdo ou Editar.
- Adicione ou selecione a notificação push no fluxo.
- Clique no ícone Ver detalhes no canto superior direito.
- Encontre a fonte de dados da imagem que você quer incluir.
- Clique na fonte de dados da primeira variável de uma imagem, que normalmente terminará em 0.
- À esquerda, clique no ícone Inserir mídia na caixa Corpo.
- Vá para a guia Imagem dinâmica.
- Cole a variável dinâmica ou o URL dinâmico da imagem.
- Clique em Save.
- Confirme se a imagem dinâmica foi adicionada corretamente verificando se aparece uma na tela de visualização.
Exemplo de uso de tags do catálogo
Você também pode usar tags de catálogo para adicionar imagens dinâmicas em uma notificação push avançada. Para isso:
- Acesse Análises > Métricas.
- Selecione a métrica que você quer usar (por exemplo, Produto pedido).
- Clique em Detalhes para um evento específico.
- Encontre a tag de SKU ou a tag de ID do produto.
- Copie o rótulo da tag (exceto qualquer parêntese ou dois-pontos) para ter a grafia e a capitalização exatas.
No exemplo abaixo, copiamos "ProductID".
- Cole isso em um lugar onde você não vai perdê-lo.
- Navegue até um fluxo acionado pela mesma métrica que você acabou de selecionar.
- Selecione a notificação push em que você quer incluir sua imagem dinâmica.
- Na barra lateral esquerda, clique em Configurar conteúdo ou Editar.
- À esquerda, clique no ícone Inserir mídia na caixa Corpo.
- Vá para a guia Imagem dinâmica.
- Cole a seguinte tag de catálogo:
{% catalog event.id %} {{catalog_item.featured_image.thumbnail.src}} {% endcatalog %} - Substitua id em {% catalog event.id %} pelo rótulo que você copiou anteriormente.
Exemplo: {% catalog event.ProductID %} {{catalog_item.featured_image.thumbnail.src}} {% endcatalog %} - Clique em Save.
Exemplo de uso de instruções condicionais para imagens dinâmicas
Imagens dinâmicas podem usar instruções condicionais.
A seguir, há um exemplo de uma instrução if/else para dizer que, se houver uma imagem de variante, mostre-a aos destinatários; caso contrário, use a imagem padrão:
{% if event.extra.line_items.0.product.variant.images.0.src %}{{ event.extra.line_items.0.product.variant.images.0.src }}{% else %}{{ event.extra.line_items.0.product.images.0.src }}{% endif %}
Observe que o formato exato dessas declarações depende das suas integrações, e você não deve copiá-las de modelos de e-mail.