Contenido

amp-ad / amp-embed

amp-ad

Description

Representa un contenedor que puede mostrar un anuncio.

Required Scripts

<script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>

Supported Layouts

fill fixed fixed-height flex-item fluid intrinsic nodisplay responsive

Ejemplos

amp-ad amp-fx-flying-carpet amp-sticky-ad News Article Advanced User Consent Flow Client Side User Consent Flow

Representa un contenedor que puede mostrar un anuncio. amp-embed funciona como un alias de la etiqueta amp-ad, ya que deriva todas sus funciones con un nombre de etiqueta diferente. Recomendamos utilizar amp-embed cuando sea más preciso semánticamente. Los documentos AMP solo admiten inserciones o anuncios servidos mediante HTTPS.

amp-ad / amp-embed

Es probable que la especificación de amp-ad/amp-embed evolucione significativamente con el tiempo. El enfoque actual de estos componentes se ha diseñado para poner en funcionamiento el formato para poder mostrar anuncios.

Descripción	Representa un contenedor que puede mostrar un anuncio. `amp-embed` funciona como un alias de la etiqueta `amp-ad`, ya que deriva todas sus funciones con un nombre de etiqueta diferente. Recomendamos utilizar `amp-embed` cuando sea más preciso semánticamente. Los documentos AMP solo admiten inserciones o anuncios servidos mediante HTTPS.
Secuencia de comandos obligatoria	`<script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"><` Nota: amp-ad puede funcionar sin esta secuencia de comandos, pero se recomienda encarecidamente su uso para mantener la compatibilidad con versiones futuras.
Diseños admitidos	fill, fixed, fixed-height, flex-item, intrinsic, nodisplay y responsive
Ejemplos	Consulta el ejemplo de amp-ad de AMP By Example.

Comportamiento

Los anuncios se cargan en los documentos AMP como cualquier otro recurso mediante un elemento personalizado especial llamado <amp-ad>. No se puede ejecutar JavaScript proporcionado por redes publicitarias en documentos AMP. En su lugar, el tiempo de ejecución de AMP cargará un iframe desde otro origen (a través de una zona de pruebas de iframe) como documento AMP y ejecutará el JS de la red publicitaria dentro de dicha zona de pruebas.

<amp-ad> requiere que se definan valores de anchura y altura de acuerdo con la regla correspondiente a su tipo de diseño, así como un argumento type que seleccione la red publicitaria que se mostrará. Todos los atributos data-* de la etiqueta se transfieren automáticamente como argumentos al código que renderiza el anuncio. Los atributos data- que se necesitan para un determinado tipo de red varían en función de la red publicitaria, y deben consultarse en la documentación de cada una de ellas.

Ejemplo: Mostrar algunos anuncios

<amp-ad type="a9"
  data-amzn_assoc_ad_mode="auto"
  data-divid="amzn-assoc-ad-fe746097-f142-4f8d-8dfb-45ec747632e5"
  data-recomtype="async"
  data-adinstanceid="fe746097-f142-4f8d-8dfb-45ec747632e5"
    width="300"
    height="250"
    data-aax_size="300x250"
    data-aax_pubname="test123"
    data-aax_src="302">
  </amp-ad>
  <amp-ad width="300"
    height="250"
    type="industrybrains"
    data-width="300"
    data-height="250"
    data-cid="19626-3798936394">
  </amp-ad>
  <amp-embed type="taboola"
    width="400"
    height="300"
    layout="responsive"
    data-publisher="amp-demo"
    data-mode="thumbnails-a"
    data-placement="Ads Example"
    data-article="auto">
  </amp-embed>

Abrir este fragmento en Playground

Atributos

type (obligatorio)	Especifica un identificador para la red publicitaria. El atributo `type` selecciona la plantilla que se utilizará para la etiqueta de anuncio.
src (opcional)	Utiliza este atributo para cargar una etiqueta de secuencia de comandos para la red publicitaria especificada. Se puede utilizar para las redes publicitarias que requieren que se inserte una sola etiqueta de secuencia de comandos en la página web. El valor `src` debe tener un prefijo que esté incluido en la lista blanca de la red publicitaria especificada, y el valor debe utilizar el protocolo `https`.
data-foo-bar	La mayoría de las redes publicitarias requieren más configuración, que se puede transferir a la red mediante atributos HTML del tipo `data-`. Los nombres de los parámetros pasan de ser nombres estándar de atributos de datos (separados mediante guiones) a alternar mayúsculas y minúsculas (camel case). Por ejemplo, "data-foo-bar" se envía al anuncio para su configuración como "fooBar". Consulta la documentación de la red de anuncios específica para saber qué atributos se pueden usar en ella.
data-vars-foo-bar	Los atributos que empiezan por `data-vars-` están reservados para las variables de `amp-analytics`.
json (opcional)	Utiliza este atributo para transferir una configuración al anuncio como un objeto JSON complejo de forma arbitraria. El objeto se transfiere al anuncio tal cual, sin que se produzca ningún cambio en los nombres.
data-consent-notification-id (opcional)	Si se proporciona, es necesario confirmar amp-user-notification con el ID de HTML hasta que el "ID de cliente de AMP" del usuario (similar a una cookie) se transmita al anuncio. Esto quiere decir que el renderizado de los anuncios no se produce hasta que el usuario confirma la notificación.
data-loading-strategy (opcional)	Indica al anuncio que empiece a cargarse cuando haya un número determinado de viewports entre la ubicación del anuncio y el viewport actual. Sin el atributo `data-loading-strategy`, el número es 3 de forma predeterminada. Puedes especificar un valor en forma de número decimal en el intervalo de [0, 3]. Si no se especifica un valor, es 1.25 de forma predeterminada. Usa un valor menor para obtener un mayor grado de visibilidad (es decir, para aumentar las probabilidades de que un usuario vea un anuncio después de que se cargue), con el riesgo de que se generen menos impresiones (es decir, de que se carguen menos anuncios). Si se especifica el atributo pero el valor se deja en blanco, el sistema asigna un valor en forma de número decimal que optimiza la visibilidad sin afectar drásticamente a las impresiones. Ten en cuenta que especificar `prefer-viewability-over-views` como valor también optimiza automáticamente la visibilidad.
data-ad-container-id (opcional)	Indica el ID de componente contenedor al anuncio, en el caso de que se intente ocultar este último. El componente contenedor debe ser un `<amp-layout>` que sea elemento principal del anuncio. Cuando se especifica `data-ad-container-id` y se encuentra un componente de contenedor `<amp-layout>`, el tiempo de ejecución de AMP intentará ocultar el componente contenedor en lugar del componente del anuncio en los casos en los que no se devuelva ningún anuncio. Esta función puede ser útil cuando hay presente un indicador de anuncio.
atributos comunes	Este elemento incluye atributos comunes que se aplican a los componentes de AMP.

Marcador de posición

De forma opcional, amp-ad admite un elemento secundario con el atributo placeholder. Si la red publicitaria lo admite, este elemento se mostrará hasta que el anuncio esté disponible para publicarse. Obtén más información sobre los marcadores de posición y los respaldos.

<amp-ad width=300 height=250
    type="foo">
    <div placeholder>Loading ...</div>
</amp-ad>

No hay ningún anuncio disponible

Si no hay ningún anuncio disponible para el espacio, AMP intenta ocultar el elemento amp-ad (es decir, define display: none), ya que determina que esta operación se puede llevar a cabo sin afectar a la posición de desplazamiento del usuario. Si el anuncio está en el viewport actual, no se ocultará porque afecta a la posición de desplazamiento del usuario; de lo contrario, se ocultará.

En caso de que falle el intento de ocultar el anuncio, el componente amp-ad admite un elemento secundario con el atributo fallback. Si hay un elemento de respaldo personalizado presente, se muestra; de lo contrario, AMP aplica un respaldo predeterminado.

Ejemplo con un respaldo:

<amp-ad width=300 height=250 type="foo">
  <div fallback>No ad for you</div>
</amp-ad>

Publicar anuncios de vídeo

Hay 3 formas de monetizar anuncios de vídeo en AMP:

AMP admite de forma nativa ciertos reproductores de vídeo que se pueden utilizar para monetizar anuncios, como BrightCove, DailyMotion, etc. Para obtener una lista completa, consulta los componentes multimedia.
Utiliza el componente amp-ima-video, que incluye un SDK de IMA y un reproductor de vídeo HTML5 integrados.
Si utilizas un reproductor de vídeo que no es compatible con AMP, puedes incluirlo mediante amp-iframe. Si usas este método, ten en cuenta que:
- Debe haber una imagen de póster si cargas el reproductor en el primer viewport. Más información
- Tanto el vídeo como la imagen de póster se deben servir a través de HTTPS.

Publicar anuncios desde un dominio personalizado

AMP admite la carga del iframe de arranque que se utiliza para cargar anuncios de un dominio personalizado, como el tuyo.

Para habilitarlo, copia el archivo remote.html en tu servidor web. A continuación, añade la siguiente metaetiqueta a tus archivos de AMP:

<meta name="amp-3p-iframe-src" content="https://assets.your-domain.com/path/to/remote.html">

El atributo content de la metaetiqueta es la URL absoluta de la copia del archivo remote.html que está en tu servidor web. Esta URL debe utilizar un esquema "https", y no puede encontrarse en el mismo origen que tus archivos AMP. Por ejemplo, si alojas archivos AMP en www.example.com, esta URL no puede estar en www.example.com, pero sí en something-else.example.com. Para obtener más información sobre los orígenes de iframe permitidos, consulta la política de origen de iframe.

Seguridad

Valida los datos entrantes antes de transferirlos a la función draw3p para asegurarte de que el iframe funciona del modo previsto. Esto se aplica, en concreto, a las redes publicitarias que permiten la inyección de código JavaScript personalizado.

Los iframes también deben obligar a que solo se les incluya en los orígenes a los que tienen previsto unirse. Dichos orígenes serían:

Tus propios orígenes
https://cdn.ampproject.org para la caché de AMP

En el caso de la caché de AMP, también debes comprobar que el origen de la fuente (el origen del documento que sirve cdn.ampproject.org) sea uno de tus orígenes.

La aplicación de los orígenes se puede llevar a cabo con el tercer argumento de draw3p junto con la directiva allow-from, para así obtener compatibilidad total con el navegador.

Mejorar la configuración de anuncios entrantes

Esto es completamente opcional: a veces se puede querer mejorar la solicitud de anuncio antes de enviarla al servidor de anuncios.

Si tu red publicitaria admite Fast Fetch, utiliza entonces la función Real-Time Config (RTC) (por ejemplo, las integraciones de DoubleClick y AdSense admiten Fast Fetch y RTC).

Si tu red de anuncios utiliza Delayed Fetch, puedes transferir una retrollamada a la llamada a la función draw3p en el archivo remote.html. La retrollamada recibe la configuración entrante como primer argumento y, a continuación, recibe otra retrollamada como segundo argumento (denominada done en el ejemplo que aparece más abajo). Se debe ejecutar esta retrollamada con la configuración actualizada para que se lleve a cabo el renderizado de anuncios.

Ejemplo:

draw3p(function(config, done) {
  config.targeting = Math.random() > 0.5 ? 'sport' : 'fashion';
  // Don't actually call setTimeout here. This should only serve as an
  // example that is OK to call the done callback asynchronously.
  setTimeout(function() {
    done(config);
  }, 100)
}, ['allowed-ad-type'], ['your-domain.com']);

Estilo

Los elementos <amp-ad> no pueden contener o estar dentro de contenedores que tengan definido position: fixed de CSS, con la excepción de amp-lightbox. Esto se debe a las implicaciones que tienen en la experiencia de usuario los anuncios superpuestos de página completa. Es posible que se permita en el futuro utilizar formatos de anuncio similares, en contenedores controlados por AMP que mantengan ciertas características invariables de experiencia de usuario.

Validación

Consulta las reglas de amp-ad en la especificación de la herramienta de validación de AMP.

Redes publicitarias admitidas

Tipos de inserción admitidos

¿Necesita ayuda adicional?

¿Ha leído este documento una docena de veces pero realmente no responde todas sus preguntas? Quizás otras personas piensen lo mismo: póngase en contacto con ellas en Stack Overflow.

Ir a Stack Overflow

¿Encontró un error o considera que falta una función?

¡El proyecto AMP alienta profundamente su participación y contribuciones! Esperamos que se convierta en un miembro permanente de nuestra comunidad de código abierto, pero también agradecemos las contribuciones esporádicas sobre los temas que le apasionan especialmente.

Ir a GitHub