Archive: April, 2015

E-mail Marketing

e-mailmarketing

Material a enviar:

  • Diseño HTML
  • Asunto del mail
  • Nombre del remitente (no es una casilla de correo)
  • Cantidad de contactos
  • Segmentación

 Plazos de entrega: Los materiales deben entregarse 72 horas antes de la fecha de lanzamiento de la campaña.

 ADVERTENCIA: La falta de alguno de los archivos solicitados puede generar demoras en la implementación de las pautas.

Detalles para el armado del HTML:

  • Medida Recomendada: 400×600px
  • Peso máximo: 80 kb
  • El HTML debe estar conformado por más de dos imágenes.
  • Las imágenes deben ser absolutas, el HTML debe llamar a las imágenes alojadas en el servidor del anunciante. Con respecto a la codificación de los emails marketing, deben realizarse en utf-8, como este meta: Y los caracteres especiales (acentos, eñes) deben codificarse de la siguiente forma:
    <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
    http://ascii.cl/es/codigos-html.htm Ver columna HTML Nombre.

Contenido

En email marketing eres lo que envías.

Tu e-mail será filtrado basado en el contenido y esto incluye el texto, HTML y los tipos de enlaces en tu mailer.

Hay palabras que se consideran malas y estas afectarán negativamente a tu reputación, tanto en el asunto como cuerpo, unas muy comunes incluyen:

Descuento, Ahora, Gratis

$$$$, Dinero, Crédito

Es necesario equilibrar tu HTML vs Texto, ya que los filtros de Spam no escanean a través de tus emails y no pueden ver el contenido de una imagen entera y esto causa que bloqueen tu email. Utiliza “alt-text” en las imágenes.

La dirección de email del Remitente es otro factor importante para tener en cuenta, las direcciones de remitente no-reply no son recomendables de usar.

Asegúrate de adherir el nombre de tu compañía, la dirección física junto con el enlace de desuscripción en el footer de tus mailers para que el cliente tenga fácil acceso a desuscribirse si lo desea.

Banner 300 x 120

300x120

Especificaciones técnicas banner HTML5

  • Medidas: 300x120px
  • Formato: HTML5
  • Peso máximo: 120 kb
  • Gif o JPG de respaldo: Opcional
  • Peso máximo del GIF o JPG: 120kb
  • Loop: 
  • Duración máxima de la animación: Indefinida

Las piezas deben ser enviadas con 72hs de antelación a la fecha de inicio de la campaña.

Inclusión de códigos HTML5

Verificar especificaciones técnicas para el armado de piezas tradicionales en HTML5.

Descargas

Banner HTML Tradicional (71 kb)

Cabezal

240x90

Especificaciones técnicas banner HTML5

  • Medidas: 240x90px
  • Formato: HTML5
  • Peso máximo: 120 kb
  • Gif o JPG de respaldo: Opcional
  • Peso máximo del GIF o JPG: 120kb
  • Loop: 
  • Duración máxima de la animación: Indefinida

Las  piezas deben ser enviadas con 72hs de antelación a la fecha de inicio de la campaña.

 Inclusión de códigos HTML5

Verificar especificaciones técnicas para el armado de piezas tradicionales en HTML5.

 Descargas

Banner HTML Tradicional (71 kb)

Zócalo

zocalo

¿Cómo funciona?

Este formato consta de un layer inicial que se puede ubicar en cualquier margen del sitio, controlándose desde la plataforma. El anuncio se expande por acción el usuario dando lugar a un layer expandido. Ambas etapas pueden cerrar la creatividad pero sólo el expandido puede contraer. Puede llevar un video (opcional).

¿Cómo se compone?

1 Layer principal
1 Layer expandido

¿CÓMO SE DISEÑA?

- Zócalo:

Para visualizar el layer se incluirá un botón de “abrir”, mediante la acción de rollover o click, según corresponda. El zócalo también puede llevar boton para cerrarse.

- Layer:

El Layer puede tener fondo transparente y debe tener un botón para cerrarlo (obligatorio).

Ambos botones deben de estar en un div:

Ejemplo:

<body>
<div id="botonCerrar">
Cerrar Anuncio
</div>
<div id="botonAbrir">
Abrir
</div>
</body>

IMPORTANTE

  • No se debe utilizar iframes
  • Si se diseña en google web designer:
    • Realizar un anuncio que NO es de google.
    • No invertir la pieza expandida y replegada(banner­page / expanded­page).
  • Realizar correctamente todos los divs, por separado para clicktag y botones.
  • Las medidas del replegado y el expandido no deben estar invertidas.
  • El anuncio solamente debe contar con los handlers personalizados de los botones expandir y cerrar.
  • Siempre la pagina inicial debe ser la replegada (banner­page).

 MATERIALES A ENVIAR

  • Enviar 1 zip por cada pieza. Ejemplo, el banner consta de 2 piezas, se debe enviar 2 zip por separado, cada una en su carpeta con sus contenidos. Ejemplo
  • El peso máximo del anuncio debe ser de hasta 30 MB.
  • En caso que la pieza lleve video ver las siguientes especificaciones.Ver aquí

 Click Tag

El Click Tag debe estár programado de esta forma:

<a onclick="window.open(window.clickTag); return false" href="#!"></a>

Si se requiere que una área específica por ejemplo un div realice el clicktag realizamos lo siguiente:

<a onclick="window.open(window.clickTag); return false" href="#!">
 <div id="clickTag" style="width:400px;height:400px"></div>
</a>

Ejemplo TML (68 kb)

Mega Expandible Push 970x90x350

expandible

¿Cómo funciona?

Este formato se compone de un anuncio que expande empujando el contenido del   sitio. Se muestra en 3 instancias:

1)  El  anuncio  aparece  desplegado  desplazando  el  contenido  del  sitio,  se  cierra   automáticamente al finalizar la animación o por el botón cerrar.  2) El anuncio se ve replegado y presenta un botón para poder abrirlo. Al replegarse   el contenido del sitio vuelve a su lugar original.  3) El anuncio se ve desplegado pero no se cierra hasta que el usuario no haga click   en el botón cerrar.

¿CÓMO SE COMPONE?

1 html con sus dos instancias: expandida y replegada.

¿CÓMO SE DISEÑA?

1 html con sus dos instancias: expandida y replegada.

Expandido  970x350px   replegado: 970x90px

Ejemplo:

<body>
<div id="replegado">...contenido del replegado….</div>
<div id="expandido">...contenido del expandido….</div>
</body>

Si la creatividad abre y cierra mediante botones, estos deben de estar diseñados e incluidos en la creatividad. Cada botón debe encontrarse en un div.

Ejemplo:

 <body>
<div id="replegado">
<div id="botonAbrir"></div>
...contenido del replegado….
</div>
<div id="expandido">
<div id="botonCerrar"></div>
...contenido del expandido….
</div>
</body>

Importante:

No se debe utilizar iframes

Si se diseña en google web designer:

  • Realizar un anuncio que NO es de google
  • ­No invertir la pieza expandida y replegada(banner­page / expanded­page)
  • Realizar correctamente todos los divs, por separado para clicktag y botones.
  • Las medidas del replegado y el expandido no deben estar invertidas.
  • El anuncio solamente debe contar con los handlers personalizados de los botones  expandir y cerrar.
  • ­ Siempre la pagina inicial debe ser la replegada (banner­page)

MATERIALES A ENVIAR:

  •  El peso máximo del anuncio debe ser de hasta 30 MB
  • El anuncio junto con todos sus archivos y recursos que utilice deben ser enviados cargado en formato zip.
En caso que la pieza lleve video ver las siguientes especificaciones.Ver aquí

Expandible Push con Video

Para contabilizar métricas en un video primero se debe agregar el tag al html correspondiente, por ejemplo:

<video id="video1" width="320" height="320" controls autoplay muted>
<source src="video.mp4" type="video/mp4">
</video>

Principalmente nos encontramos con el tag “<video>” y dentro del mismo el se encuentra el tag “<source>” que corresponde a la dirección del video a cargar.
El tag vídeo debe tener un id especificado, en este ejemplo es: “video1”, para poder realizar que contabilice métricas es necesario utilizar la función EPL.setvideo, la cual recibe como parámetro el id del video, en nuestro caso de ejemplo quedaría de la siguiente forma: EPL.setvideo(“video1”);

Automáticamente, la librería de richmedia reconoce el video y ajusta las métricas a sus controles.
Los formatos richmedia soportan hasta 5 videos:

EPL.setVideo(“video1”); //ok
EPL.setVideo(“video2”); //ok
EPL.setVideo(“video3”); //ok
EPL.setVideo(“video4”); //ok
EPL.setVideo(“video5”); //ok
EPL.setVideo(“video6”); // ERROR


Opciones de video:

En caso de necesitar que un video comience en auto play, pausa, sonido on/off, se debe setear directamente del tag “<video>” con las propiedades correspondientes.
En el próximo ejemplo mostramos como realizar un video que comienza con sonido off, en auto play y con controles visibles:
<video id=”v1” width=”320” height=”320” controls autoplay muted> <source src=”video.mp4” type=”video/mp4”> </video>
Las propiedades marcadas en rojo en la etiqueta son las seteadas.

 

En la siguiente imagen, se describe como sería el armado del zip:

grafico