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

Paso 2: Pestaña Upload

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

Paso 4: Pestaña Edit

Paso 5: Pestaña “Preview and Download”

Paso 6: Notify Weborama

Herramienta de Debug

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

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

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:
• - 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 #*-_%:=+?/
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:
• screenad.event("user_boton1");
• screenad.event("user_boton2");
• screenad.event("user_boton3");
Para piezas complicadas donde hay nanosites o incluso micros, es muy interesante trackear el comportamiento del usuario y saber dónde pincha.Se puede trackear también el tiempo que el usuario está en una sección. Sea por ejemplo una pieza donde queremos saber cuánto tiempo está el usuario jugando:
• - 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");
Lo mismo se podría hacer con tres secciones dentro de un Ad (galería, juego, formulario) para medir el tiempo que el usuario está en cada una (cada vez que cambie tendríamos que parar las activas). Para el tracking del tiempo en secciones simplemente se puede usar:

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 Mobile

Problemas Caché

Antes de nada comprueba si tu navegador está actualizado en outdatedbrowser por ejemplo
Para borrar caché en los distintos navegadores:
• - 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)
Recuerda que Microsoft no da soporte a versiones anteriores de Internet Explorer ergo Weborama tampoco.
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:
• - 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".
En caso de que trabajemos con Mac, debemos pulsar las siguientes teclas para poder ver los procesos y el rendimiento de nuestro equipo: cmd+space+ac

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:
• 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

Optimización Piezas

Para formatos Standard:
• - 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

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 Weboshowcase
En 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.com
Volver al Inicio