Crear un correo electrónico con HTML personalizado
Los mensajes de correo electrónico son ideales para entregar contenido a tus usuarios en sus propios términos. También son herramientas excelentes para volver a captar a usuarios que incluso pueden haber desinstalado tu aplicación. Enviar mensajes de correo electrónico personalizados y adaptados mejorará la experiencia de tus usuarios y les ayudará a obtener el máximo valor de tu aplicación.
Para ver ejemplos de campañas de correo electrónico, consulta nuestros casos de uso.
Si es la primera vez que creas una campaña de correo electrónico, te recomendamos encarecidamente consultar estos cursos de Braze Learning:
Paso 1: Elige dónde crear tu mensaje
Usa Campaigns para mensajes simples y únicos. Usa Canvas para recorridos de usuario con múltiples pasos.
- Ve a Messaging > Campaigns y selecciona Create Campaign.
- Selecciona Email o, para campañas dirigidas a múltiples canales, selecciona Multichannel.
- Dale a tu campaña un nombre claro y significativo.
- Añade equipos y etiquetas según sea necesario.
- Las etiquetas facilitan encontrar tus campañas y generar informes a partir de ellas. Por ejemplo, al usar el Generador de informes, puedes filtrar por etiquetas específicas.
- Añade y nombra tantas variantes como necesites para tu campaña. Para más información sobre este tema, consulta Pruebas multivariante y A/B.
Si todos los mensajes de tu campaña van a ser similares o tener el mismo contenido, redacta tu mensaje antes de añadir variantes adicionales. Luego puedes elegir Copy from Variant en el desplegable Añadir variante.
- Crea tu Canvas usando el compositor de Canvas.
- Después de configurar tu Canvas, añade un paso en el constructor de Canvas. Dale a tu paso un nombre claro y significativo.
- Elige una planificación de paso y especifica un retraso según sea necesario.
- Filtra tu audiencia para este paso, según sea necesario. Puedes refinar aún más los destinatarios de este paso especificando Segments y añadiendo filtros adicionales. Las opciones de audiencia se verificarán después del retraso, en el momento en que se envíen los mensajes.
- Elige tu comportamiento de avance.
- Elige cualquier otro canal de mensajería que desees combinar con tu mensaje.
Si planeas crear HTML personalizado y necesitas que los fondos se mantengan consistentes en la aplicación móvil de Gmail con el modo oscuro del dispositivo activado, consulta Aplicación móvil de Gmail y colores de fondo en modo oscuro.
Para acceder al editor HTML, ponte en contacto con tu administrador informático para verificar que tu cortafuegos tiene *.bz-rndr.com en la lista de permitidos.
Paso 2: Selecciona tu experiencia de edición
Braze ofrece dos experiencias de edición al crear una campaña de correo electrónico: nuestro editor de arrastrar y soltar y nuestro editor HTML estándar. Elige el mosaico correspondiente a la experiencia de edición que prefieras.
Luego, puedes seleccionar una plantilla de correo electrónico existente, cargar una plantilla desde un archivo (solo editor HTML) o usar una plantilla en blanco.
Si usas el editor HTML y necesitas que los colores de fondo se mantengan consistentes en la aplicación móvil de Gmail cuando el dispositivo está en modo oscuro, consulta Aplicación móvil de Gmail y colores de fondo en modo oscuro.
Recomendamos seleccionar una experiencia de edición por campaña de correo electrónico. Por ejemplo, elige HTML Classic o Block editor en una sola campaña de correo electrónico en lugar de alternar entre editores.
Paso 3: Redacta tu correo electrónico
Después de seleccionar tu plantilla, verás un resumen de tu correo electrónico donde puedes ir directamente al editor de pantalla completa para redactar tu correo, cambiar tu información de envío y ver advertencias sobre capacidad de entrega o cumplimiento legal. Puedes alternar entre las pestañas HTML, clásica, texto plano y AMP mientras redactas.
Braze actualiza automáticamente la versión de texto plano a partir de la versión HTML hasta que detecta una edición en el texto plano. Después de que Braze detecta una edición, deja de actualizar el texto plano porque asume que realizaste cambios intencionales. Para restaurar la sincronización automática, ve a Plaintext y selecciona Regenerate from HTML (visible solo cuando el texto plano no se está sincronizando).
Para añadir movimiento en un correo electrónico con una vista previa precisa, usa GIF en lugar de elementos que requieran JavaScript, ya que la mayoría de las bandejas de entrada no admiten JavaScript.
Braze elimina automáticamente los controladores de eventos HTML referenciados como atributos. Esto modifica el HTML, así que vuelve a revisar el correo electrónico después de terminar. Obtén más información sobre controladores HTML.
¿Necesitas ayuda para crear textos increíbles? Prueba usar el asistente de redacción con inteligencia artificial. Introduce un nombre o descripción de producto y la IA generará textos de marketing similares a los escritos por humanos para usar en tus mensajes.
¿Necesitas ayuda para crear mensajes de derecha a izquierda para idiomas como árabe y hebreo? Consulta Crear mensajes de derecha a izquierda para conocer las buenas prácticas.
Aplicación móvil de Gmail y modo oscuro
La aplicación móvil de Gmail (Android e iOS) puede invertir los colores de fondo cuando el dispositivo está en modo oscuro. Esto puede romper diseños donde el fondo del correo electrónico debe coincidir con el borde de una imagen o un color de marca específico.
Para evitar esto, en la celda de tabla que necesita un fondo estable, usa un linear-gradient CSS de un solo color en lugar de background-color. Gmail tiene menos probabilidades de invertir ese tratamiento que un color de fondo plano.
Por ejemplo, para mantener un fondo blanco en una celda, usa esto:
1
<td style="background-image: linear-gradient(#ffffff, #ffffff);">
Reemplaza #ffffff con el color que desees.
Este enfoque no se aplica de forma fiable solo a elementos <table>, así que establece el degradado en la celda en lugar de solo en la tabla.
Para más información sobre la sintaxis de degradados, consulta Degradados CSS en W3Schools.
Paso 3.1: Añade tu información de envío
Después de terminar de diseñar y construir tu mensaje de correo electrónico, añade tu información de envío en Sending Settings.
- En Sending Info, selecciona un correo electrónico como From Display Name + Address. También puedes personalizar esto seleccionando Customize From Display Name + Address.
- Selecciona un correo electrónico como Reply-To Address. También puedes personalizar esto seleccionando Customize Reply-To Address.
- A continuación, selecciona un correo electrónico como BCC Address para hacer tu correo visible a esta dirección.
- Añade una línea del asunto a tu correo electrónico. Opcionalmente, también puedes añadir un preencabezado y un espacio en blanco después del preencabezado.
Puedes utilizar Liquid en los campos «Nombre para mostrar + Dirección» y «Dirección de respuesta» para crear plantillas dinámicas basadas en atributos personalizados. Esto te permite enviar desde diferentes marcas, regiones o departamentos utilizando una sola campaña de envío por correo electrónico o un solo paso en Canvas.
Una vista previa en el panel derecho se completará con la información de envío que hayas añadido. Esta información también se puede actualizar yendo a Settings > Email Preferences > Sending Configuration.
Avanzado
En Sending Settings > Advanced, activa inline CSS para la compatibilidad más amplia con clientes. Si los mensajes se recortan o las imágenes se estiran a la altura de la fila, prueba desactivar temporalmente inline CSS. Algunas plantillas funcionan mejor sin inlining.
También puedes añadir personalización para encabezados de correo electrónico y extras de correo electrónico para enviar datos adicionales a otros proveedores de servicios de correo electrónico.
Encabezados de correo electrónico
Para añadir encabezados de correo electrónico, selecciona Add New Header. Los encabezados de correo electrónico contienen información sobre el correo que se está enviando. Estos pares clave-valor normalmente incluyen información del remitente, destinatario, protocolo de autenticación y enrutamiento. Braze añade automáticamente la información de encabezado requerida por RFC para que los correos electrónicos lleguen a los proveedores de bandeja de entrada.
Braze te permite la flexibilidad de añadir encabezados de correo electrónico adicionales según sea necesario para casos de uso avanzados. Hay algunos campos reservados que la plataforma Braze sobrescribirá durante el envío.
Evita usar las siguientes claves:
| Campos reservados | ||
|---|---|---|
| BCC | dkim-signature | Reply-To |
| CC | From | Subject |
| Content-Transfer-Encoding | MIME-Version | To |
| Content-Type | Received | x-sg-eid |
| DKIM-Signature | received | x-sg-id |
Añadir extras de correo electrónico
Los extras de correo electrónico te permiten enviar datos adicionales a otros proveedores de servicios de correo electrónico. Esto solo es aplicable para casos de uso avanzados, por lo que solo deberías usar extras de correo electrónico si tu empresa ya tiene esto configurado.
Para añadir extras de correo electrónico, ve a Sending Info y selecciona Add New Extra.
El total de pares clave-valor añadidos no debe superar 1 KB. De lo contrario, los mensajes serán cancelados.
Los valores de extras de correo electrónico no se publican en Currents ni en Snowflake. Si buscas enviar metadatos adicionales o valores dinámicos a Currents o Snowflake, usa message_extras en su lugar.
Paso 3.2: Previsualiza y prueba tu mensaje
Después de terminar de redactar tu correo electrónico, pruébalo antes de enviarlo. Desde la parte inferior de la pantalla de resumen, selecciona Preview and Test.
Aquí puedes previsualizar cómo aparecerá tu correo electrónico en la bandeja de entrada de un cliente. Con Preview as User seleccionado, puedes previsualizar tu correo como un usuario aleatorio, seleccionar un usuario específico o crear un usuario personalizado. Esto te permite comprobar que tus llamadas de contenido conectado y personalización funcionan como deberían.
Luego, puedes usar Copy preview link para generar y copiar un enlace de vista previa compartible que muestre cómo se verá el correo electrónico para un usuario aleatorio. El enlace durará siete días antes de que necesite ser regenerado.
También puedes alternar entre las vistas de escritorio, móvil y texto plano para tener una idea de cómo aparecerá tu mensaje en diferentes contextos.
¿Tienes curiosidad por saber cómo se ve tu correo electrónico para los usuarios en modo oscuro? Selecciona el interruptor Dark Mode Preview ubicado en la sección Preview and Test (solo editor de arrastrar y soltar). Si usas el editor HTML, aún puedes abordar el renderizado del modo oscuro en la aplicación móvil de Gmail con Aplicación móvil de Gmail y modo oscuro.
Cuando estés listo para una revisión final, selecciona Test Send y envía un mensaje de prueba a ti mismo o a un grupo de prueba para confirmar que el correo electrónico se muestra correctamente en diferentes dispositivos y clientes.
Si ves algún problema con tu correo electrónico o quieres hacer cambios, selecciona Edit Email para volver al editor.
Los clientes de correo electrónico que admiten texto de vista previa siempre extraen suficientes caracteres para llenar todo el espacio disponible de texto de vista previa. Sin embargo, esto puede dejarte en situaciones donde el texto de vista previa está incompleto o no optimizado.
Para evitar esto, puedes crear un espacio en blanco después del texto de vista previa deseado para que los clientes de correo electrónico no extraigan otro texto o caracteres que distraigan en el contenido del sobre. Para hacerlo, añade una cadena de no-uniones de ancho cero (‌) y espacios de no separación ( ) después del texto de vista previa que deseas mostrar.
Cuando se añade al final de tu texto de vista previa en la sección de preencabezado, el siguiente fragmento de código para el editor HTML añadirá el espacio en blanco que buscas:
1
<div style="display: none; max-height: 0px; overflow: hidden;"> ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ </div>
Para el editor de arrastrar y soltar, añade solo las no-uniones de ancho cero (‌) sin el formato <div> directamente en el preencabezado en la sección Sending Settings.
Paso 3.3: Verifica errores de correo electrónico
Antes de enviar, el editor señala problemas comunes:
- Nombre para mostrar del remitente y encabezado no configurados juntos
- Direcciones de remitente o responder a no válidas
- Claves de encabezado duplicadas
- Errores de sintaxis Liquid
- Content Blocks que incluyen un
<!DOCTYPE html>completo - El cuerpo del correo electrónico supera los 400 KB
- Apunta a menos de 102 KB para evitar recortes.
- Cuerpo o asunto en blanco
- Falta el enlace para cancelar suscripción
- El dominio del remitente no está en la lista de permitidos (los envíos se limitan considerablemente)
Paso 4: Construye el resto de tu campaña o Canvas
A continuación, construye el resto de tu campaña. Consulta las siguientes secciones para obtener más detalles sobre cómo usar las herramientas de Braze para crear tu campaña de correo electrónico.
Elige la planificación de entrega o el desencadenante
Entrega correos electrónicos basándote en un horario planificado, una acción o un desencadenante de API. Para más información, consulta Planificar tu campaña.
Para campañas desencadenadas por API, cuando la acción desencadenante se establece en Interact With Campaign, seleccionar una opción de Receive como la interacción hará que tu nueva campaña se desencadene tan pronto como Braze marque la campaña seleccionada como enviada, incluso si ese mensaje rebota o no se entrega.
También puedes establecer la duración de la campaña, especificar horas tranquilas y configurar reglas de limitación de frecuencia.
Elige los usuarios objetivo
A continuación, dirige a los usuarios eligiendo Segments o filtros. Braze muestra una vista previa en vivo de la población del segmento, incluyendo cuántos usuarios son alcanzables por correo electrónico. La membresía exacta del segmento se calcula justo antes del envío.
Tu mensaje solo se enviará a los usuarios que ya cumplan las condiciones que hayas establecido en el paso «Audiencia objetivo». Después de eso, aún deben cumplir con el requisito que definas en el paso Programar entrega. Piensa en la audiencia objetivo como una sala de espera: solo las personas que ya están dentro pueden avanzar cuando se produce la siguiente acción.
También puedes elegir enviar tu campaña solo a usuarios que tengan un estado de suscripción específico, como aquellos que están suscritos y han optado por recibir correos electrónicos.
Opcionalmente, también puedes limitar la entrega a un número específico de usuarios dentro del segmento, o permitir que los usuarios reciban el mismo mensaje dos veces en caso de recurrencia de la campaña.
Al crear una nueva campaña de correo electrónico, el grupo de control se establece por defecto en 20 % y se puede ajustar o eliminar según sea necesario para tu campaña.
Campañas multicanal con correo electrónico y push
Para campañas multicanal dirigidas tanto a canales de correo electrónico como push, es posible que desees limitar tu campaña para que solo los usuarios que hayan optado explícitamente reciban el mensaje (excluyendo a los usuarios suscritos o que cancelaron su suscripción). Por ejemplo, supongamos que tienes tres usuarios con diferentes estados de adhesión voluntaria:
- Usuario A está suscrito a correo electrónico y tiene push habilitado. Este usuario no recibe el correo electrónico pero recibirá el push.
- Usuario B ha optado por recibir correo electrónico pero no tiene push habilitado. Este usuario recibirá el correo electrónico pero no recibe el push.
- Usuario C ha optado por recibir correo electrónico y tiene push habilitado. Este usuario recibirá tanto el correo electrónico como el push.
Para hacerlo, en Resumen de audiencia, selecciona enviar esta campaña a «opted-in users only». Esta opción verificará que solo los usuarios que hayan optado recibirán tu correo electrónico, y Braze solo enviará tu push a los usuarios que tengan push habilitado de forma predeterminada.
Con esta configuración, no incluyas ningún filtro en el paso Target Audiences que limite la audiencia a un solo canal (por ejemplo, Foreground Push Enabled = True o Email Subscription = Opted-In).
Elige eventos de conversión
Braze te permite rastrear con qué frecuencia los usuarios realizan acciones específicas, eventos de conversión, después de recibir una campaña. Puedes especificar cualquiera de las siguientes acciones como evento de conversión:
- Abre la aplicación
- Realiza una compra (puede ser una compra genérica o un artículo específico)
- Realiza un evento personalizado específico
- Abre el correo electrónico
Puedes permitir una ventana de hasta 30 días durante la cual Braze cuenta una conversión si el usuario realiza la acción especificada. Aunque Braze rastrea aperturas y clics automáticamente, puedes establecer el evento de conversión como una apertura o un clic para usar Intelligent Selection.
Si aún no lo has hecho, completa las secciones restantes de los componentes de tu Canvas. Para más detalles sobre cómo construir el resto de tu Canvas, implementar pruebas multivariante e Intelligent Selection, y más, consulta el paso Construir tu Canvas de nuestra documentación de Canvas.
Paso 5: Revisa y despliega
La sección final resume la campaña que diseñaste. Confirma todos los detalles relevantes y selecciona Launch Campaign.
Para saber cómo puedes acceder a los resultados de tus campañas de correo electrónico, consulta Informes de correo electrónico.