especificaciones técnicas de spotify - … · formato audio ¿qué son los audios? • • •...
TRANSCRIPT
Especificaciones Técnicas de Spotify
Contenido
Contacto
CONFINDENCIALLa información proporcionada en este documento es estrictamente confidencial y es propiedad de Spotify Limited. Se presenta confidencialidad y, salvo para fines de evaluación del lector, no puede ser divulgada, duplicada o revelada en su totalidad o en parte sin el consentimiento previo de Spotify Limited.© Spotify Ltd, 2011
Listado de Anuncios de Spotify Anuncios de AudioGran impacto, formato compuesto por la cuña de audio, el cover art y el scrolling text clicable.
Anuncios DisplayMegabanner y skyscraper ads en el player de Spotify, servidos cuando el usuario interactúa con Spotify.
BillboardsUn formato con gran notoriedad; actúa como un salvapantallas después de varios minutos de inactividad del usuario. Cuando éste vuelve a interactuar, el billboard para durante 2 segundos y deja paso a un display.
MPUFormato estándar para la home de Spotify: la página de inicio por defecto para todos los usuarios cuando se registra en Spotify.
Homepage TakeoversGran impacto, ineludible; permite un efectivo rediseño y patrocionando la home de Spotify. Es lo primero que ve el usuario cuando se conecta a Spotify.
Branded PlaylistsListas de reproducción personalizadas generadas por el usuario con el logotipo de la marca, texto customizado y enlace opcional a la campaña.
Add-ons y Formatos Premium LightboxEs una ventana que se abre al clicar en cualquier formato de Spotify, con contenido alojado como videos, concursos, live streaming o demos de juegos.
Advertiser PageEs un microsite servido por el anunciante, perfectamente integrado en el player de Spotify. El advertiser page puede contener prácticamente cualquier contenido que te muestra en una página web, incluyendo vídeos, imágenes clicables, enlaces, noticias, links, comentarios y mucho más.
Apéndices Anexo a las Especificaciones Técnicas
Glosario de términos
2 /16
3
4
6
8
9
11
12
14
16
16
Formato Audio¿Qué son los Audios?•
•
•
Materiales a enviar•
•
•
•
•
Especificaciones técnicas
Recomendaciones•
•
Archivo de audio•
•
•
Imagen (Hosteada por Spotify)
•
•
•
Scrolling Text •
URL a la que linkar •
El nombre del anuncio y del anunciante •
3/16
El formato de audio reproduce las cuñas entre canciones
Spotify muestra una imagen en el área de la carátula para que los usuarios hagan clic en ella
El texto giratorio es una llamada a la acción adicional.
Un archivo de audio de hasta 30 segundos.
Un archivo de imagen
El texto giratorio
Una url de la web a la que redirija
El nombre del anuncio y del anunciante
Incluir una llamada a la acción en la primera mitad del audio: esto puede incrementar el CTR más de un 1%
Respecto a la cantidad de palabras en el texto giratorio se debe considerar la duración del audio: ¡hay que asegurarse de que al usuario le va a dar tiempo a leerlo! Alrededor de 60 caracteres es lo más apropiado, así el texto se queda estático y no se hace giratorio.
Hasta 30 segundos de duración
WAV (calidad estándar de CD, 16-bit 44.1kHz) or
MP3 (por lo menos 192 kbps)
300 x 300 pixels (JPG or GIF)
GIF puede ser estático o aniado
100 KB peso máximo
Una línea de texto para que el usuario pueda clicar
Cualquier URL
El nombre del anuncio y del anunciante para que aparezcan como parte clickable encima de la imagen.
Notas•
•
•
La imagen, el nombre encima del cover, y el texto giratorio utilizan la misma url.
Aceptamos tracking de terceros, como click command y pixel 1x1.
El texto giratorio crea una llamada a la acción y proporciona más información acerca de lo que se está anunciando.
“Cover Art” clicable
Nombre de la campaña clickable
Texto clicable
DisplayQué son los Anuncios Display?•
•
•
•
•
Especificaciones Técnicas Recomendaciones
•
•
Materiales a enviar•
•
Código Web (Alojado por Spotify)•
•
•
Archivo de imagen (Alojado por Spotify)
•
•
•
•
URL para que linkar la imagen a la web•
4/16
Son imágenes que aparecen durante 30 segundos para que los usuarios hagan clic
No aparecen dos displays al mismo tiempo.
Hay dos tipos de displays: Banners and Skyscrapers
Banners aparecen en la parte de abajo de la aplicación
Skyscrapers aparecen en la parte derecha de la aplicación
Display ads are shown for 30 seconds, so consider this duration when creating an animated GIF.
If you opt for the web snippet, please check the snippet in a web browser before sending it to us. Check that it loads and displays correctly, and check that it will fit the banner or skyscraper dimensions.
Un archivo de imagen o una etiqueta html
La dirección de una web a la que clicar (si se utiliza un archivo de imagen)
Banner: 728 x 90 pixels
Skyscraper: 120 x 600 pixels or 160 x 600 pixels
HTML, JavaScript, iframes
Banner: 728 x 90 (JPG or GIF)
kyscraper: 120 x 600 pixels or 160 x 600 pixels (JPG or GIF)
GIF estático o animado
100 KB peso máximo
Cualquier URL
Notas•
•
•
Para los archivos de imagen, aceptamos trackind de terceros, como pixel 1x1 y click command.
La etiqueta es un de un Adserver de un Tercero. El HTML es subido en nuestro servidor y hace la llamada a la creatividad.
Para las etiquetas, asegurarse de incluir una URL a la que linkar dentro del HTML. El link debe tener un target explícito para asegurar que se abre una nueva ventana del navegador y no dentro del área del banner. Es así tanto par alas URL’s como para las URI’s de Spotify. Por ejemplo:!"#$%&'()*++,-../012345+2678/)#9"%:&9();3<=>?)@666!."@
!"#$%&'()4,8+5A0-=B+54+-CD&E><F/*=C4GHI1'J'KLM)#9"%:&9();3<=>?)@%830>!."@
!"#$%&'()4,8+5A0-N42B-=AB8>+-,<=0<54+-I"I$O<O8*O:F$P2PNQRS:')#9"%:&9();3<=>?)@T<=0<54+!."@
Más ejemplos en la siguiente página
Skyscraper Clicable
Display Más ejemplos
5 /16
Megabanner
Skyscraper
Megabanner Clicable
Skyscraper Clicable
BillboardsQué son los Bill-board?•
•
Especificaciones Técnicas
Recomendaciones•
•
•
Materiales a enviar•
•
•
Archivo de imagen (Alojado por Spotify)
•
•
•
•
•
URL para que linke el banner•
6/16
Los Billboards son como “screen savers”, que aparecen después de 5 minutos de inactividad del usuario.
Cuando el usuario regresa, el billboard se mantiene durante 2 segundos y después se minimiza en el banner o en el sky para que éste pueda clicar (el billboard no es clickable).
El billboard se minimiza en un display, se deben seguir el diseño en ambas piezas.
Para incrementar el CTR (ratio de clics) hay que asegurarse de incluir una llamada a la acción en el billboard así como en el banner/skyscraper.
El banner o skyscraper se muestra durante 30 segundos, por lo que hay que considerar la duración cuando se cree el GIF animado.
Un archivo de imagen para el billboard
Un banner o un sky
Una URL que redirija a la landing page
Billboard: 800 x 435 pixels (JPG o GIF)
Banner: 728 x 90 pixels (JPG o GIF)
Skyscraper: 120 x 600 pixels o 160 x 600 pixels (JPG o GIF)
GIF estático o animado
100 KB peso máximo de cada pieza
Cualquier URL
Notas•
•
•
El billboard no contiene un link: éste va asociado al banner o al sky.
El billboard se muestra en la pantalla del usuario después de que haya estado inactivo durante más de cinco minutos.
Cuando el usuario vuelve a interactuar con el player de Spotify, el billboard se mantiene durante 2 segundos antes de minimizarse en el banner o en el sky. Si el usuario clica en el billboard durante esos 2 segundos, se minimiza automáticamente.
. Más ejemplos en la siguiente página
Billboard
BillboardsMás ejemplos
7/16
Billboard
Skyscraper
Billboard se minimiza en un Skyscraper
MPU
Qué es un MPU?•
•
Especificaciones técnicas
Recomendaciones•
Materiales a enviar•
•
Archivo de imagen (Alojado por Spotify)
•
•
Código Web (Alojado por Spotify)
•
•
URL para linkar la creatividad•
8/16
MPU (Message Plus Unit) se muestra en la home de Spotify
MPU contiene un link para que el usuario clique
Si se opta por el código web, se debe probar en un navegador antes de enviárnoslo a nosotros. Comprobar que se carga y se muestra correctamente, y verifica que se ajuste a las dimensiones del anuncio MPU.
Un archivo de imagen o una etiqueta
Una dirección a la que linkar (si se utiliza el archivo de imagen)
300 x 250 pixels (JPG GIF estático)
100 KB peso máximo
300 x 250 pixels
HTML, JavaScript, iframes
cualquier URL
Notas•
•
•
•
Para los MPU’s, aceptamos tracking de terceros, por ejemplo pixel 1x1 y click command.
El GIF tiene que ser estático, nunca animado.
Los códigos web son de un Adserver de un Tercero. El HTML es cargado en nuestro servidor y hace la llamado a los anuncios.
Para los códigos web, asegurarse de incluir una URL a la que linkar dentro del HTML. El link debe tener un target explícito para asegurar que se abre una nueva ventana del navegador y no dentro del área del banner. Es así tanto par alas URL’s como para las URI’s de Spotify. Por ejemplo:!"#$%&'()*++,-../012345+2678/)#!"#$%!&'()*+,-'@666!."@
!"#$%&'()4,8+5A0-=B+54+-CD&E><F/*=C4GHI1'J'KLM)#!"#$%!&'()*+,-'@%830>!."@
!"#$%&'()4,8+5A0-N42B-=AB8>+-,<=0<54+-I"I$O<O8*O:F$P2PNQRS:')#!"#$%!&'()*+,-'@T<=0<54+!."@
MPU clicable
Homepage TakeoversQué son Homepage Takeovers?•
•
•
Especificaciones técnicas
Recomendaciones•
•
•
•
Materiales a enviar•
•
•
•
Imagen de fondo (“skin”)•
•
•
•
•
•
MPU Archivo de Imagen (Hosteado por Spotify)
•
•
MPU Etiqueta (Hosteado por Spotify)
•
•
URLs para linkar •
9 /16
Una combinación de una imagen de fondo a pantalla complete (skin) y un MPU opcional en la home de Spotify.
Mientras está el Homepage ningún otro anuncio aparecerá.
Lo usuarios pueden clicar en ambos sitios, en el fondo y en el MPU.
Hay que asegurarse de que la imagen de fondo no dificulte la lectura de los Nuevos Lanzamientos. El texto en nuestra homepage es blanco y gris claro, por lo tanto los fondos oscuros funcionan mayor. Si se utilizan colores claros, se debe incluir una caja con sombreado detrás de los Nuevos Lanzamientos en la home. Ver la plantilla como guía.
Hay que asegurar de que se especifica el color de fondo para la imagen de fondo. Este rellenará las áreas de la derecha y abajo de la imagen de fondo para los usuarios que tenga ventanas grandes.
Se debe intentar hacer que los bordes de la imagen de fondo se integren con el color de fondo.
Consultar las Recomendaciones de la sección MPU para guías adicionales.
Una imagen para el fondo
Un archivo de imagen para el MPU o una etiqueta.
Una url para clicar en el fondo.
Una url para clicar en el MPU (si fuse diferente)
Tamaño máximo: 1050 x 900 pixels (~80% de los usuarios están inlcuídos en este tamaño)
Espacio garantizado: 965 x 650 pixels (~60% de los usuarios están inlcuídos en este tamaño)
PNG (8, 24 or 32 bit) o JPG (progresivo o estándar)
1 MB peso máximo
Especificar el color de fondo RGB de 6 dígitos.
Se puede descargar la plantilla de:http://hunch.se/tmp/spotify-home-takeover-guide.zip
300 x 250 pixels (JPG o GIF)
100 KB peso máximo
300 x 250 pixels
HTML, JavaScript, iframes
Cualquier URL (una para el fondo y otra para el MPU, en el caso de que sean diferentes)
Más ejemplos en la siguiente página
Notas (Ver página siguiente)
Imagen de fondo clicable
MPU clicable (opcional)
Homepage TakeoversOtro ejemplo
10/16
Notas•
•
•
•
•
•
•
•
•
Mientras el homepage takeover se está mostrando, ningún otro anuncio display aparecerá. Sin embargo sí pueden aparecer audio.
Se puede hacer un homepage sin MPU si así se quiere.
La imagen de fondo y el MPU aparecen simultáneamente.
La imagen de fondo está alineada en la esquina superior izquierda de la homepage.
Si la imagen de fondo es menor que 965 x 650, puede estar cortada o recortada para adaptarla homepage.
Cuando la vista de la home del usuario es menor que 965 x 650 pixels, las barras de scroll estarán activas para que el usuario pueda ver toda la imagen.
Tanto el fondo como el MPU son clicables y medibles. Pueden clicar a la misma web o a dos diferentes.
La imagen de fondo y el MPU utilizan el mismo pixel 1x1. En otras palabras, 1 impresión = 1 imagen de fondo + 1 MPU. Pueden ser trackeados por separado, si la agencia proporciona un MPU servido por un tercero y un pixel 1x1 para el fondo.
Para información adicional, consultar la sección Notas para los MPU’s.
Homepage Takeover
Branded PlaylistsQué son las Branded Playlists?•
•
•
•
Especificaciones técnicas
Recomendaciones•
•
•
•
Materiales a enviar•
•
•
•
Archivo de imagen (Alojado por Spotify)
•
•
URL para el texto de la Playlist (opcional)
•
•
URL de la Playlist•
Texto de la Playlist •
11/16
Las Branded Playlists son listas de reproducción en Spotify, que contienen la imagen de un marca y la posibilidad de incluir un texto.
Las Branded Playlist son también clicables.
Todas las Branded Playlist deben ser generadas por un usuario (debido a las restricciones de las discográficas) y deben tener un mínimo de 40 canciones
Sólo puede haber una canción por artista en cada playlist
Lo ideal es crear una cuenta genérica de Spotify para la marca, no utilizar una cuenta personal.
Es recomendable que el título de la lista no exceda de 40 caracteres.
El texto de la playlist puede ser tan largo como se quiera, pero es aconsejable no sobrepasar los 200 caracteres, pra que los usuarios puedan leerlo al completo sin tener que ampliar la ventana.
El texto de la playlist no puede contener caracteres especiales como: © ® ¶ § $ £ ÷
Un archivo de imagen para la playlist
Un texto descriptivo para la playlist
URL que redirija a la página escogida por el anunciante
URL opcional para el texto de la Playlist
128 x 128 pixels (JPG o PNG)
100 KB tamaño máximo
Identificar area del texto clicable
URL
Link HTTP Link o URL para la playlist
Texto explicativo de la playlist (no permite caracteres especiales)
Notas• Las listas patrocinadas permanecerán en Spotify a no ser que se solicite retirarlas. Entonces Spotify eliminará
los elementos patrocinados.
Imagen de la Playlist
Texto de la Playlist
Link clicable (opcional)
LightboxQué es un Lightbox?•
•
•
Especificaciones técnicas
Recomendaciones•
•
•
•
•
Materiales a enviar•
•
•
Imagen de fondo del Lightbox (si requerida)•
•
Archivo de Imagen o Etiquetas para el formato que lanza el Lightbox•
12/16
EL lightbox es una ventana que se abre sobre la aplicación Spotify.
Este formato se sirve bajo demanda, al hacer clic sobre otro formato como el Audio o Display.
El Lightbox puede contener desde una galleria de imágenes a videos en Flash, juegos interactivos y retransmisiones en directo.
Animar al usuario a hacer clic sobre el formato que abre el Lightbox. Si el contenido del Lightbox es también clicable, informar a los usuarios de esta posibilidad.
El reproductor de video dene contener opciones de play/pausa y control de volumen. La posibilidad de rebobinar es también útil para que los usuarios puedan volver a ver el video.
Asegurar que el contenido del Lightbox está emplazado en la parte superior izquierda de la web, sin márgenes. Ver ejemplo:http://customds.serving-sys.com/hosting/spotify/Spotify_HTTM.html
SI el contenido del LIghtbox es clickable, incluir un target para que el link se abra en una nueva ventana y no dentro del Lightbox. Por ejemplo: !"#$%&'()*++,-..4,8+5A0678/)#9"%:&9();3<=>?)@666!."@
Si se utiliza una etiqueta para lanzar el Lightbox, asegurar la inclusion de la URL del Lightbox dentro del HTML. Por ejemplo: !"#$%&'()*++,-../012345+2678/.7=/,=5U>4./0<5U*+38V6*+/<)@666!."@
Archivos de imagen para el formato que lleve al Lightbox (Audio / Display).
Archivo de imagen para el fondo del Lightbox (opcional)
Dirección web para el contenido del Lightbox (Spotify no aloja este contenido)
Maximum 1200 x 700 px (JPG o PNG)
Proveer detalles para el color de fondo ( valores RGB)
Ver especificaciones técnicas del formato seleccionado para lanzar el Lightbox
Notas•
•
•
•
El Lightbox es un formato bajo demanda: se lanza cuando el usuario hace clic sobre otro formato Audio, Display o Homepage.
La imagen de fondo no es clicable.
Spotify no aloja el LIghtbox, sólo embebe el contenido del link dado.
La mayoría de los Lightbox contiene un video Flash. La duración del video no tiene límite.
Más ejemplos en la siguiente página
Contenido del Lightbox •
•
URL para el Lightbox•
650 x 300 pixels
HTML (Normalmente un video de Flash)
URL para el contenido del LIghtbox (Spotify no aloja el contenido)
1. usuario hace clic en el cover mientras suena el audio 2. Se abre el Lightbox y se inicia el video
1
2
LightboxMás ejemplos
13 /16
Skinned Lightbox
Lightbox
Emplazamiento del Lightbox en el servidor
Arriba a la izquierda, sin relleno, sin márgenes
Advertiser PageQué es un Advertiser Page?•
•
•
•
Especificaciones técnicas
Recomendaciones•
•
•
•
•
•
•
•
Materiales a enviar••
Un archivo de imágen o una etiqueta del formato publicitario que linke a Advertiser Page•
14/16
Advertiser page es un microsite publicitario integrado en la aplicación de Spotify Los usuarios llegan a Advertiser Page haciendo click en cualquier formato publicitario dentro de SpotifyAdvertiser Page puede incluir cualquier tipo de contenido de una página web, inlcuyendo videos, imágenes clicables, blog, noticias, Mientras el usuario está viendo el Advertiser Page no aparece ningún otro formato (excepto cuñas)
Cuando se linka al Advertiser Page desde un formato publicitario sobre el que los usuarios hacen click, es importante asegurarse de que estos formatos linken a una URL dentro de Spotify, no del servidor en el que está alojado el Advertiser Page.IE tiende a desplazarse centrado elementos a la vista, así que tener esto en cuenta al diseñar el contenido.No suele haber problemas con Flash en la mayoría de las plataformas, pero algunos usuarios pueden no tener el Flash instalado o actualizado. Si quiere usar Flash, se recomienda usar la version 8 para tener la maxima cubertura.Cuando se abre el Advertiser Page, la música que estaba escuchando el usuario no se para automaticamente, por lo cuál los audios del Advertsier Page tienen que estar silenciados con la posibilidad de activar el sonido. Si su página incluye el link a una canción dentro de Spotify, se tiene que usar la URL de Spotify en lugar del link HTTP. Esto asegura de que el usuario se quede dentro de Spotify y no salga al browser.Si su Advertiser Page incluye un link a una web externa, es necesario asegurarse de que ese link se abra en una ventana nueva y no dentro del Advertiser Page. Por ejemplo:!"#$%&'()*++,-..4,8+5A0678/)#9"%:&9();3<=>?)@666!."@
Si su Advertiser Page incluye un link a una web externa, es necesario asegurarse de que ese link se abra en una ventana nueva y no dentro del Advertiser Page. Por ejemplo:sp_lightbox=[width]x[height] donde la anchura es 650 y la altura 300. Por ejemplo: !=#*B2A()W5X286*+/<Y4,;<5U*+38V(CZIV[II)@!5/U#4B7(),576\,U)#7<=44()+*N/3)#=<+())#.@!.=@##
Para servir este video dentro de su página, hay que usar el open-source JW Player. Mira: http://www.longtailvideo.com/players/jw-flv-player
Ver las Especificaciones Técnicas para el tipo del formato publicitario que se quiere linkar Advertiser Page
Layout del Advertiser Page ••
•
•
Contenido del Advertiser Page•
•
••
URL •
•
Tamaño recomendable 1050x 900pxEl tamaño tiene que ser adaptable para los diferentes tamaños de pantallasEl scrolling vertical está permitido, el horizontal no Se puede bajar la plantilla http://hunch.se/tmp/spotify-home-takeover-guide.zip
Tiene que ser compatible con IE6, IE7, IE8 y los buscadores como SafariNo puede incluir JavaScript popups o ventanasNo se pueden usar los iframesSi la página incluye videos, mira las Especificaciones Técnicas de Lightbox
URL del Advertiser Page (Spotify no lo aloja)No puede estar alojado con HTTPS Notas (ver página siguiente)
Advertiser Page
Los archivos de imagen y los formatos publicitarios que linken a Ad. Page La URL de Advertiser Page (El Advertiser Pase se aloja en un servidor externo contratado por el anunciante)
Advertiser PageOtro ejemplo
15/16
Notas•
•
•
Spotify no contabiliza las visitas, tampoco las veces que se busca el Advertiser Page dentro del player
Si su Advertiser Page incluye un link a una canción a Spotify, un click sobre este link sacará al usuario del Advertiser Page.
Su Advertiser Page no tiene que tener colores y tipografia de Spotify, pero el hecho de tenerlo garantiza experiencia de usuario más integrada.
Anexo a las Especificaciones Técnicas
document.locationSi utiliza X87N/2>+6<87=+58> para determinar si la página se ha cargado a través de HTTPS (por lo general con el fin de evitar las advertencias de navegador para las banderas), ya sea en el código el HTTP / HTTPS o utilizar:W=B#,B8+878<#(#]X87N/2>+6<87=+58>6,B8+878<#((#^*++,4-)_#`#^*++,4-)#-#^*++,-)a#
No usar W=B#,B8+878<#(#X87N/2>+6<87=+58>6,B8+878< sólo si la aplicación Spotify no tiene manera de interpretarlo.
16 /16
Dependiendo del formato que se está diseñando, consultar más abajo:
Glosario de términosPixel 1x1Una pequeña imagen invisible, llamada cada vez que un anuncio se muestra a un usuario. Se utiliza para contabilizar impresiones de anuncios.
GIF AnimadoArchivo Gráfico Graphic file que muestra multiples imágenes.
Call To ActionPalabras o cuñas que incitan a los usuarios al clic o respuesta directa. Por ejemplo, “Haga clic aquí” o “Visite Spotify.com Ahora!”
CTRPorcentaje de clics. Una forma de medir el éxito de una campaña de publicida. Por lo general se define como el número de usuarios que hacen clic en un anuncio por el número de impresiones.
FlashFormato de archivo web, por lo general utilizado para vídeo o juegos.
Flash DetectionUna manera de detectar si un usuario tiene un reproductor de Flash instalado en su sistema.
HTMLFormato de codificación para todas las páginas web.
iframeInline frame que coloca otro HTML en a frame.
ImpresionesEl número de veces que un anuncio le aparece a los usuarios.
JavaScriptCodificación de lenguaje utilizado en las páginas web para obtener funciones adicionales.
MicrositeUna página o páginas web que actúan como un suplemento del principal website.
sRGB IEC v2. color spaceEspacio de color RGB.
Tecnología de TercerosEs una tecnología que sirve los anuncios desde sitios web y permite a los anunciantes el seguimiento del rendimiento de los anuncios.
MPUMessage Plus Unit. Area en la home de Spotify que sirve creatividades animadas y clicables.
URIUniform Resource Identifier. En Spotify, a URI identifica una playlist, canción, usuario etc. Por ejemplo, spotify:album:0XghffvMNVk9loAADw1rlK
URLDirección Web, como http://wwww.spotify.com orhttp://open.spotify.com/album/0XghffvMNVk9loAADw1rlK
WebkitCódigo web abierto Open source web de un navegador.