Introducción
Ya seas responsable de marketing, diseñador o programador, trabajar de forma conjunta para crear emails transaccionales atractivos nunca ha sido fácil... hasta hoy con el Editor de Emails:
Los diseñadores de emails y los responsables de marketing pueden diseñar ahora fantásticas e impactantes plantillas transaccionales sin conocimientos de programación:
- Diseña tus emails transaccionales con la función arrastrar y soltar.
- Previsualiza tus emails en tiempo real en múltiples dispositivos.
- Gestiona tus plantillas en la librería online de tu empresa.
Los desarrolladores también podrán usar funciones avanzadas para crear plantillas enriquecidas que adaptan sus contenidos a las características de los destinatarios:
- Crea secciones condicionales gracias a las variables enviadas a Send API.
- Usa bloques de código HTML.
- Añade bucles condicionales y arrays usando el lenguaje de plantillas de Mailjet.
- Convierte secciones diseñadas a lenguaje de plantillas en un solo clic.
- Accede a muestras de código (Curl, PHP, Ruby, Java, …) para el proceso de prueba e integración.
- Descarga cualquier plantilla en HTML.
Y recuerda, las plantillas creadas con el Editor de Emails presentan un diseño adaptativo.
Crear una plantilla transaccional
Selecciona Transaccional → Mis Plantillas Transaccionales en el menú principal
Haz clic en el botón ‘Crear nueva plantilla’ para continuar.
El próximo paso es seleccionar una plantilla como base para diseñar tu email. Introduce un nuevo nombre para la plantilla y haz clic en 'Usar esta plantilla’.
Ahora empieza lo divertido: ¡personalizar tu plantilla con el Editor de Emails! Para obtener información detallada sobre cómo utilizar todas las funciones, consulta nuestra guía.
Echemos un vistazo a las funciones avanzadas con las que podrás codificar emails transaccionales complejos...
Bloque de HTML
El bloque de HTML es una forma sencilla de diseñar un bloque de la forma que quieras y visualizarlo en tiempo real en tu plantilla de email. Arrastra el bloque de HTML a tu plantilla.
Haz clic en el bloque para seleccionarlo y después haz clic en el botón 'HTML' en la barra de herramientas para abrir la ventana del editor de HTML y empieza a codificar.
Lenguaje de plantillas
El bloque de lenguaje de plantillas permite introducir funciones avanzadas de plantillas en tu plantilla transaccional, como bucles, sentencias condicionales, arrays y mucho más.
El lenguaje de plantillas de Mailjet se basa en sintaxis de plantillas populares (como Django y Twig) y te permite añadir elementos lógicos a tu email para incluir o eliminar secciones. (Desarrolladores: Para recibir información detallada sobre la sintaxis, variables y funciones, visita nuestra Template Language Guide.)
Basta con hacer clic en el bloque de lenguaje de plantillas y arrastrarlo a tu plantilla.
¡Y ya puedes empezar a codificar!
En este ejemplo, queremos enviar un código de descuento a cualquier cliente que haya realizado al menos 5 pedidos con anterioridad. Con la variable “totalorders”, que se transmitirá a Send API, podrás crear la sentencia condicional simple:
{% if var:PedidosTotales> "5" %}
¡Usa el código de descuento #1CUST para disfrutar de un 10% de descuento en tu próximo pedido!
{% endif %}
Cuando hayas terminado de codificar, haz clic en 'Guardar’.
El bloque de idioma de la plantilla no se puede mostrar en vivo dentro del editor de correos, por eso introdujimos el botón "Ocultar código".
Esta funcionalidad te dará la opción de ocultar el código en el bloque de idioma de la plantilla y reemplazarlo con texto
o incluso una imagen. Esto facilitará la experiencia de edición general, ya que el código no se mostrará mientras se diseña la plantilla.
Para probar tu código y ver cómo se verá, cambia al modo de vista previa.
Secciones condicionales
Con las secciones condicionales, podrás mostrar secciones de contenido en tu email según el valor de la variable enviada con Send API.
Nota: Las secciones condicionales están disponibles solo para cuentas Premium.
Por ejemplo, quieres enviar una oferta especial exclusiva para los clientes que vivan en Nueva York con el email de confirmación de su pedido. Básicamente, si la ciudad (la variable enviada a Send API) equivale a Nueva York (el valor definido en tu plantilla transaccional), se mostrará la sección de la oferta especial exclusiva cuando se envíe el email.
Pasa el ratón por encima de una sección para ver sus condiciones actuales.
Por defecto, las secciones no tienen condiciones: 'Mostrar siempre esta sección'.
Para crear una condición, haz clic en la sección que deseas y a continuación en 'Añadir condición'.
Después, rellena los campos:
1) Clic Solo si.
2) Nombre de la variable: el nombre del parámetro que se enviará a Send API.
3) Selecciona un operador de la lista desplegable (iguales, no iguales, etc.).
4) Introduce un valor (verdadero, falso, valor alfanumérico, etc.).
En el ejemplo mencionado anteriormente, esta es la sección condicional 'Oferta especial exclusiva' para los clientes que viven en Nueva York:
Aunque tu límite sea una condición simple “if”, puedes imitar una sentencia “if else” al crear una condición en otra sección con el valor contrario.
Para ver la condición solo tendrás que pasar el ratón por encima de la sección o hacer clic en ella.
Para suprimir una condición, haz clic en la sección que deseas y a continuación en ‘Editar’.
A continuación selecciona la opción 'Siempre'.
Modo de previsualización en tiempo real
Para previsualizar tu plantilla, haz clic en ‘Previsualizar email’.
El modo de previsualización avanzado permite definir los valores de tus variables para previsualizar en tiempo real tus emails transaccionales en diferentes dispositivos (móvil, ordenador).
En la ventana 'Previsualización de variables', el Editor de Emails ha identificado las variables presentes en tu email, incluidas todas las variables definidas en las secciones condicionales y en los bloques de lenguaje de plantillas.
Recuerda: las secciones condicionales no pueden ejecutarse en el modo de previsualización. Para ver el resultado final de email transaccional, puedes enviarte a ti mismo un mensaje de prueba.
Enviar una prueba
Por favor, introduce la línea de asunto y la información de remitente antes de enviar el email de prueba, si aún no lo has hecho. La información introducida aquí se usa para generar la muestra de código al final del proceso de creación de la plantilla y no se guarda con esta última. Recuerda: Deberás introducirla cada vez que utilices la plantilla en Send API.
Luego, haz clic en 'Previsualizar y probar'.
Hay dos opciones de tests posibles:
-
Enviar una prueba de email (igual que enviar una campaña de prueba)
Antes de enviar un email de prueba, ve a ‘Previsualizar email’ e introduce los marcadores de posición de las variables que tengas. -
Utilizar la API de envío
Si seleccionas usar la API de envío para hacer un test, aparecerá un modal en el que se mostrará el atributo de la versión de la plantilla que necesitas añadir a tu llamada API, con muestras de código que puedes copiar fácilmente.
Solución de problemas sobre emails de prueba
Al usar las funciones del lenguaje de creación de plantillas en el Editor de Emails, es posible cometer errores de sintaxis que pasen inadvertidos. Si se identifica un error de sintaxis en tus emails de prueba, Mailjet no enviará el mensaje.
Estos son algunos errores de sintaxis habituales:
- Una variable no tiene valor predeterminado en la plantilla, pero se usa al llamar a la API.
- Falta una variable en la solicitud Send API.
Es fundamental poder solucionar los problemas de la plantilla transaccional antes de usarla en producción. Con el Mailjet Editor de Emails, puedes recibir un mensaje de error si la plantilla contiene un error de sintaxis.
En realidad, cuando se produce un error de sintaxis, el motor de procesamiento del lenguaje de creación de plantillas puede identificar el problema. Se enviará un mensaje desde templating-language-error@mailjet.com a la dirección indicada, incluyendo el mensaje de error en el cuerpo de y un archivo adjunto con la fuente del mensaje original.
Aquí pueden verse algunos de errores comunes:
expression parsing error ## Unknown identifier: var:day ## near ## {{var:day ##
Falta una variable en “Vars”; para solucionarlo, añade un valor predeterminado al “Var” de la plantilla
not valid template ## near ## y}} ##
Falta el final si ({% if var:day %}{{var:day}})
"var:day" is not an array value
Intentando crear un bucle en un sin matriz “var”
Una vez detectado y corregido el problema de sintaxis, solo tienes que enviar otro mensaje de prueba.
Si la plantilla se ha aprobado por completo y está lista para su producción, recuerda que también puedes utilizar este sistema de informes de error para ti. Solo tienes que añadir los siguientes encabezados a tu solicitud de envío de API:
- MJ-TemplateErrorReporting: Dirección de email a la que se envía una copia de carbón con el mensaje de error.
- MJ-TemplateErrorDeliver: Define si el mensaje se entrega al destinatario aunque se detecte un error en el lenguaje de creación de plantillas.
De forma predeterminada, la entrega de un mensaje con errores al destinatario está desactivada.
Echa un vistazo a nuestra Guía Transactional Templating Guide para obtener más información.
Utilizar tu plantilla
Haga clic en ‘Guardar y publicar’.
Enhorabuena, has creado tu nueva plantilla transaccional. Para ayudarte a integrarla rápidamente en tus entornos, te proponemos varias muestras de código: Curl, PHP, Node, Ruby, Python, Go, Java, C#.
Recuerda que debes definir los valores de las variables en la muestra de código. Te recomendamos probar la plantilla en un entorno de preproducción para definir los valores de las variables y visualizar los datos finales de tus emails transaccionales.
Y eso es todo, ¡ya puedes utilizar tu plantilla en producción!
Documentos relacionados
- Transactional Templating (para desarrolladores)
- Getting Started with API (para desarrolladores)
- Crear tus campañas con el Editor de Emails
Si tienes alguna pregunta sobre cómo utilizar el Editor de Emails para crear emails transaccionales, contacta con nuestro equipo de asistencia.