Características que deben tener los anuncios de AMP

Si desea proponer cambios en el formato estándar, agregue un comentario en el artículo Intento para implementarlo.

Los anuncios AMPHTML son un mecanismo para renderizar anuncios rápidamente y de manera eficaz en las páginas de AMP. Para garantizar que los documentos de los anuncios AMPHTML ("Creativos de AMP") puedan renderizarse de forma rápida y sin contratiempos en el navegador, y que no afecten la experiencia del usuario, los creativos de AMP deben cumplir todo un conjunto de reglas para su validación. Al igual que las reglas de formato para AMP, los anuncios AMPHTML tienen acceso a un conjunto limitado de etiquetas, funciones y extensiones permitidas.

Reglas de formato para los anuncios AMPHTML

A menos que se especifique lo contrario, el creativo debe cumplir todas las reglas establecidas por las reglas de formato para AMP, las cuales se incluyen aquí como referencia. Por ejemplo, el código reutilizable para los anuncios AMPHTML difiere del código reutilizable estándar que se usa en AMP.

Adicionalmente, los creativos deben cumplir las siguientes reglas:

 <meta name="amp4ads-id"
  content="vendor=adsense,type=creative-id,id=1283474">
<meta name="amp4ads-id"
  content="vendor=adsense,type=impression-id,id=xIsjdf921S">

Código repetitivo

Los creativos de los anuncios AMPHTML requieren de un código repetitivo diferente y con un estilo considerablemente más simple en comparación con lo que hacen los documentos generales de AMP:

<style amp4ads-boilerplate>
  body {
    visibility: hidden;
  }
</style>

Justificación: El estilo amp-boilerplate oculta el contenido del cuerpo hasta que el tiempo de ejecución de AMP está listo y puede mostrarlo. Si Javascript está desactivado o el tiempo de ejecución de AMP no se carga, el texto estándar predeterminado garantiza que el contenido se seguirá mostrando independientemente. Sin embargo, en los anuncios AMPHTML, si Javascript está completamente deshabilitado, los anuncios AMPHTML no se ejecutarán y no se mostrará ningún anuncio, por lo que no es necesaria la sección <noscript>. En ausencia del tiempo de ejecución de AMP, la mayoría de la maquinaria en la que se basan los anuncios AMPHTML (por ejemplo, los análisis para el seguimiento de la visibilidad o amp-img para la visualización de contenido) no estarán disponibles, por lo que es preferible no mostrar ningún anuncio que uno defectuoso.

Por último, el código repetitivo del anuncio AMPHTML utiliza amp-a4a-boilerplate en lugar de amp-boilerplate para que los validadores puedan identificarlo fácilmente y generar mensajes de error más precisos para ayudar a los desarrolladores.

Tenga en cuenta que las mismas reglas sobre los cambios en el texto del código reutilizable se aplicaran como en el código repetitivo general de AMP.

CSS

Animaciones y transiciones en CSS

Seleccionadores

Las propiedades transition y animation solo se permiten en los seleccionadores que:

• Solo contienen las propiedades transition, animation, transform, visibility, u opacity.

Justificación: Esto permite que el tiempo de ejecución de AMP elimine esta clase de contexto para desactivar las animaciones, mientras sea necesario para el rendimiento de la página.

Correcto

.box {
transform: rotate(180deg);
transition: transform 2s;
}

Incorrecto

Esta propiedad no esta permitida para la clase CSS.

.box {
color: red; // non-animation property not allowed in animation selector
transform: rotate(180deg);
transition: transform 2s;
}

Propiedades transitorias y animadas

Las únicas propiedades que pueden ser transitorias son la opacidad y la transformación. (Justificación)

Correcto

transition: transform 2s;

Incorrecto

transition: background-color 2s;

Correcto

@keyframes turn {
from {
transform: rotate(180deg);
}

to {
transform: rotate(90deg);
}
}

Incorrecto

@keyframes slidein {
from {
margin-left: 100%;
width: 300%;
}

to {
margin-left: 0%;
width: 100%;
}
}

Extensiones e incorporaciones permitidas en AMP

Se permiten los siguientes módulos de extensiones de AMP y etiquetas integradas AMP en un anuncio creativo Se prohíben las extensiones o etiquetas incorporadas que no se enumeren explícitamente.

• amp-accordion
• amp-ad-exit
• amp-analytics
• amp-anim
• amp-animation
• amp-audio
• amp-bind
• amp-carousel
• amp-fit-text
• amp-font
• amp-form
• amp-img
• amp-layout
• amp-lightbox
• amp-mraid, es experimental. Si está considerando utilizarlo, abra una problemática en wg-monetization.
• amp-mustache
• amp-pixel
• amp-position-observer
• amp-selector
• amp-social-share
• amp-video

La mayoría de las omisiones son consecuencia ya sea del rendimiento o para que los anuncios AMPHTML sean más fáciles de analizar.

Por ejemplo: <amp-ad> se omite de esta lista. Se prohíbe explícitamente porque permitiría que un <amp-ad> estuviera dentro de un <amp-ad> que potencialmente conduciría a cascadas ilimitadas de carga de anuncios, los cuales no cumplen con los objetivos de rendimiento para los anuncios de AMPHTML.

Por ejemplo: <amp-iframe> se omite de esta lista. Se prohíbe porque los anuncios podrían utilizarlo para ejecutar injustificadamente Javascript y cargar contenido arbitrario. Los anuncios que quieran utilizar esas funciones deben devolver false de su entrada a4aRegistry y utilizar el mecanismo actual de renderización de anuncios “3p iframe”.

Por ejemplo: <amp-facebook>, <amp-instagram>, <amp-twitter>, y <amp-youtube> se omiten por la misma razón que <amp-iframe>: Todos crean iframes y potencialmente pueden consumir recursos ilimitados en ellos mismos.

Por ejemplo: <amp-ad-network-*-impl> se omite de esta lista. La etiqueta <amp-ad> administra la autorización en estas etiquetas de implementación, los creativos no deben tratar de incluirlos inmediatamente.

Por ejemplo: <amp-lightbox> aún no se incluye porque todavía algunos creativos en los anuncios de AMPHTML pueden renderizarse en un iframe y actualmente no hay ningún mecanismo para que un anuncio se expanda más allá de un iframe. Próximamente puede agregarse la compatibilidad, si se existe el deseo de hacerlo.

Etiquetas HTML

Las siguientes etiquetas están permitidas en los creativos para los anuncios de AMPHTML. Están prohibidas las etiquetas que no están explícitamente permitidas. Esta lista es un subconjunto general en la lista de elementos permitidos para la etiqueta de AMP. De esa forma la lista se ordena según las especificaciones para HTML5 que se encuentran en la sección 4 Los elementos de HTML.

La mayoría de las omisiones se deben al rendimiento o porque las etiquetas no son estándares para HTML5. Por ejemplo, <noscript> se omite debido a que los anuncios de AMPHTML dependen de que JavaScript se haya habilitado, así que un bloque <noscript> nunca se ejecutará y, por lo tanto, solo obstaculizará al creativo, el costo del ancho de banda y los tiempos de espera. De forma similar, <acronym>, <big>, y otros están prohibidos debido a que no son compatibles con HTML5.

4.1 El elemento raíz

4.1.1 <html>

• Debe utilizar los tipos <html ⚡4ads> o <html amp4ads>

4.2 Metadatos de los documentos

4.2.1 <head>

4.2.2 <title>

4.2.4 <link>

• las etiquetas <link rel=...> están prohibidas, excepto para <link rel=stylesheet>.

• Tenga en cuenta: A diferencia del AMP general, las etiquetas <link rel="canonical"> están prohibidas.

4.2.5 <style> 4.2.6 <meta>

4.3 Secciones

4.3.1 <body> 4.3.2 <article> 4.3.3 <section> 4.3.4 <nav> 4.3.5 <aside> 4.3.6 <h1>, <h2>, <h3>, <h4>, <h5>, and <h6> 4.3.7 <header> 4.3.8 <footer> 4.3.9 <address>

4.4 Agrupación del contenido

4.4.1 <p> 4.4.2 <hr> 4.4.3 <pre> 4.4.4 <blockquote> 4.4.5 <ol> 4.4.6 <ul> 4.4.7 <li> 4.4.8 <dl> 4.4.9 <dt> 4.4.10 <dd> 4.4.11 <figure> 4.4.12 <figcaption> 4.4.13 <div> 4.4.14 <main>

4.5 Semántica a nivel de texto

4.5.1 <a> 4.5.2 <em> 4.5.3 <strong> 4.5.4 <small> 4.5.5 <s> 4.5.6 <cite> 4.5.7 <q> 4.5.8 <dfn> 4.5.9 <abbr> 4.5.10 <data> 4.5.11 <time> 4.5.12 <code> 4.5.13 <var> 4.5.14 <samp> 4.5.15 <kbd > 4.5.16 <sub> and <sup> 4.5.17 <i> 4.5.18 <b> 4.5.19 <u> 4.5.20 <mark> 4.5.21 <ruby> 4.5.22 <rb> 4.5.23 <rt> 4.5.24 <rtc> 4.5.25 <rp> 4.5.26 <bdi> 4.5.27 <bdo> 4.5.28 <span> 4.5.29 <br> 4.5.30 <wbr>

4.6 Modificaciones

4.6.1 <ins> 4.6.2 <del>

4.7 Contenido incrustado

• El contenido incrustado es compatible solo mediante las etiquetas de AMP, como <amp-img> o <amp-video>.

4.7.4 <source>

4.7.18 SVG

Las etiquetas de los SVG no están en el espacio de nombres de HTML5. Se detallan a continuación sin un ID de sección.

<svg>``<g>``<path>``<glyph>``<glyphref>``<marker>``<view>``<circle>``<line>``<polygon>``<polyline>``<rect>``<text>``<textpath>``<tref>``<tspan>``<clippath>``<filter>``<lineargradient>``<radialgradient>``<mask>``<pattern>``<vkern>``<hkern>``<defs>``<use>``<symbol>``<desc>``<title>

4.9 Tabla de datos

4.9.1 <table> 4.9.2 <caption> 4.9.3 <colgroup> 4.9.4 <col> 4.9.5 <tbody> 4.9.6 <thead> 4.9.7 <tfoot> 4.9.8 <tr> 4.9.9 <td> 4.9.10 <th>

4.10 Formularios

4.10.8 <button>

4.11 Lenguajes de programación

• Al igual que un documento general de AMP, la etiqueta del creativo <head> debe incluir una etiqueta <script async src="https://cdn.ampproject.org/amp4ads-v0.js"></script>.
• A diferencia del AMP general, el <noscript> está prohibido.
• Justificación: Dado que los anuncios AMPHTML requieren que Javascript esté habilitado para funcionar, los bloques de <noscript> no tendrían ninguna utilidad en los anuncios de AMPHTML y su costo solo es el ancho de banda de la red.
• A diferencia del AMP general, el <script type="application/ld+json"> está prohibido.
• Justificación: JSON LD se utiliza para marcar datos estructurados en páginas host, pero los creativos de los anuncios no son documentos independientes y no contienen datos estructurados. En los bloques JSON LD solo tendría costo el ancho de banda de la red.
• Todas las demás exclusiones y reglas en los lenguajes de programación se transfieren del AMP general.