Plantillas de usuario: Usar contenido dinámico en plantillas de usuario. – Centro de ayuda DataCrush

[Tiempo de lectura del articulo - 5:23 minutos]

Si deseas utilizar tus propias plantillas, puedes sumar todo el poder de la personalización y contenido dinámico de Datacrush:

Reutilizar la misma plantilla para diferentes comunicaciones
Usar campos del usuario como nombre, apellido, etc
Modificar el texto o imágenes desde el editor de plantillas
Aplicar contenido dinámico en tu plantilla, dependiendo el ciclo de vida de tu contacto

Requerimientos de las plantillas propias.

Para poder utilizar tus plantillas en Datacrush, es necesario que cumplan con ciertos requerimientos

Debe contener un archivo index.html
No debe contener ningún archivo del tipo dinámico como PHP, CGI, PY, etc
Puede poseer la cantidad de directorios que requieran, siendo las referencias a estos directorios o los archivos que incluyan, del tipo relativas
La plantilla y todos sus archivos y directorios deben estar comprimidos en un único archivo ZIP (*), este archivo ZIP deberá contener una estructura similar a la de la captura:

‼️ IMPORTANTE: (*) Un error común es que dentro del ZIP haya un directorio y dentro de ese directorio la estructura, esto provocará un funcionamiento incorrecto de la plantilla, dentro del ZIP debe estar directamente la estructura correcta.

El archivo ZIP no deberá superar los 30mb.
El código HTML debe tener definida una correcta estructura de elementos: <html><head><style></style></head><body></body></html>.
Para poder personalizar los estilos de la plantilla desde el editor de Páginas Landings y Plantillas de Emails, dentro del código HTML se debe contener el siguiente elemento y marcador: <style>{style}</style>.

1. Descripción.

Para que el contenido de tu plantilla se transforme en contenido editable desde DataCrush, es necesario que incorpores pequeñas modificaciones en el HTML de tu plantilla.

Simplemente necesitarás agregar o modificar divs (u otros tags) existentes y poner unas propiedades especiales que DataCrush usará para saber si ese contenido puede ser editable o no.

En la parte de tu código HTML donde tengas algo para editar, debes poner lo siguiente por ejemplo:

<div data-type="text" data-content="TextoPrincipal">Contenido que quieres que sea editable</div>

Ten en cuenta que puedes usar cualquier tag, nuevos o que ya contenga tu plantilla: div, span, h1, etc.

Otro ejemplo:

<h1 data-type="input" data-content="Título">Titulo</h1>

(*) Los valores correspondientes a los atributos "data-type" y "data-content" no deben contener espacios

2. Tipos de dato.

En la siguiente tabla se listan los tipos de dato (data-type) que pueden utilizarse.

Tipo de dato	Descripción	Landings	Email
input	Ingreso de un texto común sin enriquecer	✔️	✔️
text	Ingreso de un texto enriquecido, con posibilidad de agregar imágenes y campos personalizados.	✔️	✔️
image	Selección de una imagen desde la galería	✔️	✔️
form	Selección de un formulario ya existente.	✔️
button	Configuración de un botón para un Call to Action, con texto y link	✔️	✔️
background	Coloca una imagen de fondo dentro de un contenido	✔️
ecommerce	Habilitar contenido de ecommerce	✔️	✔️

3. Botones.

En caso de que tengamos un botón o link que tenga más elementos dentro y necesitemos cambiar el texto dentro de estos elementos, debemos utilizar la propiedad data-button-text dentro de ese elemento. Por ejemplo:

<div data-type="button" data-content="CTA">
	<a href="http://www.datacrush.la">
		<span data-button-text="1">Titulo</span>
	</a>	
</div>

4. Contenido adicional.

En la siguiente tabla se listan los campos adicionales que pueden ser utilizados dentro de las plantillas.

Los campos serán reemplazados por el valor correspondiente al contacto que se pudo reconocer al ingresar a un landing o en el envío de un email

Campo	Descripción
{{form_submits}}	Cantidad de envíos únicos del formulario utilizado en la Landing page.
{{campaign_submits}}	Cantidad de envíos únicos de todos los formularios de la campaña a la que pertenezca la Landing page.
{{landing_submits}}	Cantidad de envíos únicos de todos los formularios de la Landing Page, si una Landing tiene contenido dinámico y/o múltiples formularios, esta variable contiene todos los submits de todos los formularios.
{{first_name}}	Nombre del contacto.
{{last_name}}	Apellido del contacto.
{{email}}	Email del contacto.
{{nombre_del_campo}}	Cualquier campo de DataCrush o creado de forma personalizada.

5. Módulo de ecommerce.

El módulo se activa colocando el atributo data-type=“ecommerce” en el contenedor principal.

Dentro de este contenedor se debe incluir la estructura de diseño correspondiente a un único producto (que luego se repetirá las veces que se indique en la configuración de la plantilla)

<div data-type="ecommerce" data-content="Productos">
	<table>
		<tr><td>Foto</td></tr>
		<tr><td>Nombre</td></tr>
		<tr><td>Precio</td></tr>
	</table>
</div>

Información del producto.

Variables que van a ser reemplazadas por la información del producto.

Campo	Descripción
{product_name}	Nombre del producto
{product_image}	Imagen principal del producto
{product_short_description}	Descripción corta del producto
{product_link}	URL del producto en el sitio de ecommerce
{product_price}	Precio del producto
{product_price_final}	Precio final del producto (por ejemplo en el caso de ofertas)
{product_price_save}	Diferencia entre el precio del producto y precio final

<div data-type="ecommerce" data-content="Productos">
	<table>
		<tr><td>{product_image}</td></tr>
		<tr><td>{product_name}</td></tr>
		<tr><td>{product_price}</td></tr>
		<tr><td><a href="{product_link}">Ver</a></td></tr>	
	</table>
</div>

Información de contenedor.

Indica la función de cada contenedor en donde se visualiza la información del producto.

Estos contenedores se ocultaran o mostrarán según corresponda.

Para colocar esta información se debe utilizar el atributo data-type=“”.

Campo	Descripción
product-save	Indica que el producto esta en oferta (por ejemplo para mostrar algún cartel de oferta cuando corresponda)
product-price	Precio del producto
product-price-save	Precio que se está ahorrando en la compra (diferencia entre precio del producto y precio final)

<div data-type="ecommerce" data-content="Productos">
	<table>
		<tr><td>{product_image}</td></tr>
		<tr><td>{product_name}</td></tr>
		<tr><td data-type="product-price">{product_price} <span data-type="product-save">Oferta</span></td></tr>
		<tr><td data-type="product-price-save">Ahora: {product_price_save}</td></tr>
		<tr><td><a href="{product_link}">Ver</a></td></tr>		
	</table>
</div>

6. Personalización de mensajes del email.

Para personalizar el diseño de las leyendas de Ver mensaje en línea y Darse de baja de todos los correos electrónicos futuros se deben utilizar unas etiquetas que deben colocarse dentro del contenido html de las plantillas, para que estas sean reemplazadas por el contenido correcto.

Información de etiquetas de Ver mensaje en línea.

Variables que van a ser reemplazadas.

Campo	Descripción
{online_url}	Hace referencia a una URL interna que es generada para ver el contenido online
{online_message}	Es el mensaje que se visualizará en el contenido

<table>
<tr><td><a href="{online_url}">{online_message}</a></td>></tr>
</table>

Información de etiquetas de Darse de baja de todos los correos electrónicos futuros.