Las creatividades HTML5 son anuncios creados con JavaScript, HTML y CSS que se publican en páginas web o aplicaciones móviles. Pueden ser tanto de display como de rich media.
- Display: anuncios de imagen en los que se puede hacer clic para ir al sitio web de un anunciante
- Rich media: anuncios con elementos interactivos, como animaciones, galerías de imágenes, juegos o vídeos insertados
Display & Video 360 admite la subida directa de banners de display y de rich media. Sin embargo, si quiere utilizar creatividades con funciones de rich media avanzadas, incluidos los formatos intersticiales o expandibles, puede usar Studio. Las creatividades de Studio se pueden traficar a través de Campaign Manager 360 y sincronizarse con su cuenta de Display & Video 360.
Las creatividades HTML5 se pueden asignar a líneas de pedido de display.
Tipos de creatividades HTML5 admitidos
Display & Video 360 admite los formatos de creatividades HTML5 que se indican a continuación. Para ver ejemplos de cada tipo de creatividad, visite la Galería de Rich Media.
Display
Creatividad HTML5 con uno o más tamaños fijos y una posición fija en una página web o una aplicación móvil.
Funciones de visualización admitidas:
- Etiquetas de clic: son código que se utiliza para medir clics que abren la página de destino del anunciante.
- Creatividades adaptables: puede empaquetar varios tamaños del mismo banner de display como una creatividad adaptable para simplificar la asignación de creatividades.
Rich media
Rich media es un término que se usa en el mundo de la publicidad digital para describir los anuncios con funciones avanzadas, como vídeo, audio u otros elementos atractivos. Los anuncios rich media admiten más métricas para registrar las interacciones multimedia, lo que le proporciona una idea más clara de cómo interactúan los usuarios con su anuncio. Por ejemplo, los anuncios de rich media pueden incluir contadores y temporizadores que indiquen cuántas veces o durante cuánto tiempo han jugado los usuarios a un juego de su anuncio.
Funciones y formatos de rich media admitidos:
- Métricas de rich media: puede contar clics, salidas, interacciones, tiempo de reproducción de vídeos y mucho más con métricas de rich media.
- Vídeo en banner: anuncios que incluyen reproductores de vídeo. Los vídeos se pueden incluir en cualquier formato de rich media excepto en las creatividades basadas en datos.
- Expandibles a pantalla completa: anuncios que pueden expandirse para ocupar toda la pantalla de un dispositivo móvil. Por ejemplo, creatividades de Espiral en 3D.
- Creatividades basadas en datos: las creatividades basadas en datos pueden personalizar su mensaje para distintos segmentos de clientes.
- Creatividades de paralaje: el paralaje es un efecto de animación que puede usar en creatividades de rich media para crear una sensación de profundidad con varias capas de imágenes. A medida que el usuario desplaza la página hacia arriba o hacia abajo en un dispositivo móvil, las imágenes de fondo y de primer plano se mueven a velocidades distintas.
Diseñar creatividades HTML5
Crear un banner de display HTML5
Google Web Designer
Editor de HTML5
Si prefiere escribir su propio código, puede crear un banner con cualquier editor de HTML5.
(avanzado) Crear un banner HTML5 desde cero
- Cree un archivo HTML válido, incluidas las etiquetas
<html>,<head>,<title>y<body>. - Añada una etiqueta
<meta>para indicar el tamaño deseado de la creatividad:
<meta name="ad.size" content="width=[x],height=[y]"> - Añada una etiqueta de clic:
-
Añada esta etiqueta de secuencia de comandos y reemplace "
https://www.google.com" por la página de destino de su anunciante:<script type="text/javascript">
var clickTag = "https://www.google.com";
</script> - Envuelva la etiqueta
<div>de la imagen principal o del contenedor de anuncios con una etiqueta<a>en la que se pueda hacer clic:<a href="javascript:window.open(window.clickTag)">
<div id="container">
<img src="image.png" />
</div>
</a>
-
Crear un banner de rich media
Enabler de Studio es obligatorio en los banners de rich media. Úselo para:
- Cargar vídeos e imágenes de forma segura con
Enabler.getUrl(). - Abrir la página de destino del anunciante con
Enabler.exit(). Utilice salidas en lugar de etiquetas de clic en los banners de rich media.
Para evitar retrasos provocados por el rechazo de las creatividades, siga las directrices de rich media cuando las cree.
Elementos que se deben incluir en un archivo .zip HTML5
Los archivos .zip HTML5 pueden incluir hasta 100 archivos y no tienen límite de tamaño. Pero para cumplir los requisitos del editor, intente mantener el archivo .zip lo más pequeño posible.
Asignar un nombre al archivo .zip
El nombre del archivo .zip HTML5 no debe superar los 50 caracteres (incluida la extensión ".zip"). Si el nombre del archivo es más largo, no podrá subirlo.
Tipos de archivos compatibles
- HTML o texto: HTML, HTM, CSS y JS
- Imágenes: JPG, JPEG, GIF, PNG y SVG
- Fuentes: DFONT, EOT, OTF, TTE, TTF, WOFF y WOFF2
Elementos que se deben incluir en los archivos .zip HTML5
- Archivo HTML: el recurso principal de la creatividad HTML5 es el archivo HTML. El archivo debe incluir al menos una etiqueta de clic o una salida y poder cargarse en un iframe. Display & Video 360 sirve el iframe junto con sus recursos.
- Otros archivos: imágenes, CSS y archivos JavaScript utilizados en el archivo HTML. Las creatividades de rich media también admiten los siguientes tipos de archivo, pero, en estos casos, los vídeos deben estar alojados en un servidor externo o la creatividad se debe generar en Studio:
.avi, .mov, .mp4, .m4v, .mpeg, .mpg, .oga, .ogg, .ogv, .webm, .wmv
Elementos que no se deben incluir en los archivos .zip HTML5
- Más archivos .zip: no añada más archivos .zip a su archivo .zip HTML5.
- Archivos sin usar: solo se deben añadir archivos que se utilicen en el archivo HTML. No añada archivos de origen ni de autorización.
- Almacenamiento local o de sesión: Display & Video 360 no admite recursos HTML5 que usen almacenamiento local o de sesión.
- Imagen de backup: no incluya imágenes de backup en el archivo .zip HTML5. Suba las imágenes de backup por separado en la sección "Imágenes de backup".
- Archivos con nombres largos: los nombres de los archivos de vídeo y audio deben tener 50 caracteres como máximo. Otros nombres de archivos deben tener como máximo 200 caracteres de un solo byte. Por ejemplo, el japonés, el chino y el coreano utilizan caracteres de dos bytes. En estos idiomas, el límite es de 25 y 100 caracteres.
(Opcional) Imágenes de backup
Las imágenes de backup son opcionales y solo se publican cuando los recursos de las creatividades no se admiten en el navegador o la plataforma del usuario. Por ejemplo, cuando alguien navega con Internet Explorer 8, y su creatividad utiliza animaciones CSS.
Suba las imágenes de backup de forma independiente del archivo .zip de la creatividad. Si no sube una imagen de backup, se publicará una imagen en blanco generada por el sistema.
Subir creatividades HTML5
Antes de empezar, asegúrese de haber empaquetado los elementos de creatividad en un archivo .zip. Consulte qué elementos se deben incluir en los archivos zip HTML5
-
Abra un anunciante y, en el menú de la izquierda, haga clic en Creatividades.
-
Haga clic en Nuevo, después en Subir y, después, en HTML5 o imagen.
-
Asigne un nombre a la creatividad en Display & Video 360.
-
Para añadir archivos de la creatividad, arrastre un archivo .zip de su ordenador y suéltelo sobre "Suelte el archivo aquí". También puede hacer clic en Subir y seleccionar un archivo .zip.
Si se rechaza la subida de archivos HTML5, siga estos pasos para solucionar problemas. -
Seleccione una o varias dimensiones de publicación para su creatividad. Display & Video 360 admite creatividades de un solo tamaño o creatividades HTML5 adaptables con más de un tamaño.
-
En la sección Eventos, revise y edite las salidas que se han detectado en la creatividad. Puede editar la URL de página de destino de cada salida o etiqueta de clic que empiece por
http://ohttps://. Para editar la URL o la etiqueta de informes, coloque el cursor sobre la fila correspondiente y, a continuación, haga clic en Editar.
Nota: Después de guardar la creatividad, es posible que la página de destino que haya actualizado tarde unos minutos en mostrarse en la vista previa o en el anunciante de Campaign Manager 360 que haya sincronizado. -
Guarde la creatividad.
Display & Video 360 revisa sus creatividades de forma manual y automática para comprobar que funcionan. También se comprueban las creatividades para asegurarse de que cumplen las políticas de anuncios de Google y las políticas de los exchanges en los que se pueden publicar. Puede comprobar el estado de sus creatividades en la pestaña Estado de la creatividad.
Configuración avanzada
Los siguientes ajustes son opcionales.
-
Si el anuncio intersticial no se ajusta a la pantalla del dispositivo móvil, Display & Video 360 lo adaptará para que encaje. Para evitar que esto ocurra, active la opción "No adaptar a la anchura del dispositivo".
-
Añada una imagen de backup y una etiqueta de informes de backup. Si va a subir una creatividad adaptable, puede subir una imagen de backup por cada tamaño.
-
Suba una imagen de carga progresiva. Esta se mostrará cuando se produzcan retrasos en la subida de los archivos de la creatividad principal o cuando la conexión de red sea más lenta.
- Si su anunciante de Display & Video 360 está vinculado con una cuenta de Campaign Manager 360, añada un anuncio de seguimiento para ver los informes en el anunciante de Campaign Manager 360 vinculado. Nota: Esta opción solo está disponible para creatividades rich media, creatividades de Espiral y creatividades personalizadas basadas en datos.
- Haga clic en Propiedades de publicación.
- Busque un anuncio de seguimiento de Campaign Manager 360. Debe crear los anuncios de seguimiento en Campaign Manager 360 antes de generar la creatividad en Display & Video 360; de otro modo, los anuncios de este tipo no tendrán tiempo de sincronizarse.
Consejo: Para que sea más fácil encontrar el anuncio de seguimiento adecuado, asigne solo un anuncio de seguimiento por anuncio y emplazamiento en Campaign Manager 360.
-
Haga clic en Información adicional para añadir una etiqueta de seguimiento, un código de integración o notas.
Compartir una vista previa
Puede compartir creatividades HTML5 con otros usuarios mediante un enlace de vista previa para que las revisen o las aprueben. Las personas con las que comparta el enlace podrán verla sin necesidad de iniciar sesión.
Preguntas frecuentes
¿Por qué el tamaño que aparece tras subir el archivo de una creatividad no es correcto?Estos son algunos de los problemas habituales que pueden impedir la subida de un recurso de creatividad:
- El nombre del archivo es demasiado largo: la longitud máxima permitida para la mayoría de los tipos de archivo es de 200 caracteres de un solo byte o 100 caracteres de dos bytes. En el caso de los archivos de audio y vídeo, la longitud máxima es de 50 caracteres de un solo byte o de 25 caracteres de dos bytes.
- Hay un ZIP dentro de otro ZIP: no se pueden incluir archivos ZIP comprimidos dentro de otro archivo ZIP.
- La creatividad no tiene URL de destino: todas las creatividades deben incluir al menos una salida que dirija a una página de destino del anunciante.
- La creatividad de Google Web Designer debe actualizarse: si la creatividad se ha generado en Google Web Designer, puede aparecer el error "Los metadatos del HTML de Google Web Designer no son válidos". Esto quiere decir que la creatividad se ha generado con una versión obsoleta de la aplicación web y debe actualizarse. Actualice Google Web Designer a la versión más reciente y, a continuación, abra la creatividad y vuelva a publicarla.
Si necesita más ayuda, consulte el artículo Solucionar problemas con la subida de creatividades.
