Usar etiquetas específicas de Actito

Personalizaciones

Las personalizaciones te permiten personalizar tu mensaje y adaptarlo a cada destinatario. Para personalizar tus correos electrónicos, puedes utilizar una amplia gama de datos almacenados en Actito, y por supuesto también puedes utilizarlos al codificar un archivo HTML.

El enlace para cancelar una subscripción

En cada comunicación B2C, es obligatorio permitir que la persona que recibe un correo electrónico se desuscriba de manera rápida.

¿Cómo se hace?:

Agregando un enlace de desuscripción en la parte superior o inferior del correo electrónico.

Ejemplo

<a href="${unsubscribe}" title="desuscribirse" target="_blank"> Desuscribirse </a>

El enlace espejo

En cada comunicación, recomendamos incluir un enlace espejo en los correos electrónicos, para que el lector pueda ver el correo electrónico en un navegador web en lugar de utilizar el cliente de correo electrónico clásico.

¿Cómo se hace?:

Agregando un enlace espejo en la parte superior o inferior del correo electrónico.

Ejemplo

<a href="${WebVersion}" title="versión web" target="_blank"> Versión web </a>

Personalización de la base de datos

Es posible personalizar el contenido de tu correo electrónico agregando personalización directamente desde la base de datos.

¿Cómo se hace?:

Utilizando ${nombreDeMiAtributo}

Ejemplo

Estimado ${firstName} ==> Dará Estimado Sébastien

Personalización basada en el género de la persona

Es posible personalizar una parte de tu texto en función del género de la persona.

¿Cómo se hace?:

Utilizando ${genderTest}

Ejemplo

Si es un hombre: Estimado Sr. Smith

Si es una mujer: Estimada Sra. Smith

Incluir un formulario en tu correo electrónico html

Es muy fácil vincular un formulario y un correo electrónico html.

¿Cómo se hace?

Usando ${form}.

Ejemplo

<a href="${form}" title="Mi formulario" target="_blank"> Enlace al formulario web </a>

Nombres de enlaces

El title de los enlaces en tu correo electrónico se muestra cuando un perfil pasa el cursor sobre él. Además de eso, puedes agregar un nombre a estos enlaces. Este nombre se utiliza en el informe de tu campaña, para que puedas analizar rápidamente los resultados de los clics.

Se inserta con el atributo data-actito-link-name.

Ejemplo

<a target="_blank" href="http://www.actito.be" title="Mi descripción de enlace" data-actito-link-name="Mi referencia de informe"> actito.be </a>

Condiciones

Gracias a las condiciones de visualización, diferentes bloques del mismo mensaje pueden mostrarse o no según una serie de condiciones predefinidas.

El resultado es que algunas partes del contenido solo se mostrarán a los perfiles que cumplan con los criterios asociados. Las condiciones también están disponibles al utilizar un archivo HTML para crear tus correos electrónicos.

Solo tienes que agregar el atributo data-actito-if en la sección del correo electrónico para la cual deseas crear una condición.

Esto simplemente implica establecer una asociación entre la variable de condición y la sección HTML relevante. Por ejemplo, data-actito-if=${condition1}

Luego deberás configurar los parámetros para los diferentes criterios a través de la interfaz de Actito, en la pestaña Personalizaciones. No es posible codificar directamente los parámetros en el archivo HTML.

Ejemplo

<td data-actito-if=${condition1} align="left">
    <a href="https://www.actito.com/en-BE" target="_blank" style="border:0;">
        <img src="https://pbs.twimg.com/profile_images/1194974678969917440/HWjtzNpP_400x400.jpg" width="640" height="390" class="resize320" style="display:block; border:0; width:100%; height:auto;" alt="" />
    </a>
</td>

Bucles de personalización

Las personalizaciones de bucle se utilizan comúnmente para enviar un correo electrónico transaccional, cuando se utilizan varias filas de datos asociados, provenientes por ejemplo de Tablas Personalizadas. Te permiten reemplazar la variable de personalización por un conjunto de valores relacionados entre sí en lugar de un solo valor. También se implementan a través del código HTML.

Es recomendable utilizar el parámetro "data-actito-each" y definirlo como "nombre del bucle: ${nombre del bucle en plural}" : data-actito-each="ejemplo:${ejemplos}"

Cada elemento del bucle debe seguir el formato: ${nombre del bucle.nombre del elemento} : ${ejemplo.elemento}

Tomemos un ejemplo concreto: Queremos mostrar un bucle que muestre las últimas compras de los perfiles contactados y muestre para cada una de ellas el nombre del artículo y su precio. El código a insertar debe tener el siguiente formato:

Ejemplo

<div data-actito-each="purchase:${purchases}">
    <span> Article: ${purchase.article} </span>
    <span> Price: ${purchase.price} </span>
</div>

Una vez que el código se haya insertado en el HTML, es necesario configurar las diferentes variables llamadas por el bucle en el modal de gestión de personalizaciones. Encontrarás más información sobre este tema en el capítulo dedicado a los emails transaccionales.

A tener en cuenta

Los bucles de personalizaciones se pueden utilizar para todos los tipos de emails, solo en el motor Nuevo Mail de Actito.

Imágenes de fondo

Es posible aplicar una imagen de fondo en tus emails HTML, lo que te permite diseñar emails con 2 capas: una imagen global en el fondo y elementos superpuestos (texto, otra imagen).

Las imágenes de fondo pueden dar un efecto muy bonito a tus emails, pero para garantizar su visualización óptima, asegúrate de que el tamaño de la imagen coincida con los elementos mostrados encima. El fondo puede cubrir todo el email o, más frecuentemente, una parte del mismo.

Para mostrar una imagen de fondo en Outlook, debe ser referenciada en un comentario condicional, ya que la forma estándar de insertarla no funciona.

Consejo

La URL de la imagen debe ser en https. Esto significa que, si importas la imagen en el archivo zip, tu dominio de enlace debe estar certificado.

El siguiente fragmento de código muestra un ejemplo de cómo insertar una imagen de fondo.

<td style="height:320px;background-image:url(images/3.jpg);background:url*(images/3.jpg) no-repeat center top/640px 320px;background-size:640px 320px;background-position:center top;background-repeat:no-repeat;vertical-align:top"  background="images/3.jpg" height="320">

<!--[if gte mso 12]> <v:image xmlns:v="urn:schemas-microsoft-com:vml" style="width:202px;height:298px;" color="#ffffff" src="images/3.jpg" />