Author Archive

Banner tradicional HTML5 con Video

html5

Características

Medidas: 728x90px, 300x250px, 300x600px, 630x300px, 300×600, 970x250px, 970x250px.

  • Formato: HTML5.
  • Peso máximo: 120kb
  • Gif o JPG de respaldo: Opcional
  • Peso máximo del GIF o JPG: 120kb
  • Loop: si
  • Video: MP4 (hecho a partir del codec H.264).
  • IMPORTANTE: Se deberá dejar un recuadro negro en el diseño del banner que indique que allí debe ir el video.

 

Para agregar un video al anuncio html, siga las instrucciones respecto a las especificaciones para 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 video 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(videoId, trackComplete, callback), la cual recibe como parámetros la siguiente información:

– videoId: String, id del video html5.

– trackComplete: true o false, indica si hay que realizar el Anuncio Completo[EPL.adComplete()] al finalizar el video.

– callback: Function o null, función que se pasa como parámetro para ejecutar una ves que finaliza el video.

Ejemplo:

EPL.setVideo(“video1″, true, function(){console.log(“Video Completo”);});

Automáticamente, la librería de Rich Media reconoce el video y ajusta las métricas a sus controles.

También se agregará dinámicamente un clicktag al video.

Métricas de video:

• Sonido On

• Sonido Off

• Start

• Pause

• Restart

• Anuncio Completo

• 1/4 video reproducción

• 1/2 video reproducción

• 3/4 video reproducción

 

Opciones de video:

Los formatos rich media soportan hasta un máximo de 5 videos inclusive.

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 cómo realizar un video que comienza con sonido off, en auto play y con controles visibles:

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

Las propiedades en la etiqueta marcadas en azul son las seteadas.

Plazos de entrega: Los materiales deben entregarse como mínimo 48 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.

Banner Mobile 300 x 250

mobile300x250

 ¿CÓMO FUNCIONA?

Este anuncio aparece de manera fija sobre el contenido del sitio. La animación puede tener loop o permanecer en stop una vez que se contabilice la visualización del anuncio.

¿CÓMO SE DISEÑA?

La creatividad debe estar dentro de un div.

<body>
<div id="miCreatividad">
"aquí dentro el diseño de la creatividad"
</div>
</body>

El clicktag es genérico para todos los tipos de formatos y piezas programadas, la implementación es la siguiente:

 <a onclick="window.open(window.clickTag); return false" href="#!">
 <div id="clickTag"> //aquí mi creatividad </div>
 </a>

Englobamos nuestro elemento html con la etiqueta <a> para que se aplique la zona activa.

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

 

Spincube Mobile 300 x 300

spincube

Cómo funciona

Este formato muestra un banner de 300×300 que tiene 6 páginas o caras, las que pueden ser desplazadas con un efecto de cubo 3D. Adicionalmente cada página/cara puede contener todo tipo de complementos.

Este formato consta de solo 1 banner y a su vez contiene 6 páginas.

Es posible incluir un botón “Cambiar página” en cada una de las desplegadas para poder dar al usuario la opción de mover el cubo. También existe la opción de que la rotación se realice de forma automática cada N cantidad de segundos.

Se deben incorporar los componentes necesarios: Ver documento Componentes.

Cómo cuenta

  • Impresiones/Inicio de anuncio: Cuando carga el anuncio/Cuando se muestra.
  • Clicks: Cuando se aplique la acción de “Clicktag” en algún botón del anuncio, se registrarán los clicks cada ver que el usuario realice esa acción. En el caso de la acción “Ir a una URL”, esta no cuenta clicks, solo realiza una redirección del usuario a la página indicada.
  • Cerrar anuncio: Cuando se aplique alguna acción de “Cerrar” en el anuncio, se contabilizará esta acción bajo “Cerrar anuncio”.

Si tiene video:

  • Reproducir video: Cuando se presiona play por primera vez
  • Detener video:  se presiona stop por primera vez
  • Permanencia de anuncio: se activa cada cuartos del tiempo de video
  • Anuncio Completo: Cuando finaliza el video.

materiales a enviar:

  • 6 jpg 300×300

Ver demo online aquí.

Plazos de entrega: Los materiales deben entregarse como mínimo 48 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.

 

Take Over Mobile

takeovermobile

Cómo funciona

Se compone de dos instancias: Banner inicial layer 320×480 y luego un banner residual 300×250.

Cómo cuenta

  • IMPRESION: al momento del llamado
  • CLOSE: al cerrar el layer (No cuenta anuncio completo)
  • COMPLETE: 7 segundos después de la apertura del layer.

 Cómo se programa

El anuncio consta de 2 piezas:

  • Banner Residual: Imagen JPG de 300×250. Peso 120kb.
  • Layer: Imagen JPG  320×480. Peso 120kb.

 

 

Banner skycrapper horizontal 970 x 90

970x90

Especificaciones técnicas banner HTML5

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

 

 

Mega Layer 700 x 400

layer

¿CÓMO FUNCIONA?

Este anuncio aparece sobre el contenido del sitio. El anuncio cierra automáticamente   al finalizar la animación, también posee un botón para que el usuario pueda cerrarlo   cuando desee.

¿CÓMO SE PROGRAMA?

El layer debe incluir un botón de cerrar o saltar anuncio.

Ejemplo:

<div id=”botonCerrar”>
Cerrar Anuncio
</div>

IMPORTANTE

No se debe utilizar iframes,

Si se diseña en google web designer:

Realizar un anuncio que NO es de google  ­

Realizar correctamente todos los divs, por separado para clicktag y botones.

MATERIALES A ENVIAR:

­ Enviar 1 zip por cada pieza,  cada una en su carpeta con sus contenidos.

 El peso máximo del anuncio debe ser de hasta 120KB.  ­

Layer con video:  El video debe estar en formato .mp4 con codec H264.

¿CÓMO SE INSERTA EN EL HTML?

El vídeo debe tener el mismo tamaño del área en donde se lo quiere colocar en la  creatividad.

Ejemplo:​  El video se llama: ​video.mp4​ y mide 640 x 400 px.    Dentro de mi banner, debo tener una div para insertar el video y allí colocar la siguiente  etiqueta:

 <video id="videoEpl" width="640" height="400" controls autoplay muted">  <source src="​video.mp4​" type="video/mp4">  </video>

PESO MÁXIMO:  El peso de/los videos debe estar incluido en el peso máximo de 30 megas del anuncio rich  media.

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

 Ejemplos

Layer_HTML5 (51kb)

Alertas de mail 300 x 250

e-mail

Se trata de un banner 300×250 ubicado dentro del envío de alertas  de suscripciones premium que se envían diariamente a una base de más de 70.000 usuarios.

Detalles para el armado del banner

  • Medidas: 300×250 px
  • Formato: GIF o JPG
  • Peso máximo: 120 kb
  • Loop: Si

 

Materiales a enviar

  • Archivo GIF o JPG.

No admite

HTML5-Tags

 

 

Banner 300 x 600

250x800

¿CÓMO FUNCIONA?

Este anuncio aparece de manera fija sobre el contenido del sitio. La animación puede tener loop o permanecer en stop una vez que se contabilice la visualización del anuncio.

¿CÓMO SE DISEÑA?

La creatividad debe estar dentro de un div.

<body>
<div id="miCreatividad">
"aquí dentro el diseño de la creatividad"
</div>
</body>

El clicktag es genérico para todos los tipos de formatos y piezas programadas, la implementación es la siguiente:

 <a onclick="window.open(window.clickTag); return false" href="#!">
 <div id="clickTag"> //aquí mi creatividad </div>
 </a>

Englobamos nuestro elemento html con la etiqueta <a> para que se aplique la zona activa.

Especificaciones técnicas banner HTML5

  • Medidas:  300x600px
  • 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

 

Banner Mobile 300 x 100

mobile320x100

¿CÓMO FUNCIONA?

Este anuncio aparece de manera fija sobre el contenido del sitio. La animación puede tener loop o permanecer en stop una vez que se contabilice la visualización del anuncio.

¿CÓMO SE DISEÑA?

La creatividad debe estar dentro de un div.

<body>
<div id="miCreatividad">
"aquí dentro el diseño de la creatividad"
</div>
</body>

El clicktag es genérico para todos los tipos de formatos y piezas programadas, la implementación es la siguiente:

 <a onclick="window.open(window.clickTag); return false" href="#!">
 <div id="clickTag"> //aquí mi creatividad </div>
 </a>

Englobamos nuestro elemento html con la etiqueta <a> para que se aplique la zona activa.

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

 

Banner 680 x 400

630x300

¿CÓMO FUNCIONA?

Este anuncio aparece entre  notas. La animación puede tener loop o permanecer en stop una vez que se contabilice la visualización del anuncio.

¿CÓMO SE DISEÑA?

La creatividad debe estar dentro de un div.

<body>
<div id="miCreatividad">
"aquí dentro el diseño de la creatividad"
</div>
</body>

 El clicktag es genérico para todos los tipos de formatos y piezas programadas, la implementación es la siguiente:

 <a onclick="window.open(window.clickTag); return false" href="#!">
 <div id="clickTag"> //aquí mi creatividad </div>
 </a>

Englobamos nuestro elemento html con la etiqueta <a> para que se aplique la zona activa.

  • Medidas: 680x400px
  • 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

 

Page 1 of 212