Banner / Layer HTML5 - Estándar
- Sebastian Perez (Unlicensed)
| Los formatos detallados a continuación solo funcionan con códigos Ajax V4 (de Sección o de Espacio). |
HTML5 establece una serie de nuevos elementos y atributos que reflejan el uso típico de los sitios web modernos. Por tanto ofrecemos en e-planning formatos Layer y Banner HTML5.
Diferencia de Banner y Layer
Se ofrecen ambas alternativas en HTML5 para dar mayores posibilidades creativas. Si se tratase de una pieza “fija” se deberá optar por usar Banner, en cambio si la pieza es de tipo “flotante” se deberá seleccionar Layer.
Es importante señalar que desde la carga de estos formatos en e-planning, no van a existir configuraciones de efectos (tales como coordenadas, tipos de desplazamiento, efecto de expansión, entre otros) ya que los mismos deberán ser programados directamente en el código HTML5 de la pieza. Todas estas opciones deberán estar programadas previamente. El archivo que se suba al sistema podrá ser .html/.zip y el ad server lo reproducirá al momento de ejecutar las piezas incluyendo las animaciones y efectos provistos en el código.
Ver más detalles sobre cómo agregar 'efectos' en las piezas: Efectos en Banners tradicionales en HTML5 (eplExtras).
Agregar anuncio:
Luego de crear una pauta, para agregar un anuncio asociado a esa pauta ingresar a “Agregar Anuncio” donde se abrirá el siguiente formulario:
Seleccione el tipo de formato según se requiera:
Ó 
Tipo de archivo a cargar:
En el formulario se dejan algunos ejemplos de tipos de archivo que se pueden subir:
Adobe Edge - .zip
Google Web Designer - .zip.
Las opciones provienen de herramientas de alto uso en el mercado para el armado de piezas en HTML5. Esto no implica que sean las únicas. Es viable la carga de cualquier .html o .zip mientras haya estado programado correctamente.
|
¡IMPORTANTE! - CLICKTAG 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='#!'> 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. - .ZIP 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:
Todas las rutas de imágenes, css, javascript, etc deben ser relativas, por ejemplo: El .zip además no debe contener carpetas dentro, debe contener los archivos que lo componen directamente. En la siguiente imagen, se describe como sería el armado del zip:
- EXPANDIBLES En el caso de que se haya programado una pieza que expande, es decir que contenga 2 medidas distintas, se deberá indicar bajo el campo 'Tamaño (en pixels)' el que corresponda a la instancia inicial de la pieza (esta puede ser la expandida o la replegada):
|
Configuraciones opcionales:
Se mostrarán las mismas configuraciones opcionales que se observan en otro tipo de formatos.
Banner HTML5
Layer HTML5
Botón de cerrar: En caso de que la pieza no cuente con el botón para cerrar, se puede agregar desde el atributo del formulario.
Si todos los datos se cargan correctamente desde el formulario, el anuncio quedará subido al sistema.
Para poder verlo, se deberá hacer click en en link 'Ver anuncio en una ventana nueva':
| ¡IMPORTANTE! Es posible que al acceder a la ventana nueva de la vista del anuncio, este aún no esté replicado en los servidores. Será cuestión de unos momentos hasta que se genere la visualización completa de la pieza. En estos casos la ventana mostrará un mensaje indicando esto:
|
Listar Anuncios:
Si listamos los anuncios se mostrarán de la siguiente manera:
Podemos identificar los nombres que colocamos, el tipo de formato y el nombre del archivo que adjuntamos, entre otros.