Standard Ads - Especificaciones
- Para enviar los materiales correctamente: Hacer una carpeta por cada pieza. Dentro de esta carpeta han de ir todos los elementos necesarios: desde la imagen de backup (.gif/.jpg/.png) hasta el html, assets, js, etc. Después crear un .zip para cada pieza (carpeta) y enviar los materiales bien a Medios bien a nuestra dirección genérica de support.
– Todas las piezas han de tener nuestras metaetiquetas, justo después del head:
- Llamada a la API de Weborama, así:
– Implementación de clickTag de Weborama. Sobre el contenedor principal, así:
(la url de destino se implementa en Tráfico, en níngún caso se pone aquí)
– Todas las llamadas a librerías externas, han de ser seguras. En ningún caso se aceptan piezas con llamadas no seguras. Se puede utilizar el CDN de Weborama para la llamada a librerías externas. No utilizar el CDN de JQuery por razones de seguridad, usar el nuestro, así:
– Weborama NO acepta estructura de carpetas, todo debe estar al nivel del raíz. En ningún caso se aceptan piezas con llamadas a assets en carpetas externas (tipo /images)
– Para el cómputo del peso de las piezas: El peso de cada pieza se computa como el total de todo lo que se suba en cada creatividad: Por ejemplo para un Standard se computa como la suma del .gif/.jpg de backup, el html y todos los assets necesarios. El total significa el TOTAL de todo lo que contenga cada creatividad. No discrepamos entre navegadores. Si a una creatividad se suben varios vídeos y en Chrome sólo se utiliza uno, computamos el total, y lo mismo con las fuentes. Lo único que no computa son las librerías externas y las tipografías si se usa algún servicio como Google Fonts. En ningún caso se computa el peso como el .zip compilado o el .oam antes de subir el Ad. Si te pasas del peso máximo establecido, estarás generando un coste extra a la Agencia de Medios / Cliente final. En este caso, recuerda que siempre es posible optimizar más, y que también puedes utilizar otra tecnología que no genere tanto peso.
-Weborama no permite contenido alojado en sites externos vía iframe. Todo debe ir subido a Weborama. Tan sólo permitimos las llamadas a las librerías externas y a fuentes de Google.
– En cuanto a los vídeos, se puede usar ya casi solo .mp4 (ver http://caniuse.com/#search=mp4)
– GIF: En todos los casos (standard y richmedia) es obligatorio un .gif/.jpg/.png de backup. Este backup raramente será visible con lo que recomendamos un peso de 30Kb aprox. Si se trata de una pieza Standard que ya va animada, no hace falta animar el .gif, ha de ser estático.
– Caracteres extraños:
– Para piezas Standard: No hace falta utilizar el Previewer. Las agencias creativas envían directamente las piezas (vía weTransfer o servicio análogo), en un .zip con cada pieza. Weborama valida técnicamente las piezas luego.
– Todas las piezas han de tener nuestras metaetiquetas, justo después del head:
<!-- ADRIME SCREENAD META DATA (don’t edit/remove) -->
<!-- SCRVERSION: screenad_interface_1.0.3 -->
<!-- SCRFORMAT: banner -->
<!-- SCRSTICKY: false -->
<!-- SCRWIDTH: 300 -->
<!-- SCRHEIGHT: 250 -->
- Llamada a la API de Weborama, así:
<script type="text/javascript" src="//media.adrcdn.com/scripts/screenad_interface_1.0.3_scrambled.js"> </script>
– Implementación de clickTag de Weborama. Sobre el contenedor principal, así:
<div id="container" onclick="screenad.click()">
(la url de destino se implementa en Tráfico, en níngún caso se pone aquí)
– Todas las llamadas a librerías externas, han de ser seguras. En ningún caso se aceptan piezas con llamadas no seguras. Se puede utilizar el CDN de Weborama para la llamada a librerías externas. No utilizar el CDN de JQuery por razones de seguridad, usar el nuestro, así:
<script type="text/javascript" src="//media.adrcdn.com/scripts/jquery.min.js"> </script>
– Weborama NO acepta estructura de carpetas, todo debe estar al nivel del raíz. En ningún caso se aceptan piezas con llamadas a assets en carpetas externas (tipo /images)
– Para el cómputo del peso de las piezas: El peso de cada pieza se computa como el total de todo lo que se suba en cada creatividad: Por ejemplo para un Standard se computa como la suma del .gif/.jpg de backup, el html y todos los assets necesarios. El total significa el TOTAL de todo lo que contenga cada creatividad. No discrepamos entre navegadores. Si a una creatividad se suben varios vídeos y en Chrome sólo se utiliza uno, computamos el total, y lo mismo con las fuentes. Lo único que no computa son las librerías externas y las tipografías si se usa algún servicio como Google Fonts. En ningún caso se computa el peso como el .zip compilado o el .oam antes de subir el Ad. Si te pasas del peso máximo establecido, estarás generando un coste extra a la Agencia de Medios / Cliente final. En este caso, recuerda que siempre es posible optimizar más, y que también puedes utilizar otra tecnología que no genere tanto peso.
-Weborama no permite contenido alojado en sites externos vía iframe. Todo debe ir subido a Weborama. Tan sólo permitimos las llamadas a las librerías externas y a fuentes de Google.
– En cuanto a los vídeos, se puede usar ya casi solo .mp4 (ver http://caniuse.com/#search=mp4)
– GIF: En todos los casos (standard y richmedia) es obligatorio un .gif/.jpg/.png de backup. Este backup raramente será visible con lo que recomendamos un peso de 30Kb aprox. Si se trata de una pieza Standard que ya va animada, no hace falta animar el .gif, ha de ser estático.
– Caracteres extraños:
- - No utilices acentos.
- - No utilices espacios en blanco. Separa las palabras con guión bajo “_” en vez de usar espacios.
- - No empezar con “_” los nombres de los archivos o assets de la creatividad. Se pueden usar como separador, pero el nombre de los archivos no puede empezar este caracter.
- - No comiences la denominación de los assets con caracteres especiales (guión bajo o cualesquiera).
- - Evita utilizar los siguientes caracteres: ¿ / \ : * ” < > [ ] () $ ñ , . @ # € ampersand, paréntesis...
- - Evita utilizar un guión bajo al principio de la nomenclatura de los html y los assets.
– Para piezas Standard: No hace falta utilizar el Previewer. Las agencias creativas envían directamente las piezas (vía weTransfer o servicio análogo), en un .zip con cada pieza. Weborama valida técnicamente las piezas luego.
Workflow
Para trabajar con formatos html5 en piezas Standard:- - Confirma con Medios el peso máximo de tu pieza
- - Confirma con Medios si la pieza se servirá en RTB o AdExchanges
- - Confirma con Medios si todas las piezas las sirve Weborama
- - Elige una de las opciones para producción de piezas (Scratch, AnimateCC, GoogleWebDesigner, Edge, etc)
- - Sigue atentamente las indicaciones de implementación
- - Una vez tengas todas las piezas preparadas, prepara un .gif/.jpg de backup para cada pieza, con 50Kb es suficiente
- - Prepara un .zip por cada pieza y envíalas a Weborama o a Medios para que Weborama realice el QA y valide las piezas
HTML5 Scratch
Para hacer piezas en Scratch sigue atentamente las especificaciones de html5- Descargar plantillas para todos los formatos Standard en HTML5 Scratch
- Pieza Standard en Scratch con multiple click
Adobe Animate CC
Con la nueva actualización de Adobe (Adobe Animate CC 2015.2), es muy fácil y rápido hacer la producción de piezas Standard con la tecnología de Weborama.- - Si utilizas la versión de AnimateCC 18.0.1 (Compilación 115) utiliza este perfil de publicación
- - Para la versión de Adobe AnimateCC 2017.5 Compilación 16.5.0.100 utiliza estas plantillas
- - Si utilizas la versión de Adobe AnimateCC (2017 Enero o Marzo) – Descarga aquí las plantillas para Standard
- - Si utilizas una versión anterior – Descargar aquí plantillas para Standard
- - Lo primero que debes tener en cuenta: Debes saber si tus piezas se van a servir en AdExchanges (vía RTB). En ese caso, has de seguir al milímetro las especificaciones indicadas aquí.
- - En segundo lugar: Utiliza nuestras plantillas, porque ya tienen la implementación de Weborama (Metaetiquetas, posicionamiento, click implementado). Si no lo haces así, es muy posible que tengas errores y tengas que repetir la pieza.
- - Al publicar ten en cuenta que has de utilizar el perfil que se carga en la plantilla (en NINGÚN CASO publiques con la casilla "Reproducir línea de tiempo en bucle" activa)
- - Todas las llamadas a librerías externas han de ser en modo seguro
- - Weborama no acepta estructura de carpetas, todo ha de estar al mismo nivel que el html raíz. Por eso es muy importante que utilices nuestras plantillas para realizar las piezas
- - Si abres una plantilla verás lo siguiente: Hay un conjunto de capas que se llama “Content”, ahí es donde irá tu contenido y tu animación.
- - Cuando ya tienes preparada la pieza, lo que tienes que hacer es publicarla. Si estás utilizando nuestras plantillas, al publicar la pieza, se cargará directamente el perfil de publicación (“Weborama Fixed Position” o "WeboAnimateCC2017·), así como las rutas correctas (sin carpetas). Pulsa publicar y verás como se genera automáticamente un .html, un .js y las imágenes necesarias. Todo al mismo nivel del raíz
- - Recuerda que las llamadas siempre han de ser SSL (modo seguro)
- - Recuerda que no es necesario insertar ningún Click ya que viene ya en la plantilla. Recuerda también las mejores prácticas (no utilices filtros tipo desenfoque o similares), romper las fuentes o usarlas como textos estáticos.
- - Por último: prepara un .zip con todos los materiales (el .fla no es necesario), y envía tu batería de .zips a nuestro departamento de Support para validar las piezas.
Google Web Designer
Siempre recomendamos desarrollar las piezas partiendo de nuestras plantillas para agilizar el proceso de validación y disminuir incidencias, pero si decides usar alguna otra opción diferente, entonces en esos casos lo que se hace es agregar el llamado a nuestra API e incluir el click al html que generan por defecto estas opciones. Importante: Desde Google Web Designer No hacer las piezas como AMP en ningún caso, siempre crear un anuncio como banner y sin Tap area.- Es necesario hacer un pequeño fix en las piezas realizadas con GWD
- Aquí un tutorial paso a paso para utilizar Google Web Designer:
- - Crea un nuevo archivo genérico con el tamaño deseado (Not Google Ad).
- - Construye tu animación y cuando la tengas lista publica.
- - Una vez que tu creatividad ha sido transformada a HTML5 tendrás que agregar nuestro codigo para implementar el click y el llamado a la API.
- Plantilla | Demo
Independientemente de la opción que estes usando para crear tus piezas convencionales HTML5, para todos los casos se debe de incluir el click de redirección y la llamada a nuestra API (Application Programming Interface). Justo después de la apertura del tag head en el html generado por estas opciones (Google Web Designer, Tumltu Hype) debes agregar las siguientes lineas:
Puedes copiar el código de aquí Fix para Google Web Designer y Tumult Hype (consultar)
Importante:
- - Recuerda cambiar las dimensiones del script de acuerdo con la pieza que estas produciendo (SCRWIDTH y SCRHEIGHT).
- - Las rutas a las librerías que utilices han de ir sin el protocolo definido.
- - De igual manera que como se trabajaba con flash necesitas crear una imagen de sustitución.
- - Las plantillas y opciones de implementación aquí descritas solo son validas para piezas comunes HTML5, si por el contrario necesitan desarrollar piezas más complejas como formatos expandibles, pushdown o piezas con vídeo, en estos casos por favor contactarnos directamente para proporcionar las plantillas correspondientes a support-es@weborama.com
Adobe Edge
Este producto ya no se comercializa por Adobe y en breve se dejará de dar soporte. Recomendamos que sin dilación se migre a AnimateCC o a trabajar en ScratchCon Adobe Edge Animate puedes realizar todo tipo de formatos: Desde piezas Standard, a piezas con vídeo, expandibles, e incluso piezas Responsive.Descargar plantillas para todos los formatos Standard en Adobe Edge Animate
Pautas para trabajar con Adobe Edge
- - Si se trata de piezas RichMedia (con vídeo, expandibles, etc), solicita a nuestra dirección genérica de Support las plantillas necesarias. Te las enviaremos asap junto con un acceso a nuestra plataforma para que subas las piezas.
- - Si se trata de piezas standard: Lo primero, ten en cuenta si las piezas se van a servir en AdExchanges (GDN, AppNexus, MediaMath, etc.), en ese caso tendrás que cumplir con estas especificaciones, son muy estrictas.
- - Lo más recomendable es que utilices nuestras plantillas para Standard. Incluso si se trata de piezas que tienes que adaptar (por ejemplo de una campaña internacional), es muchísimo más fácil y hay menos incidencias si abres una de nuestras plantillas y sobre ella pegas tu contenido (en el símbolo Content).
- - Bajo ningún concepto elimines las Acciones que hay en la pieza, ni el Stage, ni el componente Click. Eso serían errores fatales. Tu animación debe estar dentro del símbolo “Content”
- - Recuerda que puedes poner el .gif directamente en la biblioteca > imágenes
- - Importante: Todas las llamadas deben ser seguras, si no, no serán válidas
Opcion 1: Publicar para web: Vamos a publicar así:
- - Primero: Vete a tu carpeta de proyecto y en la carpeta Publish, cárgate todo lo que tengas. TODO
- - Segundo: Según abres el .an vete a “Configuración de Publicación”, pincha en “Web” y borra todos los valores donde se asigna un nombre de carpeta
- - Tercero: Ahora dentro de la carpeta Publish tendrás los archivos, tienes que editar el html, en este caso si por ejemplo es un 980×90, abre “980×90.html” y con un editor, cambia las dimensiones a las correctas de cada pieza, y sobre todo LO MÁS IMPORTANTE: Cambiar la llamada a la librería de Animate a modo seguro ya que Adobe por defecto apunta a un http (algo inadmisible), cambiar por favor a esta: //media.adrcdn.com/scripts/external/edge/edge.6.0.0.min.js
- - Cuarto: Dentro de la carpeta > Publish > Web , te quedará así: (la carpeta images está vacía no te preocupes)
- - Quinto: Haz un .zip para cada pieza (de la carpeta publish), y después envíanos todos los materiales para QA
Opcion 2: Publicar .oam
- - Primero: Una vez que tengas la pieza realizada, publica de la siguiente forma:
- - Segundo: Vas a nuestra plataforma, Previewerb y subes directamente el .oam para cada pieza. Sigue atentamente nuestro tutorial y recuerda que puedes comprobar tú mismo el peso máximo. Cuando creas que está OK notifica QA
- - Un par de cosas que pueden ayudar en la producción de piezas
- - Tenemos en nuestro CDN todas estas librerías, (no cuentan como peso si hacéis llamada desde el html, ver http://creative-weborama.com/help/#computo)
- - Aquí puedes ver las librerías alojadas en nuestro CDN: http://developer.weborama.nl/tools-downloads/ En concreto se suelen usar estas dos:
- Edge Animate6.0.0 -> //media.adrcdn.com/scripts/external/edge/edge.6.0.0.min.js
- jQuery2.0.3 -> //code.jquery.com/jquery-2.2.3.min.js - - Importante: Todas las llamadas deben ser seguras, si no, las piezas no serán válidas.
- - Más sobre Adobe Edge Animate
Otros
Google Swiffy
Desde septiembre de 2016 Google ha dejado de dar soporte a este producto. Recomendamos migrar a html5 vía Animate CC o Google Web Designer
Tumult Hype
Si utilizas TumultHype, tendrás que hacer el mismo fix que para Google Web Designer.
Volver al Inicio