Solução de problemas de e-mails HTML

Use esta página para resolver problemas comuns do editor de e-mail HTML e de envios de teste. Para Inbox Vision e entregabilidade, consulte Inbox Vision e Configuração de e-mail.

Comece aqui: identifique seu sintoma

Identifique seu sintoma na tabela para acessar a seção relevante.

Caminho de investigação padrão

Use este fluxo de trabalho quando a renderização do e-mail em HTML ou o comportamento do editor não corresponder ao esperado. Comece pela etapa 1.

1. Valide sua marcação HTML no editor ou em um validador externo.
2. Envie um e-mail de teste e anote quais clientes de e-mail ou navegadores apresentam o problema.
3. Visualize a prévia com o Inbox Vision para comparar a renderização entre os clientes.
4. Descarte conflitos com extensões do navegador se o próprio editor apresentar comportamento inesperado.
5. Se o problema persistir, abra um ticket de suporte com capturas de tela do Inbox Vision e dos clientes afetados.

O HTML é renderizado incorretamente em e-mails de teste

Sintoma

Um e-mail de teste não corresponde ao que você espera ver no editor.

Primeiro, verifique a configuração do seu HTML. Depois, revise conflitos de extensões, renderização de e-mail, inlining de CSS e espaço em branco abaixo das imagens.

Conflitos de extensões

Algumas extensões de navegador podem causar problemas no editor de e-mail. Um exemplo é o Grammarly usado com o Google Chrome. Se você usa uma dessas extensões, faça uma destas opções:

• Edite os e-mails da Braze em um navegador que não tenha o Grammarly instalado como extensão.
• Entre em contato com o gerente da sua conta na Braze e peça para trocar seus editores de e-mail para somente HTML ou texto simples.

A visualização em texto simples remove o editor WYSIWYG (o que você vê é o que você obtém). Por isso, confirme antes que todos os membros da equipe se sentem confortáveis com HTML antes de fazer essa solicitação.

Renderização de e-mail

Os e-mails são renderizados de forma diferente dependendo do navegador e do cliente de e-mail. Então, anote em quais navegadores e clientes de e-mail você está enfrentando problemas.

• Faça uma prévia dos seus e-mails com o Inbox Vision para ver como eles aparecem em diferentes navegadores e clientes de e-mail.
• Depois de identificar quais navegadores ou clientes de e-mail estão causando problemas, avise sua equipe de desenvolvimento. Ela vai precisar modificar o HTML e fazer ajustes para acomodar esses navegadores ou clientes de e-mail.
• Se o problema for específico de como o texto alternativo é exibido, lembre-se de que esse comportamento é controlado pelo cliente de e-mail do destinatário, e não pela Braze.

HTML desbalanceado em modelos Liquid

Sintoma

Alguns usuários recebem uma versão modificada do e-mail em que o código Liquid aparece na mensagem, os links estão quebrados ou o espaçamento parece incorreto.

A Braze usa um parser HTML interno para preparar os e-mails antes do envio. Esse parser oferece suporte a recursos como geração de pré-cabeçalho, posicionamento do pixel de rastreamento, modelagem de links e aliasing de links. Quando as tags HTML não estão balanceadas dentro dos blocos de lógica Liquid ou blocos de conteúdo correspondentes, o parser pode modificar o HTML subjacente de maneiras inesperadas. Isso pode resultar em:

• Quebras de linha do Liquid renderizadas em alguns clientes de e-mail
• Espaçamento estranho causado por tags <p> adicionadas ao corpo do e-mail
• Conteúdo da tag <head> movido para o pré-cabeçalho
• Renderização inconsistente entre sistemas operacionais móveis
• Código específico de AMP removido do corpo de e-mails AMP, causando falhas de validação
• Links quebrados quando muitos parâmetros de consulta ou media queries diferentes são usados

Balanceie o HTML dentro dos blocos Liquid

Garanta que todas as tags HTML abram e fechem dentro do bloco de lógica Liquid ou do bloco de conteúdo correspondente. Isso evita que o parser interno interprete o HTML como inválido e o modifique.

Exemplo desbalanceado

1

<img src={% if ${language} == 'en' %}"https://example.com/images/banner-en.png" style="width: 100%"{% elsif ${language} == 'de' %}"https://example.com/images/banner-de.png"{% else %}"https://example.com/images/banner-default.png" {% endif %} />

Neste exemplo, a tag de abertura <img começa fora de qualquer bloco Liquid, e diferentes partes dos atributos da tag estão divididas entre instruções condicionais Liquid. Essa estrutura confunde o parser, que não consegue determinar onde a tag começa ou termina.

Exemplo balanceado

1
2
3
4
5
6
7

{% if ${language} == 'en' %}
  <img src="https://example.com/images/banner-en.png" style="width: 100%;" />
{% elsif ${language} == 'de' %}
  <img src="https://example.com/images/banner-de.png" style="width: 100%;" />
{% else %}
  <img src="https://example.com/images/banner-default.png" style="width: 100%;" />
{% endif %}

Na versão balanceada, cada ramificação Liquid contém uma tag <img> completa e independente. Essa abordagem garante que o parser processe cada ramificação corretamente.

Correções adicionais

Se você estiver enfrentando problemas de renderização com media queries ou muitos parâmetros de consulta, tente desativar o inlining de CSS nas configurações de e-mail. Isso pode resolver conflitos entre o parser HTML e regras CSS complexas.

Inlining de CSS

Às vezes, as prévias no Inbox Vision ainda não correspondem ao que é enviado pela Braze. Isso pode acontecer por causa da diferença entre o inlining de CSS feito pela Braze e o feito por outras ferramentas. Se você suspeitar que esse é o caso, desative o inlining de CSS.

Espaço em branco abaixo das imagens

Sintoma

Espaços em branco ou linhas aparecem depois das imagens nos e-mails de teste.

Se você notar espaços em branco ou linhas depois das imagens nos seus e-mails de teste, isso geralmente acontece por causa da forma como os clientes de e-mail renderizam elementos inline. Por padrão, as imagens são elementos inline alinhados à linha de base. Isso permite que os navegadores acomodem os descendentes (a parte de letras como “g” ou “y” que se estende abaixo da linha de base). O resultado é um pequeno espaço que aparece em branco.

Para corrigir isso, adicione display: block; ao CSS da sua imagem:

1
2
3
4
5

<style>
  img {
    display: block;
  }
</style>

Se preferir, aplique o estilo diretamente em imagens específicas:

1

<img src="https://example.com/image.jpg" style="display: block;" alt="Image description" />

Limitações da análise de dados de cliques em links

Sintoma

A análise de dados de cliques para e-mails com muitos parâmetros de consulta únicos não corresponde às suas expectativas. Você pode ver contagens de cliques agregadas para URLs sem parâmetros após os primeiros 100 links únicos.

Como funciona o rastreamento de cliques em links

A Braze rastreia cliques tanto em URLs parametrizadas (com parâmetros de consulta) quanto em URLs base sem parâmetros. Para os primeiros 100 links parametrizados únicos clicados em uma Campaign de e-mail ou Canvas, a Braze coleta e reporta dados para ambos:

• A URL parametrizada completa (por exemplo, https://example.com?user_id=12345)
• A URL base sem parâmetros (por exemplo, https://example.com)

Após os primeiros 100 links parametrizados únicos serem clicados, a Braze incrementa apenas as contagens de cliques para a URL base sem parâmetros. Isso significa que:

• A análise de dados de cliques é agregada no domínio base e no caminho, em vez de combinações individuais de parâmetros de consulta
• Você ainda pode rastrear engajamento significativo com base nos caminhos dos links
• O rastreamento de cliques no nível do usuário individual continua funcionando normalmente

Esse comportamento evita que a análise de dados fique sobrecarregada com milhares de combinações únicas de parâmetros de consulta, enquanto ainda captura padrões gerais de engajamento com links.

O que isso significa para suas campanhas

Se você depende de parâmetros de consulta únicos para rastrear o comportamento específico de usuários em plataformas externas (por exemplo, https://example.com?user_id=USER_ID), esteja ciente de que a análise de dados de cliques da Braze preservará esses parâmetros apenas para os primeiros 100 links únicos clicados. Após esse limite, os cliques ainda são registrados na sua análise de dados, mas são atribuídos à URL sem parâmetros.

Os dados de cliques no nível do usuário permanecem disponíveis por meio do Currents ou do Registro de atividade de mensagens, independentemente de quantos links parametrizados únicos forem clicados.

Problemas de altura de linha com sobrescrito

Sintoma

Textos com sobrescritos aparecem com espaçamento de linha inconsistente, onde as linhas parecem mais próximas ou mais afastadas do que o pretendido. Esse é um problema de renderização comum entre clientes de e-mail e não é específico da Braze.

O uso de sobrescrito em e-mails pode causar um comportamento inesperado na altura da linha porque diferentes clientes de e-mail lidam com texto sobrescrito de maneiras variadas.

Resolução

Use o editor de HTML para controlar a estilização dos sobrescritos e dos elementos ao redor.

Para definir explicitamente a altura da linha, adicione CSS inline para definir o line-height do texto:

1

<p style="line-height: 1.5;">Example text with superscript<sup style="line-height: inherit;">1</sup></p>

Para ajustar o alinhamento vertical, use a propriedade vertical-align para alinhar o sobrescrito sem afetar a altura da linha:

1

<sup style="vertical-align: top; font-size: smaller;">1</sup>

Se os sobrescritos continuarem causando problemas, use um <span> como alternativa ao <sup> para ter mais controle:

1

<span style="font-size: smaller; vertical-align: top;">1</span>