Creative Weborama

  • Home
  • Standard Ads
    • Especificaciones
    • Workflow Standard
    • Scratch
    • AnimateCC
    • Google Web Designer
    • Edge
    • Otro Software
  • AdExchanges/RTB
  • Rich Media
    • Workflow RichMedia
    • Formatos y Plantillas
    • Producción de Piezas
    • MPU
    • Expandibles
    • Pushdown
    • Interstitial
    • Formatos Responsive
    • vPAID
    • QA
  • VAST
  • Recursos
    • Previewer
    • Herramienta de Debug
    • Múltiple Click
    • Event Tracking
    • Weborama Snippets
    • Problemas Caché
    • Carga CPU
    • Optimización Piezas
    • Sincronización Piezas
    • Developer Site
    • Weboshowcase
    • Contacto Soporte
  • Contacto

Rich Media

Formatos enriquecidos que pueden incorporar vídeo, sonido y/o interactividad

Workflow RichMedia

1- Definición de un Plan de Medios: Definición de especificaciones de cada Ad según lo que el cliente contrate:
  • - Dimensiones de cada pieza
  • - Pesos máximos
  • - Soportes donde va a ir la pieza
  • - Fechas de entrega
  • - Contactos (de Soportes, de Redes, de Weborama, etc.)
2- Envío de Plantillas: Weborama envía Plantillas para la producción de piezas a la Agencia Creativa:
  • - Instrucciones para utilizar las plantillas de Weborama
  • - Plantillas para cada pieza
  • - Detalles para producir las piezas (frecuencia, specs vídeo, dimensiones botón cerrar, etc.)
  • - Ejemplos de piezas ya realizadas, de nuestra galería de formatos Weboshowcase
  • - Acceso a Plataforma Weborama (Previewer) e instrucciones
  • - Batería de Tips&Tricks (problemas típicos)
3- Producción de la pieza (Agencia Creativa)
  • - RTS, Real Time Support: Contactar con Soporte Weborama para solucionar cualquier duda
  • - Al final del proceso la Agencia Creativa sube la pieza a Plataforma, desde ahí genera un Preview (si se trata de piezas Standard no es necesario, es más rápido enviar los materiales zipeados a Weborama
  • - El cliente aprueba el Preview.
  • - La Agencia Creativa notifica a Weborama que las piezas están preparadas para el QA  
4- QA: Quality Analisis: De acuerdo con el Plan de Medios, Weborama revisa pieza a pieza:
  • - Posicionamiento y funcionamiento de la pieza (Expansión, cierre)
  • - Respeto de los pesos máximos estipulados
  • - Funcionamiento del Vídeo si lo hay (BitRate, peso, etc.)
  • - Visibilidad: Botón cerrar, Call to Action
  • - Frecuencias
  • - Zonas clickables
  • - Métricas
  • - Consumo de CPU
  • Weborama tiene un plazo mínimo de 24 horas para realizar QA
5- Tráficado de la pieza:
  • - El equipo de Tráfico procede al traficado de la pieza
  • - Genera TAGS que envía al soporte
6- Testing en soporte:
  • - Solicitud de página de pruebas al soporte si es necesario
  • - Comprobación de funcionamiento y métricas
7- Lanzamiento de la campaña:
  • - Resolución de incidencias si las hay 8.
  • - Generación de informes y Reporting

Formatos y Plantillas

Antes de hacer nada asegúrate de lo siguiente:
  • - Solicita el Plan de Medios a tu Agencia de Medios.
  • - Comprueba qué formatos sirve Weborama y cuáles son servidos por otras tecnologías.
  • - Decide si vas a realizar los formatos con o sin vídeo.
  • - Ponte en contacto con nuestro equipo de soporte y solicita las plantillas necesarias.
  • - Si no tienes acceso al previewer (Plataforma Weborama), solicítalo, así trabajarás más rápido y más eficiente.
  • - Durante la realización de la pieza puedes contactar con nuestro equipo de soporte para resolver dudas.
  • - Cuando tengas la pieza terminada, súbela a plataforma siguiendo nuestras instrucciones, y espera el QA.

Producción de piezas

Antes de descargar cualquier plantilla RichMedia consulta con nuestro equipo de Support. Ellos te proporcionarán exactamente la plantilla que necesitas de acuerdo con las especificaciones del site. En general, en las siguientes urls encontrarás acceso a los distintos formatos:
  • Billboard
  • Expandibles
  • Caretas
  • Layer
  • Skins
  • MPU
  • Pushdown
  • Fixed Positions
  • Standard
  • Slider
  • Interstitial
  • consulta siempre con nuestra dirección genérica de Support antes de usar cualquier plantilla.

MPU

    Un MPU (Mid Page Unit) es un Ad en el cual hay un reproductor de vídeo. Para realizar una pieza así seguir los siguientes pasos:
  • 1 - Descarga de materiales: Estos son los más comunes
    Para un MPU 300x250: Plantilla y Demo

    • Para un MPU 300x300: Plantilla y Demo
    Para un MPU 300x600: Plantilla y Demo

  • 2 - Preparación de los materiales:
  • - El vídeo ha de ir en formato .mp4, con un peso recomendado menor de 3 Mb
  • - Prepara tu vídeo en .mp4 y llámalo "video"
  • - Prepara una imagen para cuando el vídeo se está cargano y llámala "videoposter", puedes hacerlo sobre la que hay en el template para que veas el tamaño
  • - Puedes poner más elementos y borrar los que hay (logo Weborama, tamaño, etc)
  • - Si quieres hacer loop cambia el parámetro a true (loop: true,)
  • - Si quieres lanzar la pieza con el vídeo sin Autoplay, cambia el parámetro a false (autoplay: false,)
  • - Si quieres lanzar una animación después del vídeo aquí un ejemplo
  • 3. Enviar los materiales a Medios para que Weborama los apruebe

Expandibles

Dos cosas necesitamos saber cuando vamos a hacer una pieza expandible:
  • - Si va a llevar vídeo o no
  • - Si la pieza se sirve con frecuencia 1 (esto significa que la pieza autoexpande en el primer impacto)
En este último caso (pieza con frecuencia 1), en la misma encontraremos un html para la pieza colapsada (banner.html o mrec.html), otro html para el primer impacto (layerf1.html habitualmente), y un último html para el resto de expansiones (layer.html), además de todos los demás assets necesarios (imágenes, vídeo en .mp4 y .webm, css y js).

A partir de ahí sólo es necesario seguir estrictamente nuestras especificaciones para trabajar con html5 y respetar el funcionamiento de la pieza.
Importante: Si queremos cambiar el comportamiento de la pieza, consultar con soporte (lo normal y recomendado por los soportes es que la pieza expanda y contraiga por click en el botón, si bien, también se puede hacer por RollOver en desktop)

Pushdown

Para trabajar con un Pushdown también tenemos que saber si va a ir o no con vídeo y si va a ir con frecuencia, aunque lo más normal es que sí la lleve. En este caso se trabaja directamente todo en un archivo, cuando descargamos una plantilla de un Pushdown, encontramos lo siguiente:
  • - Un html (pushdown.html)
  • - Un css
  • - Un js
  • - Todos los assets necesarios (vídeo en .webm y .mp4), imágenes, etc.
Si vemos la estructura de nuestro html, nuestro contenido irá donde se indica en los comentarios (collapsed y expanded content) 
Además es necesario seguir estrictamente nuestras especificaciones para trabajar con html5.

Interstitial

El formato Interstitial es un formato que aparece en los websites una vez que se ha cargado la página. Normalmente tiene una duración determinada (suele ser de 10 segundos) y es entonces cuando desaparece. El usuario puede cerrar su visionado también en cualquier momento. Este formato se lanza siempre desde un 1×1. En nuestra galería de formatos puedes ver varios ejemplos de este formato. 

En la actualidad Weborama posee un formato Interstitial Responsive. Eso significa que este formato se adapta a cualquier resolución para cualquier dispositivo (desktop, tablet, smartphone) ya sea en landscape (en horizontal) como en portrait (en vertical). Esto es muy importante a la hora de planificar, si recibimos un Plan de Medios con cinco interstitials difereentes muy probablemente el mismo formato nos servirá para los cinco. En cualquier caso consultar siempre a nuestro equipo de Support. La plantilla puedes descargarla aquí, y aquí puedes ver una demo. Como se observa si se redimensiona la ventana del navegador, el formato se adapta a cualesquiera resolución. Si prefieres verlo desde una tablet o un smartphone, puedes escanear este QR desde tu dispositivo con tu App preferida.  

Formatos Responsive

La idea es muy sencilla: Con un mismo TAG poder lanzar la pieza para distintos dispostivos o para distintas anchuras del navegador. Los formatos en los que más se utiliza esta implementación suelen ser los que en desktop son bastante alargados (por ejemplo un billboard para desktop que en tablet es un megaboard y en smartphone un formato fixed). 
Aquí podemos ver un ejemplo de una plantilla, si redimensionas la ventana verás como la pieza tiene tres estados que son: Desktop 970×250 – Tablet 768×100 – Smartphone 320×100. Siempre dependen de cada soporte. Aquí otro ejemplo de una pieza real (si redimensionas el navegador ves el comportamiento). 

Cada vez se están utilizando más en web Ads responsive o semiresponsive. Antes de hacer nada es necesario consultar con el equipo de soporte para comprobar que una pieza se puede lanzar de esta forma (previamente se hacen pruebas entre Weborama y el soporte). Normalmente funcionan o bien detectando el dispositivo desde el que el usuario accede (desktop, tablet, mobile) o con queries para mostrar una u otra creatividad en función del ancho del navegador. En cualquier caso, todo esto ya viene definido en nuestras plantillas con lo cual la agencia creativa sólo tiene que centrarse en la producción de la pieza.

En terminos de producción, siempre encontraremos varios divs contenedores para cada estado: Big, Medium y Small, que se corresponden a Desktop, Tablet y Mobile normalmente. Es muy importante no modificar la estructura principal de los divs del html principal, ni tampoco el js. Dentro de cada contenedor sí se pueden meter más divs

VPAID

El vPaid es uno de los formatos más complicados que existen, a diferencia del VAST permite interacción, engagement, links sociales, múltiple vídeo, etc. En la actualidad este formato está migrando de Flash a HTML5 hasta que todos los publishers adapten sus players (vast-compliant).
Puedes ver en nuestra galería varios ejemplos para inspirarte.

    Requisitos para servir este formato:
  • - El formato ha de seguir los estándares de la iab
  • - El soporte ha de tener un player VAST Compliant
  • - Han de seguirse estrictamente las plantillas que facilitará Weborama
Consulta con nuestras dirección genérica de Support para realizar este tipo de formatos.

QA

    Antes de lanzar una campaña, todas las piezas Rich Media pasan por un proceso de validación o QA (Quality Assurance) para comprobar que:
  • - El funcionamiento de la pieza es correcto respecto a las especificaciones del site
  • - Se respetan los pesos máximos estipulados
  • - El tracking y las métricas de la pieza son correctas
    Estas son las incidencias más comunes y causa de no validación del proceso de QA:
  • - No existe una imagen de backup o fallback para el Ad (puede ser .gif/.jpg/.png), ha de ser estática con el claim y oferta principal de la campaña.
  • - Existen llamadas a librerías externas en modo no seguro (nunca usar "http", siempre "//" o "https"). Se puede usar el CDN de Weborama.
  • - Existe loop en la animación y la pieza va servida en RTB. Ver las especificaciones.
  • - La pieza no cumple con las especificaciones html5 de Weborama. Ver guía de implementación.
  • - La pieza sobrepasa los pesos máximos estipulados por la Agencia de Medios. Es necesario optimizar.
  • - El Click es erróneo. En ningún caso se implementa el Click con variables o urls externas. Siempre con la API de Weborama. Ver guía de implementación.
  • - La carga inicial de la pieza supera lo estipulado por el soporte. Optimizar la carga inicial. Consultar atentamente las especificaciones del soporte y cumplirlas. En caso necesario usar precarga.
  • - La pieza supera los niveles de carga de CPU permitidos. Es necesario optimizar el rendimiento del Ad de acuerdo con las specs del publisher
  • - La pieza no tiene un Call to Action claro "Haz Click para expandir" o similar, de acuerdo con especificaciones del soporte
  • - La pieza no trackea los eventos correctamente: No se ha seguido la plantilla proporcionada o se ha modificado de forma errónea. Ver implementación de eventos
  • - La pieza no tiene un botón Cerrar cuando es necesario por soporte. Lo recomendable siempre es que ponga "X Cerrar"
  • - La pieza tiene errores 404 en Consola. En ningún caso Weborama sirve piezas con errores
    En RichMedia los QA son más extensos. Estos son todos los puntos que se revisan en un Ad QA (Quality Analisis):
  • - Flight Name: Nombre del flight
  • - Campaign: Nombre de la campaña, suele ser el anunciante y el claim de la campaña
  • - Site: Publisher donde se va a lanzar la creatividad
  • - Format/Dimmensions: Si se trata de un MPU,Expandible, Pushdown, etc
  • - Preview Url: Url demo de la pieza
  • - Preview Url in Debug Mode: Url donde podemos ver el tracking de la pieza
  • - Total Weight: Peso total de la pieza y peso total del vídeo
  • - Initial Load: Carga inicial de la pieza, no ha de ser muy elevada
  • - CPU Usage: % de utilización de CPU de la pieza, no ha de ser muy elevada
  • - Event Tracking: Todos los eventos que se trackean en la pieza (video_play, %s video, video_pause/resume, video_mute/unmute, video_replay/complete, click)
  • - Clicks: Si la pieza lleva distintas urls de destino. Comprobación de Zonas Clickables
  • - Bitrate Video: Se comprueba, el overall bit rate, el first video stream y la duración del vídeo
  • - Display in Browsers: Se comprueba que la pieza se vea bien en los distintos navegadores web
  • - Traffic: Aquí se especifica al equipo de Tráfico si hay algún punto especial (Frecuencia1, etc.)
  • - Comments: Comentarios sobre la pieza
  • - Recommendations: Recomendaciones para un mejor funcionamiento de la pieza
  • - QA Result: Siempre será Pendiente (es necesario cambiar algo) / OK (se puede lanzar la pieza)
  • - Requests: Aquí se detallan con exactitud los cambios necesarios para que la pieza sea válida
En todos los casos, en todas las campañas, Weborama tiene un plazo mínimo de 24 horas para hacer el QA de cada pieza.
Volver al Inicio