Skip to content

Solución de problemas de correos electrónicos HTML

Usa esta página para resolver problemas comunes del editor de correos electrónicos HTML y de los envíos de prueba. Para Inbox Vision y capacidad de entrega, consulta Inbox Vision y Configuración de correo electrónico.

Empieza aquí: identifica tu síntoma

Busca tu síntoma en la tabla para navegar a la sección correspondiente.

Síntoma Ir a
El HTML del correo electrónico de prueba se ve mal El HTML se renderiza incorrectamente en los correos electrónicos de prueba
El editor se comporta de forma extraña en Chrome Conflictos de extensiones
El correo electrónico se ve diferente en distintos clientes Renderizado de correo electrónico
El correo electrónico muestra código Liquid o enlaces rotos HTML desequilibrado en plantillas Liquid
La vista previa de Inbox Vision no coincide con el correo electrónico enviado Inlining de CSS
Espacios en blanco o líneas después de las imágenes en los correos electrónicos de prueba Espacio en blanco debajo de las imágenes
Los análisis de clics no incluyen parámetros de consulta Limitaciones de los análisis de clics en enlaces
Los superíndices causan un espaciado de línea inconsistente Problemas de altura de línea con superíndices

Ruta de investigación estándar

Usa este flujo de trabajo cuando la representación del correo electrónico HTML o el comportamiento del editor no coincida con lo que esperas. Empieza en el paso 1.

  1. Valida tu marcado HTML en el editor o en un validador externo.
  2. Envía un correo electrónico de prueba y anota qué clientes de correo electrónico o navegadores muestran el problema.
  3. Previsualiza con Inbox Vision para comparar la representación en distintos clientes.
  4. Descarta conflictos con extensiones del navegador si el propio editor se comporta de forma inesperada.
  5. Si el problema persiste, abre un ticket de soporte con capturas de pantalla de Inbox Vision y los clientes afectados.

El HTML se renderiza incorrectamente en los correos electrónicos de prueba

Síntoma

Un correo electrónico de prueba no se ve como esperas desde el editor.

Revisa primero tu configuración HTML y después consulta conflictos de extensiones, renderizado de correo electrónico, inlining de CSS y espacio en blanco debajo de las imágenes.

Conflictos de extensiones

Ciertas extensiones del navegador pueden causar problemas con el editor de correo electrónico. Un ejemplo es Grammarly cuando se usa con Google Chrome. Si estás usando una de estas extensiones, deberías:

  • Editar los correos electrónicos de Braze en un navegador que no tenga Grammarly como extensión del navegador.
  • Ponerte en contacto con tu director de cuentas de Braze y solicitar cambiar tus editores de correo electrónico a solo HTML o texto plano.

La vista de texto plano elimina tu editor WYSIWYG (lo que ves es lo que obtienes), así que primero deberías confirmar que todos los miembros del equipo se sienten cómodos con HTML antes de hacer esta solicitud.

Renderizado de correo electrónico

Los correos electrónicos se renderizan de forma diferente según los navegadores y los clientes de correo electrónico, así que toma nota de con qué navegadores y clientes de correo electrónico estás experimentando problemas.

  • Previsualiza tus correos electrónicos usando Inbox Vision para ver cómo se ven en diferentes navegadores y clientes de correo electrónico.
  • Una vez que hayas identificado qué navegadores o clientes de correo electrónico están causando problemas, informa a tu equipo de desarrolladores de que necesitarán modificar su HTML y hacer ajustes para adaptarse a esos navegadores o clientes de correo electrónico.
  • Si el problema es específico de cómo se muestra el texto alternativo, ten en cuenta que este comportamiento lo controla el cliente de correo electrónico del destinatario, no Braze.

HTML desbalanceado en plantillas Liquid

Síntoma

Algunos usuarios reciben una versión modificada del correo electrónico en la que el código Liquid se muestra en el mensaje, los enlaces están rotos o el espaciado se ve incorrecto.

Braze utiliza un analizador HTML interno para preparar los correos electrónicos antes de enviarlos. Este analizador admite características como la generación de preencabezados, la colocación de píxeles de seguimiento, la creación de plantillas de enlaces y el aliasing de enlaces. Cuando las etiquetas HTML no están balanceadas dentro de sus bloques lógicos Liquid o Content Blocks correspondientes, el analizador puede modificar el HTML subyacente de formas inesperadas. Esto puede provocar:

  • Saltos de línea del renderizado de Liquid que aparecen en algunos clientes de correo electrónico
  • Espaciado extraño por etiquetas <p> añadidas al cuerpo del correo electrónico
  • Contenido de la etiqueta <head> movido al preencabezado
  • Renderizado inconsistente entre sistemas operativos móviles
  • Código específico de AMP eliminado de los cuerpos de correo electrónico AMP, lo que causa fallos de validación
  • Enlaces rotos cuando se utilizan muchos parámetros de consulta o media queries diferentes

Balancear HTML dentro de bloques Liquid

Asegúrate de que todas las etiquetas HTML se abran y cierren dentro de su bloque lógico Liquid o Content Block correspondiente. Esto evita que el analizador interno interprete el HTML como inválido y lo modifique.

Ejemplo 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 %} />

En este ejemplo, la etiqueta de apertura <img comienza fuera de cualquier bloque Liquid, y diferentes partes de los atributos de la etiqueta están divididas entre sentencias condicionales Liquid. Esta estructura confunde al analizador, que no puede determinar dónde comienza o termina la etiqueta.

Ejemplo 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 %}

En la versión balanceada, cada rama Liquid contiene una etiqueta <img> completa e independiente. Este enfoque garantiza que el analizador procese cada rama correctamente.

Correcciones adicionales

Si estás experimentando problemas de renderizado con media queries o muchos parámetros de consulta, intenta desactivar el inlining de CSS en la configuración de tu correo electrónico. Esto puede resolver conflictos entre el analizador HTML y reglas CSS complejas.

Inlining de CSS

Hay ocasiones en las que las vistas previas en Inbox Vision aún no coinciden con lo que se envía con Braze. Esto puede deberse a la diferencia en el inlining de CSS realizado por Braze y por otras herramientas. Si sospechas que este es el caso, desactiva el inlining de CSS.

Espacio en blanco debajo de las imágenes

Síntoma

Aparecen espacios en blanco o líneas después de las imágenes en los correos electrónicos de prueba.

Si notas espacios en blanco o líneas que aparecen después de las imágenes en tus correos electrónicos de prueba, esto suele deberse a cómo los clientes de correo electrónico renderizan los elementos de nivel inline. Las imágenes son de nivel inline de forma predeterminada y se alinean con la línea base, lo que permite a los navegadores acomodar los descendentes (la parte de letras como «g» o «y» que se extiende por debajo de la línea base). Esto crea un pequeño espacio que aparece como espacio en blanco.

Para solucionarlo, añade display: block; al CSS de tu imagen:

1
2
3
4
5

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

Alternativamente, aplica el estilo directamente a imágenes específicas:

1

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

Síntoma

Los análisis de clics para correos electrónicos con muchos parámetros de consulta únicos no coinciden con tus expectativas. Es posible que veas recuentos de clics agregados para URL sin parámetros después de los primeros 100 enlaces únicos.

Braze realiza el seguimiento de clics tanto en URL parametrizadas (con parámetros de consulta) como en URL base sin parámetros. Para los primeros 100 enlaces parametrizados únicos en los que se hace clic en una Campaign de correo electrónico o un Canvas, Braze recopila y reporta datos para ambos:

  • La URL parametrizada completa (por ejemplo, https://example.com?user_id=12345)
  • La URL base sin parámetros (por ejemplo, https://example.com)

Después de que se haga clic en los primeros 100 enlaces parametrizados únicos, Braze solo incrementa los recuentos de clics para la URL base sin parámetros. Esto significa que:

  • Los análisis de clics se agregan en el dominio base y la ruta en lugar de en combinaciones individuales de parámetros de consulta
  • Aún puedes realizar el seguimiento de la participación significativa basándote en las rutas de los enlaces
  • El seguimiento de clics a nivel de usuario individual sigue funcionando con normalidad

Este comportamiento evita que los análisis se inflen con miles de combinaciones únicas de parámetros de consulta, al tiempo que se capturan los patrones generales de participación con los enlaces.

Qué significa esto para tus Campaigns

Si dependes de parámetros de consulta únicos para realizar el seguimiento del comportamiento específico de los usuarios en plataformas externas (por ejemplo, https://example.com?user_id=USER_ID), ten en cuenta que los análisis de clics de Braze solo conservarán esos parámetros para los primeros 100 enlaces únicos en los que se haga clic. Después de ese umbral, los clics siguen registrándose en tus análisis, pero se atribuyen a la URL sin parámetros.

Los datos de clics a nivel de usuario siguen disponibles a través de Currents o el registro de actividad de mensajes, independientemente de cuántos enlaces parametrizados únicos se hayan clicado.

Problemas de altura de línea con superíndices

Síntoma

El texto con superíndices aparece con un espaciado de línea inconsistente, donde las líneas parecen más juntas o más separadas de lo previsto. Este es un problema de renderizado común en los clientes de correo electrónico y no es específico de Braze.

El uso de superíndices en correos electrónicos puede causar un comportamiento inesperado en la altura de línea porque los distintos clientes de correo electrónico manejan el texto en superíndice de maneras diferentes.

Resolución

Usa el editor HTML para controlar el estilo de los superíndices y los elementos circundantes.

Para definir explícitamente la altura de línea, añade CSS en línea para establecer el line-height del texto:

1

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

Para ajustar la alineación vertical, usa la propiedad vertical-align para alinear el superíndice sin alterar la altura de línea:

1

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

Si los superíndices siguen causando problemas, usa un <span> como alternativa a <sup> para tener más control:

1

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