Recursos
Material de ayuda para la producción de piezas
Plataforma Previewer
Recordad que la plataforma se utiliza sólo para piezas RichMedia (Expandibles, formatos con vídeo, pushdown, formatos de mucho peso)
Una vez que Weborama nos haya proporcionado nuestro usuario y Login a plataforma, accederemos en la siguiente url:
http://clients.weborama.nl
La Plataforma, es muy intuitiva y fácil, tiene seis pasos:
Paso 1: Creación de Flight
Lo primero que hay que hacer es crear un Flight por cada pieza (“Start New Flight”), nosotros solemos usar la nomenclatura Cliente_Campaña_Dimensiones, por ejemplo para un expandible 300×250-600×250 de ECI campaña San Valentín, sería: “ECI_SanValentin_Exp300x250-600×250”.Paso 2: Pestaña Upload
Una vez que habéis creado un Flight la plataforma os manda directos a la pestaña “Upload”, aquí es donde se suben los .swf, los .flv y los .gif. Recordad que el .gif será siempre del tamaño replegado de la pieza. Simplemente es seleccionar, pulsar “Upload Files” y esperar.- Importante:
- - Si tu pieza tiene Assets, has de subirlos también
- - Puedes arrastrar directamente los ítems a la pestaña upload
- - Puedes crear un .zip con tus materiales y subirlos todos de vez, la plataforma lo decompila arriba
- - Abajo a la izquierda verás el proceso de subida en porcentaje
- - La Plataforma os pasará directamente a la siguiente pestaña.
Paso 3: Pestaña Clicks
La siguiente, pestaña Clicks, si no tienes claro la url de destino de la campaña puedes obviar este paso. El equipo de Tráfico lo implementará.Si la pieza tiene múltiple Click, puedes seguir nuestro tutorial o ponerte en contacto con nuestro equipo.
Paso 4: Pestaña Edit
A continuación está la pestaña Edit, esta es la más importante: Normalmente el .gif irá como fixed position, los .flv como assets y los .swf como layers. Tened en cuenta que el .swf toma la referencia del .gif para posicionarse encima (por eso el .gif va al tamaño replegado). Veréis también que hay un desplegable “Display position”. Bien, en principio la plataforma es inteligente e identifica cómo se va a servir la pieza, tened en cuenta que si es una careta o un 728×90 expandible siempre será ”leaderboard”, para el resto casi siempre es “auto” o “rectangle”.Para saber exactamente qué posición ocupan las piezas, en cada plantilla hay un pantallazo de cómo ha de estar distribuido el flight. Es un .png que no hay que subir a plataforma "displayPosition.png"
Paso 5: Pestaña “Preview and Download”
Ya tenéis las pieza subidas y posicionadas, sólo falta verlas. Podéis elegir una preview page en el desplegable (ElMundo, ElPais, MSN, …) Después recomendamos que testéis primero en Debug Mode, para ver si todo funciona perfectamente. Sobre todo que se trackeen perfectamente los eventos de los vídeos.Por último pulsáis en “click here to preview”, la herramienta os abrirá una url. Esa url es la que nos podéis enviar al cliente y a Medios para aprobación.
Paso 6: Notify Weborama
Por último, cuando tengáis la pieza lista, la pieza ha de ser validada (QA). Lo más cómodo es hacer una notificación, pulsáis en “Notify AdRime” (Spain) y generáis un mail directo a nuestro departamento de Support. Esto es lo más rápido para que Weborama haga el QA de vuestra pieza. Es IMPORTANTÍSIMO que en este último paso al hacer la notificación, marquemos en el desplegable ESPAÑA (Adops ESPAÑA), si no, la pieza no será verificada: Si después de tener el OK a la pieza final , hay modificaciones creativas, es necesario volver a notificarlo.Herramienta de Debug
Cualquier pieza RichMedia va reflejando una serie de métricas que miden la interacción del usuario con la pieza. Estas métricas son muy importantes, especialmente en algunas piezas, por ejemplo se contabiliza el número de expansiones, el número de veces que el usuario pulsa en el botón cerrar, los porcentajes de reproducción del vídeo, etc.- Todo esto se puede comprobar de dos maneras:
- - La primera es desde el propio Previewer, en la pestaña Preview, lanzando "Preview in Debug Mode". Veremos nuestras pieza con un pequeño frame a la derecha donde se irán contabilizando los distintos eventos de interacción del usuario (pestaña Events).
- - También podemos hacerlo sobre cualquier url de preview, añadiendo al final de la misma "?webo_watcher=true" y actualizando
Múltiple Click
Una misma pieza puede tener varias urls de destino. Normalmente, en producción, no es necesario saber las urls de destino, esto se suele hacer al traficar la pieza, siempre depende de Medios (además las urls suelen ir parametrizadas). Lo que sí es necesario es que a la hora de programar la pieza, se distinga entre el click principal o default y el resto.- Muy importante tener en cuenta lo siguiente:
- - El Click principal o Click default siempre se implementa así: screenad.click();
- - El siguiente click siempre se añade así: screenad.click('extra1');
- - Si hubiera otro click sería así: screenad.click('extra2');
- - Y así seguiría (se pueden implementar hasta 10).
- Aquí puedes descargar un ejemplo de una pieza con múltiple click implementado
- - Los eventos no han de ser llamados en loop, ya que prueben provocar un mal funcionamiento del Ad.
- - El máximo número de caracteres para un evento es de 32, si un evento tuviera más caracteres, se acortará su nomenclautra.
- - Los caracteres admitidos para el trackeo de eventos son los siguientes: abcdefghijklmnopqrstuvwxyz0123456789 #*-_%:=+?/
screenad.event("user_boton1");
screenad.event("user_boton2");
screenad.event("user_boton3");
- - Cuando el usuario comienza a jugar dentro del Ad screenad.startTimer("gameplay_duration");
- - Cuando el usuario finaliza el juego o lo pausa dentro del Ad screenad.stopTimer("gameplay_duration");
- - Google Chrome (Ctrl + May + Supr o > Herramientas > Borrar datos de navegación)
- - Microsoft Edge (> Herramientas > Opciiones de Internet > Eliminar historial de navegación)
- - Mozilla Firefox (Herramientas > Opciones > Red > Limpiar)
- - Apple Safari (>Herramientas > Preferencias > Privacidad > Borrar)
- - Opera (Settings > Delete Private Data)
- - Bien pulsando a la vez las teclas: Control + Alt + Supr.
- - Bien clickando con el botón derecho del ratón en la barra de menús de nuestro escritorio de Windows y pulsar en la opción "Iniciar el Administrador de tareas".
- Eliminación/supresión de eventos recursivos (enterframes) si no son exclusivamente necesarios.
- - En caso de que la pieza tenga vídeo, bajar el peso del mismo o su bitrate.
- - Optimización de imágenes y animaciones
- - Revisión de librerías que utilizamos (el 3D suele ser bastante peligroso)
- - El juego con Mapas de bits por programación también consume mucha CPU
- - Utiliza librerías para tus animaciones, siempre que estén en un CDN y sin protocolo (ver ).
- - Puedes utilizar el CDN de Weborama también: apuntando a nuestro CDN
- - Minimiza el peso de tus imágenes, recomendamos utilizar .svg, .gif o .png. Utiliza servicios como tinyjpg o tinypng para optimizar pesos. También puedes utilizar Google fonts para ahorrar peso en las tipografías
- - En ningún caso se permite subir piezas apuntando a assets no alojados en Weborama
- - Si utilizas AnimateCC sigue por favor las indicaciones de Adobe Support y las pautas de sus best practices
- - Ten en cuenta cómo se computa el peso de cada pieza: El peso de cada pieza se computa como el total de todo lo que se suba en cada flight: Por ejemplo para un Standard se computa como la suma del .gif de backup, el html y todos los assets necesarios. Lo único que no computa son las librerías externas y las tipografías si se usa algún servicio como Google Fonts. Si utilizas la plataforma, el peso viene definido arriba a la derecha (Total Project Size). En ningún caso se computa el peso como el .zip compilado antes de subir el Ad.
- Para formatos RichMedia:
- - Solicita el Plan de Medios a tu Agencia de Medios.
- - 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), solicita uno, 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
Event tracking
Por defecto ya se miden bastantes eventos, de hecho cuando se lanza en la plataforma un preview de la pieza, se puede hacer en Debug Mode (pestaña Preview), y luego, una vez que se nos abre la ventana nueva, pinchamos Events. Ahí podemos comprobar los eventos que se trackean (click, user_close, expand, user_close, etc.) al interactuar con la pieza. Es posible trackear también eventos personalizados en cualquier pieza para así medir distintas interacciones.- Muy importante tener en cuenta lo siguiente:
-
Por ejemplo en una pieza donde tengamos un juego, cuando se pulse el botón para empezar a jugar haríamos:
screenad.event("user_plays_game");
- Si fuera por ejemplo un juego en el que el usuario puede pulsar tres botones:
Cuando el usuario pincha en la sección A:
screenad.startTimer("sectionA");
screenad.stopTimer("sectionB");
screenad.stopTimer("sectionC");
Cuando el usuario pincha en la sección B:
screenad.stopTimer("sectionA");
screenad.startTimer("sectionB");
screenad.stopTimer("sectionC");
Cuando el usuario pincha en la sección C:
screenad.stopTimer("sectionA");
screenad.stopTimer("sectionB");
screenad.starTimer("sectionC");
Puedes comprobar cómo trackean tus piezas utilizando la herramienta de Debug.
Weborama Snippets
Dentro de nuestro portal para developers, puedes descargar ejemplos de distintos snippets (geolocalización, swipe, store locator, Facebook share, Instagram Feed, acelerómetro, etc.). Son sobre todo para se utilizados en piezas servidas en MobileProblemas Caché
Antes de nada comprueba si tu navegador está actualizado en outdatedbrowser por ejemplo- Para borrar caché en los distintos navegadores:
Puede ocurrir también que cuando una pieza esté ya traficada, exista lo que se llama caché de servidor, suele pasar por ejemplo cuando se piden páginas de pruebas. En este caso puede tardar unos 20 minutos en refrescarse la creatividad (aproximadamente).
Carga CPU
Es importante comprobar la carga de CPU de las piezas Rich Media que realicemos, porque ciertos soportes no permiten cargas de CPU por encima del 30%. Hay que tener en cuenta que la carga de CPU depende de también de las características de nuestro equipo, es decir, si tenemos un buen equipo la carga de CPU será menor.- Para comprobar la carga de CPU debemos abrir el administrador de tareas. Hay dos formas de hacer esto si trabajas con PC:
En Windows debemos acceder a la pestaña llamada "Rendimiento": Debemos fijarnos únicamente en el uso de CPU, no en el uso de memoria física. Una vez abierto el administrador de tareas, crearemos un preview de nuestra pieza en la plataforma de weborama (Previewer). Nos fijaremos en el comportamiento del uso de CPU al crear un flight con nuestra pieza. En caso de que sobrepase el 30%, debemos optimizar aún más la pieza con acciones como, por ejemplo:
Optimización Piezas
- Para formatos Standard:
Sincronización de Piezas
En algunas piezas expandibles puede ser necesario que al ejecutar un evento se produzca cierta animación en la pieza. Por ejemplo en una pieza expandible al pinchar en Call to Action ("Expandir") que la pieza se anime todas las veces que expanda. Para hacer esto es necesario utilizar funciones sincronizadas. Es muy fácil:En el colapsado "banner.html" en la función de expandir añadirmos la llamada a la función que se ejecutará al expandir "llamarExpandido":
function showLayer(){
screenad.event('expand');
console.log("show_layer")
screenad.show("all");
screenad.shared.callMethod("animarExpandido");
}
Y en el expandido, "layer.html" tendremos esa misma función sincronizada, así:
screenad.shared.animarExpandido = function() {
//Do here whatever
var w_weborama = document.getElementById("w_weborama");
TweenMax.to(w_weborama, 2, {opacity:1, x:400, y:400});
console.log("Sync works OK!")
}
Puedes ver un ejemplo en esta pieza y descargar la plantilla aquí
Puedes también consultar nuestra API aquí.
Developer Site
En el site para Developers de Weborama, puedes encontrar más a fondo temas tan interesantes como:- - Screenad Interface (API Weborama)
- - Video API
- - Librerías
- - Video Tutoriales
- - Snippets
Weboshowcase
Nuestra galería de formatos se llama WeboshowcaseEn ella puedes encontrar las mejores campañas lanzadas con tecnología WEborama, es posible filtrar por:
- - Formato
- - Característica
- - Sector
- - Publisher
- - Device
- - País
-
Puedes incluso filtrar de varias formas y enviar el resultado a un cliente, por ejemplo si quieres ver Campañas en España con el formato Billboard que lleven vídeo, obtendrías esta url:
http://weboshowcase.com/#filter/formats=44:Billboard/features=11:Video/countries=6:Spain/
Contacto Soporte
Puedes realizar cualquier petición a nuestra dirección genérica de soporte: Support-es@weborama.comVolver al Inicio