Documentación Advertising Guía de Creative

Especificación creativa de HTML5 para Advertising Creative

Last update: Wed Mar 05 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

Temas:

Creado para:

Usuario

Este documento describe los requisitos y la compatibilidad con la API para los creativos de HTML5 en Creative. La API admite el desarrollo de creativos de HTML5 cuyos atributos se pueden configurar en el momento de la entrega creativa.

Ámbito

Creative admite titulares de HTML5 con elementos multimedia no enriquecidos que aparecen dentro de los bordes definidos de una página. Puede utilizar los siguientes tipos de HTML5 creativos:

HTML5: admite hasta 5 direcciones URL de páginas de aterrizaje que se pueden configurar durante la creación creativa y el tráfico.
HTML5 flexible: admite hasta 5 direcciones URL de páginas de aterrizaje que se pueden configurar durante la creación y el tráfico creativos, y también permite modificar los atributos creativos durante la creación y el tráfico creativos.

Requisitos

Requisitos de carpeta y compresión

El elemento creativo debe estar empaquetado en un archivo ZIP (formato .ZIP). Los archivos ZIP anidados no son compatibles, por lo que no incluya una carpeta comprimida dentro de la carpeta comprimida externa.
El archivo ZIP debe contener al menos un archivo HTML (el archivo de visualización principal de HTML) que incluya una referencia a la biblioteca de JavaScript Creative. El archivo HTML principal puede estar en la carpeta raíz o en una subcarpeta.
Al archivo HTML principal se le puede asignar cualquier nombre, siempre que no incluya caracteres especiales, aunque se recomienda index.html.
Todos los recursos de soporte necesarios para procesar el elemento creativo final deben encontrarse en la misma carpeta que el archivo de visualización de HTML o en subcarpetas de la carpeta principal.
No incluya en el creativo ningún archivo al que el creativo no haga referencia.

Inclusión del archivo JavaScript de Advertising Creative

El archivo HTML principal (y ningún otro archivo) debe contener una referencia al archivo JavaScript AMOLibrary.js. Llame al archivo en la primera línea de la sección <head> con la siguiente dirección:

https://ads.everesttech.net/ads/static/local/AMOLibrary.js

Este archivo contiene funciones para garantizar que la prueba local de eventos de salida se realice sin problemas.

Requisitos creativos de HTML5

Compatibilidad con URL de pulsaciones en HTML estático5

`amo.registerClick(clkVar, clkUrl)`

Registra las direcciones URL de pulsación y el parámetro asociado utilizado para hacer referencia a cada dirección URL (conocido como clickTag). Esta API informa al servidor de publicidad Creative sobre dónde agregar el rastreo de clics. Puede utilizar esta API para registrar hasta cinco variables de etiqueta de clic, cada una con la dirección URL de la página de aterrizaje correspondiente.

NOTE

Las direcciones URL estáticas que incluya en el creativo de HTML5 se utilizan únicamente con fines de prueba local y se sobrescribirán. Al cargar un elemento creativo de HTML5, se define la página de aterrizaje predeterminada para cada variable clickTag. Al asignar un elemento creativo de HTML5 cargado a una experiencia publicitaria, puede, opcionalmente, anular la página de aterrizaje predeterminada para cada variable de clickTag y Creative agrega el rastreo de clics a las direcciones URL cuando guarda la experiencia.

Parámetros

clkVar: nombre de la variable de clic (normalmente "clickTag"), entre comillas dobles.
clkUrl: la dirección URL de la página de aterrizaje para esta variable de clic, entre comillas dobles.

Uso

Llame a amo.registerClick() en la sección <head> del archivo principal de HTML.

Ejemplo

amo.registerClick("clickTag","http://www.example.com")

`amo.onAdClick(clk, event)`

Déclencheur el evento de salida, que redirige al usuario a la página de aterrizaje configurada para clickTag. Durante las pruebas locales, esta función advierte a los desarrolladores de si la URL que se pasa a la función se ha registrado.

Parámetros

clkTag: nombre de la variable de clic que se usa para asignar la dirección URL de la página de aterrizaje mediante la función amo.registerClick(), entre comillas simples.
event — (Opcional) El objeto de evento "clic" de JavaScript. Registra las coordenadas de los clics, que se pueden utilizar para analizar el rendimiento creativo.

Uso

Llame a amo.onAdClick() en la sección <body> del archivo principal de HTML.

Ejemplos

amo.onAdClick('clickTag') O amo.onAdClick('clickTag',clickEvt)

Requisitos creativos flexibles de HTML5

Compatibilidad con URL de pulsaciones en HTML5 flexible

`amo.registerClick(clkVar, clkUrl)`

NOTE

Parámetros

clkVar: nombre de la variable de clic (normalmente "clickTag"), entre comillas dobles.
clkUrl: la dirección URL de la página de aterrizaje para esta variable de clic, entre comillas dobles.

Uso

Llame a amo.registerClick() en la sección <head> del archivo principal de HTML.

Ejemplo

amo.registerClick("clickTag","http://www.example.com")

`amo.onAdClick(clk, event)`

Parámetros

clkTag: nombre de la variable de clic que se usa para asignar la dirección URL de la página de aterrizaje mediante la función amo.registerClick(), entre comillas simples.
event — (Opcional) El objeto de evento "clic" de JavaScript. Registra las coordenadas de los clics, que se pueden utilizar para analizar el rendimiento creativo.

Uso

Llame a amo.onAdClick() en la sección <body> del archivo principal de HTML.

Ejemplos

amo.onAdClick('clickTag') O amo.onAdClick('clickTag',clickEvt)

Compatibilidad con atributos creativos en HTML5 flexible

`amo.registerAttribute(key, type, value)`

Define los atributos de los elementos creativos que se pueden cambiar en el momento de la creación creativa o de la experiencia. Puede definir hasta 20 atributos creativos que se pueden configurar en el momento de la creación creativa o de la experiencia.

NOTE

Los valores definidos en este método se utilizan únicamente para el desarrollo local y no se utilizan en el servicio de anuncios en directo.

Parámetros

key: el nombre alfanumérico del atributo. Debe comenzar con un carácter alfabético.
type: el tipo de atributo (TEXT o IMAGE).
value: valor del atributo para pruebas. Para atributos de tipo IMAGE, el valor debe ser la ruta relativa al archivo de imagen.

Uso

Llame a amo.registerAttribute() para registrar un atributo, tipo y valor creativo durante la prueba en modo local. Los archivos de imagen utilizados como valores de muestra deben empaquetarse en el archivo ZIP junto con el paquete cargado.

`amo.attributes`

Un objeto JSON para consultar los nombres y valores de las variables de atributos creativos. Las claves de objeto son los nombres de atributo y los valores son los valores de dichos atributos.

En el modo de prueba local, los pares clave-valor son los pares registrados por la API amo.registerAttribute. Para la producción, los nombres y valores de las variables de los atributos creativos deben configurarse en el momento de la creación y el tráfico creativos.

Requisitos de contenido de Creative

La mayoría de los intercambios de pantallas disponibles en Advertising DSP tienen los siguientes requisitos creativos:

Un borde sólido debe rodear todas las imágenes de publicidad.
No se permiten anuncios expansivos.
La página de aterrizaje debe abrirse en una nueva ventana.
El dominio de la página de aterrizaje y sus subdominios no pueden tener más de 35 caracteres. Nota: Las direcciones URL de la página de aterrizaje final se definen en DSP y no en los propios recursos de HTML5.
Cualquier renuncia a la oferta de un anuncio debe incluirse en el propio anuncio y no solo en la página de aterrizaje.

Contenido de ejemplo como objeto y matriz JSON

Contenido de ejemplo como objeto JSON

{
"name": "Adobe Creative",
"description": "Creative",
"picture_url": "http://wwwimages.adobe.com/content/dam/acom/en/products/creativecloud/max2016/images/cc-overview-assets-720x472.png",
"product_url": "http://www.adobe.com/creativecloud.html?promoid=ZP46FD38&mv=other"
}

Contenido de ejemplo como matriz JSON

[{
"name": "Adobe Creative",
"description": "Creative",
"picture_url": "http://wwwimages.adobe.com/content/dam/acom/en/products/creativecloud/max2016/images/cc-overview-assets-720x472.png",
"product_url": "http://www.adobe.com/creativecloud.html?promoid=ZP46FD38&mv=other"
},

{
"name": "Adobe Creative",
"description": "Creative",
"picture_url": "http://wwwimages.adobe.com/content/dam/acom/en/products/creativecloud/max2016/images/cc-overview-mobile-720x520.png",
"product_url": "http://adobe.com/"
}

]

Ejemplo de creatividad de HTML5

Ejemplo de estructura de carpetas (después de la descompresión)

index.html
/assets (carpeta)
- bg.jpg (imagen de JPG, PNG, SVG o GIF)

Archivo HTML de ejemplo (index.html) para creativos HTML5 simples

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="https://ads.everesttech.net/ads/static/local/AMOLibrary.js"></script>
  <script type="text/javascript">
  amo.registerClick("clickTag","http://www.example.com");
  </script>
</head>
<body>
  <a href="javascript:amo.onAdClick('clickTag')">
  <img src="assets/bg.jpg" width="300" height="250" style="position:absolute;top:0px;left:0px;">
  </a>
</body>
</html>

Ejemplo de archivo de HTML (index.html) para creativos estáticos de HTML5

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="https://ads.everesttech.net/ads/static/local/AMOLibrary.js"></script>
  <script type="text/javascript">
  amo.registerClick("clickTag","http://www.example.com");
  amo.registerClick("clickTag2","http://www.example2.com");
  amo.registerClick("clickTag3","http://www.example3.com");
  amo.registerClick("clickTag4","http://www.example4.com");
  amo.registerClick("clickTag5","http://www.example5.com");
  </script>
</head>
<body>
  <a href="javascript:amo.onAdClick('clickTag')">
  <img src="assets/bg.jpg" width="300" height="250" style="position:absolute;top:0px;left:0px;">
  </a>
</body>
</html>

recommendation-more-help

81c37de9-89dd-4749-9a04-e9f8c86dd51a