Archive: July, 2016

Banner tradicional HTML5 con Video

html5

Características

Medidas: 728x90px, 300x250px, 300x300px, 300x600px, 630x300px, 250x600px, 250x800px, 300x120px, 1320x250px, 980x250px. Consultar por más formatos.

  • Formato: HTML5.
  • Peso máximo: 120kb
  • Gif o JPG de respaldo: Opcional
  • Peso máximo del GIF o JPG: 100kb
  • Loop: No
  • 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.

 

Inclusión de códigos HTML5

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

Descargas

Banner Tradicional HTML (71 kb)

Banners tradicionales HTML5

html5

Características

Medidas: 728x90px, 300x250px, 300x300px, 300x600px, 630x300px, 250x600px, 300x120px, 980x250px. Consultar por más formatos.

  •  Formato: HTML5.
  •  Peso máximo: 120kb
  •  Gif o JPG de respaldo: Opcional
  •  Peso máximo del GIF o JPG: 100kb
  •  Loop: No

ESPECIFICACIONES TÉCNICAS

Cantidad de piezas: 1

ARCHIVO DE EJEMPLO: DESCARGAR

¿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 PROGRAMA?
La creatividad debe estar dentro de un div.

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. Ejemplo, el banner consta de 2 piezas, se debe enviar 2 zip por separado, cada una en su carpeta con sus contenidos. Ver ejemplo: Armado de piezas, CLICK AQUÍ.
  •  El peso máximo del anuncio debe ser de hasta 30 MB.
  • En caso que la pieza lleve video ver las siguientes especificaciones, CLICK AQUÍ.

El archivo ZIP debe contener en su interior el banner con el siguiente nombre: index.html

El .zip no debe contener carpetas dentro, debe contener los archivos que lo componen directamente.

Todas las rutas de imágenes, css, javascript, etc deben ser relativas, por ejemplo:

imagen1.jpg // OK
http://www.dominio.com/carpeta/imagen1.jpg // MAL

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

grafico

Debemos crear una carpeta para nuestro banner y allí guardar el archivo HTML con toda su creatividad relacionada. Luego colocar en la misma carpeta nuestra librería “.js” en: eplBuilder.js* que luego debe ser incluida en el html del banner dentro de la etiqueta head.

Ejemplo:

<head>
    <script src="eplBuilder.js"></script>
</head>

 

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>

Se realizará una validación al subir el archivo y en caso de que no esté el clicktag o se haya programado de manera diferente a la indicada se mostrará un warning.

Esto es clave porque en caso de subir el archivo sin la correcta implementación la pieza no será clickeable por lo tanto tampoco contabilizará los clicks.

Tener en cuenta que en caso de que se suba un .zip el mismo debe contener un index.html dentro, de lo contrario se considerará inválido.