Cómo añadir imágenes personalizadas a Iterable
Usa los campos de Handlebars que ya envías a Iterable para dibujar el nombre, los detalles de la reserva o el saldo en una imagen para cada usuario.
Fecha de Primera Publicación: Incorpora los datos que guardas en Iterable a las imágenes que ven tus usuarios.
Las plantillas de Iterable ya recogen datos de perfiles y eventos con Handlebars. Sendtric imágenes personalizadas van un paso más allá y plasman esos valores en una imagen, con tus propias fuentes y diseño: un gráfico al estilo de una tarjeta de embarque con la ruta del usuario, o una tarjeta de fidelidad con su saldo más reciente. La imagen se crea al abrir el correo electrónico.
El editor de arrastrar y soltar de Iterable tiene una opción de imagen dinámica que carga una imagen desde una URL que contiene Handlebars, y su propia documentación recomienda usar servicios de imágenes externos para crearlas. Sendtric es uno de esos servicios: tú diseñas la imagen y su URL incluye tus campos de Iterable.
Qué puedes hacer con las imágenes personalizadas en Iterable
- Resúmenes de viajes y reservas: ciudad de salida, ciudad de llegada y fecha de un evento de reserva, todo ello presentado en un único gráfico de viaje. Mira textos personalizados en las imágenes para ver ejemplos.
- Hitos de la app: «Has completado 30 entrenamientos» o «12 lecciones completadas» a partir de un campo personalizado del perfil, en un correo de felicitación.
- Extractos de fidelidad: puntos, nivel y nombre del socio en la imagen de una tarjeta que aparece en un correo electrónico mensual sobre el recorrido.
- Resúmenes de fin de año: varias estadísticas del perfil de usuario en un solo fondo, algo que se suele usar en los correos de resumen del año.
| Características de la imagen | Free | Micro | Standard | Energía y empresa |
|---|---|---|---|---|
| Capas de texto personalizadas para cada imagen | 1 | 2 | 4 | 20 |
| Tus propias capas de imagen (logotipo, producto) | No | No | Yes | Yes |
| Fondo de un solo color | No | No | Yes | Yes |
| Fondo transparente | No | No | No | Yes |
Cómo añadir una imagen personalizada a Iterable
Paso 1: Diseña la imagen
En Sendtric, ve a Personalización de Imágenes y haz clic en «Crear nuevo». Elige un fondo de la biblioteca multimedia, o un lienzo liso o transparente, y luego añade textos dinámicos para cada valor. Ajusta el tamaño de cada cuadro de texto al valor más largo que esperes, ya que el texto se ajusta al espacio pero no se reduce.
Paso 2: Introduce el campo «Iterable» para cada capa
Para cada capa de texto dinámico, pon la variable en minúsculas Nombre de la variable y pon la expresión «Iterable Handlebars» en etiqueta de fusión ESP, como {{firstName}}. Los campos dependen de tu proyecto, así que usa los nombres exactos que veas en el perfil de un usuario, incluyendo la notación con puntos para los campos anidados, por ejemplo {{address.city}} si tu ciudad está dentro de un objeto de dirección. Añade texto alternativo para los usuarios que no tengan ningún valor.
Paso 3: Guarda y copia el código
Guarda la imagen. El cuadro de código aparece tras el primer guardado, con cada variable añadida a la URL de la imagen y rellenada con tu expresión Iterable. Elige la alineación y haz clic en Copiar código.
Paso 4: Pégalo en un bloque HTML
Abre tu plantilla de Iterable y haz clic en Editar diseño. En el editor de arrastrar y soltar, arrastra un bloque HTML desde la sección pestaña «Contenido» a la posición correcta, selecciónalo y pega el código en el editor HTML. En el editor WYSIWYG o en el editor «lado a lado», pega el código en el código fuente.
Paso 5: Haz una prueba con usuarios reales
Haz clic en Vista previa, introduce el correo electrónico de un usuario (o su ID de usuario) y haz clic en Cargar datos de usuario para ver la imagen con sus valores. Prueba con un usuario que tenga un nombre largo y otro con un campo vacío. Después, envíate una prueba a ti mismo, que rellenará los campos con los datos de tu propio perfil.
Usar el bloque «Imagen» en lugar de HTML
Si prefieres mantener un bloque de imagen, copia solo la dirección que hay dentro del src del código de Sendtric, arrastra un bloque de imagen , activa «Imagen dinámica» y pega la dirección en URL dinámica. Si el bloque se ve vacío mientras lo diseñas, compruébalo en Vista previa con los datos de un usuario cargados.
Soluciones alternativas en Iterable o en Sendtric
Puedes dejar que la alternativa «texto de reserva» de Sendtric se encargue de los valores vacíos, o usar la función auxiliar de Iterable dentro de la etiqueta, como {{defaultIfEmpty firstName 'there'}}. Usa comillas simples para el valor por defecto, ya que la expresión va dentro de la dirección de la imagen, que está entre comillas dobles. Si Iterable proporciona un valor por defecto, la alternativa de Sendtric nunca se muestra.
Preguntas frecuentes sobre la Personalización de Imágenes de Iterable
¿Puedo usar datos de eventos, y no solo campos de perfil?
Sí. Cualquier valor de Handlebars que Iterable pueda resolver al generar el correo electrónico puede incluirse en una capa, incluidos los campos del evento que haya activado un recorrido o una campaña. La documentación de Iterable indica que un campo de evento con el mismo nombre que un campo de perfil tiene prioridad, y {{profile.fieldName}} lee el valor del perfil de forma explícita.
¿Y si un valor tiene espacios o caracteres especiales?
Si un campo puede contener espacios o caracteres como & o #, envuélvelo en el urlEncode , por ejemplo {{#urlEncode}}{{city}}{{/urlEncode}}, para que la dirección de la imagen se mantenga intacta. Después, comprueba el resultado en «Vista previa».
¿Qué ven los usuarios cuando un campo está vacío?
Si tienes configurado el «Texto alternativo», solo verán ese texto, así que escríbelo como una frase completa. Si no lo tienes, se ocultará toda la capa, incluidas las palabras que rodeen a la variable.
¿Puedo actualizar la imagen después de enviarla?
Sí. Al guardar en Sendtric, la imagen cambia en todos los correos enviados a partir de la próxima vez que lo abras. Las versiones renderizadas se almacenan en caché durante aproximadamente una hora por cada combinación de valores, y al guardar se borran.
¿Las vistas previas cuentan para mis vistas?
Las vistas previas en el editor de Sendtric no lo hacen. En cambio, sí lo hacen todas las cargas reales de la imagen, incluidas las pruebas de Iterable que abras y las aperturas repetidas.
Esta guía trata sobre una de las funciones de personalización de los correos electrónicos de Sendtric Personalización de Email . Para cada imágenes personalizadas , echa un vistazo a la página principal.
Más guías de Iterable
- Temporizadores de cuenta atrás - Cómo añadir temporizadores de cuenta atrás a Iterable
- Temporizadores de cuenta atrás - Añade temporizadores dinámicos en Iterable
- Encuestas en directo - Cómo añadir encuestas en directo a Iterable
- Imágenes Basadas en Reglas - Cómo añadir Imágenes Basadas en Reglas a Iterable
- Clima Dinámico - Cómo añadir el Clima Dinámico a Iterable
- Alertas Críticas - Cómo añadir Alertas Críticas a Iterable
- Contadores de pruebas sociales - Cómo añadir contadores de pruebas sociales a Iterable
¿Usas otra plataforma? Echa un vistazo a todas las integraciones de Sendtric.
