Acerca de las creatividades que utilizan HTML5
Las creatividades HTML5 pueden ser de display o de rich media. A continuación, le ofrecemos más información sobre cada tipo.
Creatividades de display
Creatividades de display: son creatividades que no son de rich media y que pueden incluir recursos de imagen o HTML5. Las creatividades de display ofrecen lo siguiente:
- Registro de datos de etiquetas de clic sobre salidas individuales
- Carga progresiva
- Compatibilidad con recursos HTML5 adaptables
Creatividades de rich media
Las creatividades de rich media son creatividades HTML5 que pueden expandirse a un tamaño mayor o incluir vídeos en banner y elementos interactivos, como juegos. Las creatividades de rich media ofrecen lo siguiente:
- Registro de datos de varias salidas, contadores y temporizadores para tener datos sobre las interacciones
- Capacidad de expandirse a un tamaño más grande o a pantalla completa
- Compatibilidad con audio y vídeo en banner
- Carga progresiva
Preparar y subir recursos de creatividades de display HTML5
Para configurar una creatividad de display con HTML5, súbala a Campaign Manager 360 en un archivo .zip. En el archivo deben incluirse un archivo HTML y todos los archivos a los que se haga referencia en él.
-
Cree una carpeta.
-
Añada su archivo HTML junto con todos los recursos a los que se haga referencia en él. No incluya otros archivos. Puede organizar los recursos en subcarpetas, pero no las comprima.
Qué se debe incluir y qué no en el archivo .zipTipos de archivos compatibles y límites de los archivos .zipElementos que se deben incluir
-
Archivo HTML: el recurso principal de la creatividad de display HTML5 es el archivo HTML. Se trata del recurso central de la creatividad. Debe ser un documento HTML completo que incluya al menos una etiqueta de clic y pueda cargarse en un iframe. Campaign Manager 360 sirve el iframe junto con los demás recursos. Encontrará ayuda sobre las etiquetas de clic más abajo.
-
Otros archivos: incluya todos los demás archivos a los que se haga referencia en el HTML. No incluya archivos a los que no se haga referencia.
Elementos que no se deben incluir
-
Archivos .zip dentro de otros: no incluya ningún archivo .zip que esté en otro archivo .zip del recurso HTML5. Sin embargo, si tiene varios archivos .zip correspondientes a diferentes creatividades HTML5, sí puede comprimirlos juntos y subirlos en lote a Campaign Manager 360.
-
Archivos a los que no se hace referencia: como ya hemos indicado, solo deben incluirse archivos a los que se haga referencia en el HTML.
-
Almacenamiento local o de sesión: en Campaign Manager 360 no se admiten recursos HTML5 que usen almacenamiento local o de sesión.
-
Símbolos de porcentaje (%) en el nombre: no incluya símbolos de porcentaje en el nombre de ninguno de los archivos de recursos.
-
Recursos de backup
-
Opcional: El trafficker puede subir una imagen de backup independiente a Campaign Manager 360. Se utiliza una imagen de backup si Campaign Manager 360 no puede usar los recursos principales porque no se admiten. No incluya una imagen de backup en el archivo .zip HTML5.
-
Archivo .zip de HTML5 de muestra Ayuda con los archivos .adz-
Tipos de archivos compatibles: HTML, HTM, JS, CSS, JPG, JPEG, GIF, PNG, JSON, XML, SVG, EOT, OTF, TTF, WOFF y WOFF2
-
Número máximo de archivos por .zip: 100
-
Tamaño máximo: 10 MB
Campaign Manager 360 también acepta creatividades HTML5 comprimidas en formato .adz. Estos archivos se utilizan de la misma forma que los archivos .zip. Estos dos formatos no presentan diferencias teniendo en cuenta el uso que se les va a dar en este caso.
-
-
Comprima la carpeta en un archivo .zip. ¿Necesita ayuda para comprimir carpetas? Consulte los centros de ayuda de Windows o Apple.
-
A continuación, el trafficker puede subir ese archivo .zip a Campaign Manager 360.
Tiene más información sobre el traficado en los siguientes artículos:
Problemas con la subida
-
Este problema puede producirse porque el archivo no tiene el formato .zip ni .adz. Comprima el archivo HTML (y todos los archivos a los que se haga referencia en él) en un solo archivo .zip y vuelva a intentarlo.
-
Si cree que tiene un archivo .zip, compruebe su extensión para asegurarse: haga clic con el botón derecho en él y mire sus propiedades para confirmar que la extensión es
.zip. -
Si aun así no puede seleccionar el archivo, póngase en contacto con el servicio de asistencia.
Si tiene algún problema al subir un archivo, es posible que se deba a que no contiene recursos HTML5 válidos o a que incluye más de 100 archivos, que es el máximo permitido. También puede deberse a que su elemento HTML5 utilice APIs de JavaScript para el almacenamiento local o de sesiones. Para proteger la privacidad de los usuarios, en Campaign Manager 360 no se permiten estas APIs.
Para ayudar a proteger la privacidad de los usuarios, en Campaign Manager 360 no se aceptan recursos HTML5 que utilicen almacenamiento local o de sesión. Si se rechaza por este motivo un recurso que intenta subir, solicite a su desarrollador que retire las API prohibidas. A continuación, pruebe a subir el recurso de nuevo. En concreto, no puede subir recursos HTML5 con las siguientes API de JavaScript:
- indexedDB
- localStorage
- openDatabase
- sessionStorage
Si sus objetivos publicitarios dependen de estas API, pruebe a usar la configuración de Campaign Manager 360. Por ejemplo, algunos anunciantes usan estas API en la segmentación de anuncios y la limitación de frecuencia, pero no es necesario: puede usar Campaign Manager 360 para configurar muchos tipos de segmentación y definir límites de frecuencia. Póngase en contacto con el servicio de asistencia para que le ayuden a buscar una solución. Recuerde que, al margen de cómo configure el recurso, solo debe tratar de recoger datos que cumplan los requisitos de privacidad presentes en su contrato con Google Marketing Platform.
¿Qué es el almacenamiento local y el almacenamiento de sesión? Son dos tipos de almacenamiento web HTML5, formas de guardar datos en un navegador. El almacenamiento local mantiene un archivo de datos en el navegador durante distintas sesiones de navegación. Se conserva en el navegador de forma permanente, a menos que el usuario borre la memoria caché del navegador o elimine el archivo manualmente. El almacenamiento de sesión solo guarda datos en el navegador durante una sesión de navegación determinada. Cuando se cierra o reinicia el navegador, todos los datos almacenados en la sesión se borran.
¿Por qué este tipo de almacenamiento no se permite? Es posible que los archivos que se almacenan incluyan código diseñado para capturar información personal identificable (IPI), registrar la actividad del navegador entre sesiones o enviar otros datos a terceros que puedan infringir los términos del contrato de Google Marketing Platform. Es verdad que el almacenamiento local y el de sesión no solo se utilizan para recoger este tipo de datos, pero como en los archivos puede incluirse cualquier tipo de código, sí es uno de los posibles usos.
Directrices para desarrolladores
Recursos
Cómo definir el tamaño de una creatividad
Directrices de dimensionesA diferencia de las imágenes o los vídeos, los documentos HTML no tienen dimensiones propias. Por este motivo, se usa la etiqueta meta de tamaño para indicar el tamaño deseado de la creatividad. La metaetiqueta de tamaño es un parámetro opcional del documento .html. Es la mejor forma de asegurarse de que la creatividad se renderiza con las dimensiones correctas. Puede introducir las dimensiones como se indica a continuación:
meta name="ad.size" content="width=300,height=250">Etiquetas de clic
Las etiquetas de clics definen las páginas de destino de cada salida de las creatividades con recursos HTML5. Una salida es un área en la que se puede hacer clic y que dirige el navegador a una página de destino. Con una etiqueta de clic, se define la página de destino de una salida.
Cuando se hace clic en una salida, la creatividad llama a Campaign Manager 360 para que sirva la página de destino asociada a esa salida. Puede definir páginas de destino a nivel de creatividad o de anuncio, según sus necesidades.
Campaign Manager 360 detecta etiquetas de clic al subir elementos. Puede cambiar la página de destino que utiliza una etiqueta de clic en cualquier momento, incluso después de haber exportado sus etiquetas, puesto que este tipo de etiqueta es una variable estándar; es decir, es un marcador de posición de la página de destino, no un valor predefinido en el código.
Tenga en cuenta que, en las creatividades de display, el ajuste a nivel de anuncio prevalece sobre el de las creatividades. A continuación le ofrecemos algunas prácticas recomendadas para configurar etiquetas de clic:
- Asegúrese de que las creatividades utilicen una variable de etiqueta de clic como destino de clic.
- Una etiqueta de clic debe poder leerse fácilmente en el servidor de anuncios: no deben usarse minificaciones ni ofuscaciones. Sin embargo, estas técnicas pueden aplicarse en el resto del código y en otros archivos.
- No se recomienda que preprograme las URL de un recurso, ya que esto impide que Campaign Manager 360 haga un seguimiento de clics y que los traffickers puedan actualizarlas. Campaign Manager 360 le indicará si hay alguna URL predefinida en el código del recurso una vez subido.
A continuación, se muestra un ejemplo de una etiqueta de clic insertada en un documento HTML:
<head>
<meta name="ad.size" content="width=300,height=250">
<script type="text/javascript">
var clickTag = "http://www.google.com"; </script>
</head>
[Aquí se incluye el resto del código de la creatividad.] </html>
Compruebe que la creatividad utiliza la variable de etiqueta de clic como URL de página de destino:
<img src="images/dclk.png" border=0>
</a>
El componente Área de pulsación de Google Web Designer es totalmente compatible con Campaign Manager 360. No se requiere incluir ningún código personalizado.
Para añadir una etiqueta de clic con un área de pulsación:
- Asegúrese de que su anuncio disponga de un botón u otro elemento visual claro de llamada a la acción para que el usuario pueda tocarlo o hacer clic en él.
- Arrastre el componente Área de pulsación desde el panel de componentes a la escena y sitúelo sobre la llamada a la acción.
- En el panel Eventos, haga clic en el botón de nuevo evento
.
- En el cuadro de diálogo Eventos, seleccione las siguientes opciones:
Objetivo El componente Área de pulsación ( gwd-taparea_1)Evento Área de pulsación > Toque o clic Acción Anuncio de Google > Salir del anuncio
Nota: Una acción similar, Salida con sobreescritura de URL, no permite modificar la URL fuera de la creatividad, como Studio o Campaign Manager 360, y solo debe usarse con anuncios dinámicos.
Receptor gwd-adConfiguración - ID de métricas: una etiqueta (por ejemplo, "CTA") para facilitar la comprensión de los informes.
- URL: indica la URL de salida.
- Contraer al salir: marque esta casilla para que se cierre el anuncio cuando el usuario lo cierre.
- Pausar medios al salir: marque esta casilla para que la reproducción de vídeo y audio se detenga cuando el usuario cierre el anuncio.
- Página minimizada a la que se accede al salir: la página se muestra cuando el usuario cierra un anuncio expandible.
.
Archivos de muestra
Documento HTML de muestraA continuación, se muestra un ejemplo de un documento .html completo para una creatividad HTML5. La etiqueta de clic y la etiqueta meta de tamaño se muestran en negrita.
Como esta creatividad es muy sencilla, no se necesitan más recursos. Si esta fuera su creatividad HTML5, la comprimiría como archivo .zip o .adz y la enviaría al trafficker de Campaign Manager 360.
Documento
<head>
<title>página HTML de muestra</title>
<meta name="ad.size" content="width=300,height=250">
<style>
html, body {background-color: blue;}
p { color:white; }
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
var clickTag = "http://www.google.org";
function resizeWindow()
{
$('p').css({ 'width':'100%', 'text-align':'center' });
var h1 = $('h1').height();
var h = h1/2;
var WinHeight = $(window).height();
var w = WinHeight/2;
var m = w - h;
var WinWidth=$(window).width();
$('p').css("margin-top",m + "px");
$("p").text("Size="+WinWidth+"x"+WinHeight);
}
$(document).ready(function () {
resizeWindow();
});
$(window).resize(function () {
resizeWindow();
});
</script>
</head>
<body>
<a href="javascript:window.open(window.clickTag)"><p>Cargando página...</p></a> </body> </html>
Con estos archivos HTML5, puede cambiar URLs de forma dinámica y registrar clics con los servidores de anuncios de Campaign Manager 360.
Sencillo
Llama a una etiqueta de clic cuando se hace clic.
Con parámetro incluido
Llama a clickTag cuando se hace clic en el botón. En este caso, se muestra cómo se transfiere a la URL de destino un parámetro; por ejemplo, un código postal.
Ejemplo con un signo de almohadilla (#) incluido
Está codificado para dividir la llamada de seguimiento a Campaign Manager 360 y la URL de página de destino del botón. Esta acción debe realizarse en todas las creatividades que redirijan a una URL de destino que contenga un signo de almohadilla (#).
HTML5 file with a number sign in a click tag URL
Varias etiquetas de clic
Contiene varias etiquetas de clic.
HTML5 file with multiple click tags
Cargador
Archivo .zip que contiene dos archivos .zip, el superior y el secundario. El superior carga el secundario.
Se trata de un archivo HTML5 de ejemplo con el que se pueden registrar interacciones de usuarios con creatividades que no sean de rich media.
Píxel de seguimiento 1x1
Llama a un píxel de seguimiento de 1x1 de Campaign Manager 360 cuando se carga.
