| Posición |   |
|---|---|
| Descripción | La creatividad está compuesta por dos partes: – Una pieza contraída visible inicialmente. – Una pieza expandida, que aparece con efecto fade o slide hacia abajo. |
| Dimensiones | En formato de imagen estática: Pieza contraída: 1200 × 90 px o 1200 × 250 px Pieza expandida: Hasta un máximo de 1.200 × 1.000 px En formato HTML o redirect: Se entrega una única pieza que debe contemplar ambos estados (contraído y expandido). Se deben respetar las mismas dimensiones indicadas anteriormente para cada estado. |
| Formatos | Opción 1: Imagen Estática Entregar dos archivos separados en formato .jpg o .png: Una imagen para la versión contraída. Una imagen para la versión expandida. El efecto de expansión (fade o slide) será implementado por el soporte técnico. Opción 2: HTML o Redirect Solo se requiere una única pieza HTML. Debe estar autoprogramada para: Gestionar el cambio entre los dos estados (contraído / expandido). Incluir los efectos de transición (fade o slide). Aplicar la lógica de interacción especificada. Importante: La pieza debe respetar las dimensiones máximas para cada estado. |
| Consideraciones | Comportamiento de Expansión Primera impresión al usuario (frecuencia 1): La creatividad puede expandirse automáticamente al cargar la página. Visualizaciones posteriores (frecuencia >1): La expansión solo se permite mediante interacción del usuario, cumpliendo estas condiciones: El usuario debe posar el cursor sobre la pieza (sin hacer clic). Se aplicará un retardo de 3 segundos antes de expandirse. El contenido expandido debe cerrarse de forma automática o con un botón visible. Es importante que el contenido no bloquee navegación ni interfiera con otros elementos de la página. Asegurarse de que todo esté correctamente optimizado para tiempos de carga y rendimiento. |
| ClickTag | En caso de HTML se debe implementar el clickTag de la siguiente manera:
1. Declaramos la variable de click <script type="text/javascript"> var clickTag = "http://www.google.com"; </script> 2. Luego encapsulamos la capa de click en el contenido de la crea <a href="javascript:window.open(window.clickTag)"> <img src="PIEZA" style="position: absolute;"> </a> |
| Restricciones | Tag Redirect o HTML: La pieza expandible debe incluir un botón visible de cierre (ASPA). Si contiene vídeo, el reproductor debe tener controles de play, pause y stop. La expansión debe cerrarse al hacer clic en el botón de cierre o automáticamente tras 7 segundos. Solo para HTML: Se recomiendan piezas en HTML nativo en vez de piezas hechas con Google Web Designer o Adobe Edge Animated. El archivo index.html debe contener todas las referencias inline o absolutas. Máximo: 10 peticiones externas El consumo de CPU no debe superar el 30% en equipos estándar (Core i5). La carga inicial bajo condiciones normales (red WiFi o 4G) no debe exceder los 100 KB. |
| Video/audio | El player debe mostrar los controles de play, pause, stop y volumen. El player debe empezar en silencio (mute) y no debe estar en loop infinito, pero se puede añadir un botón de replay. El player puede estar en autoplay siempre y cuando el vídeo/audio no supere los 1Mb de peso |
| Valor z-index | Pieza estándar z-index = 9 Pieza expandible z-index = 900000 |
| Demo | Careta |
| Comentarios | Se puede combinar con: Skyscraper Equivalente: Sticky Desplegable |
