Spécification AMP pour les annonces

Si vous souhaitez proposer des modifications à la norme, veuillez laisser un commentaire dans Intention de mise en œuvre.

Les annonces AMPHTML sont un mécanisme permettant de diffuser des annonces rapides et performantes sur des pages AMP. Pour assurer la diffusion rapide et fluide des documents publicitaires AMPHTML (« publicités AMP ») dans le navigateur ainsi qu'une expérience utilisateur optimale, les publicités AMP doivent obéir à un ensemble de règles de validation. Dans le même esprit que les règles du format AMP, les annonces AMPHTML ont accès à un ensemble limité de balises, de capacités et d'extensions autorisées.

Règles de format d'annonce AMPHTML

Sauf indication contraire ci-dessous, la publicité doit obéir à toutes les règles données par les règles du format AMP, incluses ici en guise de référence. Par exemple, le modèle de l'annonce AMPHTML est différent du modèle standard AMP.

En outre, les publicités doivent respecter les règles suivantes:

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

<amp-analytics id="nestedAnalytics">
  <script type="application/json">
  {
    "requests": {
      "visibility": "https://example.com/nestedAmpAnalytics"
    },
    "triggers": {
      "visibilitySpec": {
      "selector": "amp-ad",
      "visiblePercentageMin": 50,
      "continuousTimeMin": 1000
      }
    }
  }
  </script>
</amp-analytics>

Modèle

Les créations publicitaires AMP HTML nécessitent un modèle de style différent et considérablement plus simple que les documents AMP généraux:

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

Logique: le style amp-boilerplate masque le contenu du corps jusqu'à ce que le runtime AMP soit prêt et puisse l'afficher. Si Javascript est désactivé ou si le runtime AMP ne se charge pas, le modèle par défaut garantit que le contenu sera finalement affiché malgré tout. Dans les annonces AMPHTML, cependant, si Javascript est entièrement désactivé, les annonces AMPHTML ne seront pas exécutées et aucune annonce ne sera jamais diffusée, il n'est donc pas nécessaire d'utiliser la section <noscript>. En l'absence du runtime AMP, la plupart des machines sur lesquelles reposent les publicités AMPHTML (par exemple, les analyses pour le suivi de la visibilité ou amp-img pour l'affichage du contenu) ne seront pas disponibles, il est donc préférable de ne pas afficher d'annonce plutôt qu'une annonce défectueuse.

Enfin, le modèle d'annonce AMPHTML utilise amp-a4a-boilerplate plutôt que amp-boilerplate afin que les validateurs puissent facilement l'identifier et générer des messages d'erreur plus précis pour aider les développeurs.

Notez que les mêmes règles concernant les mutations du modèle de texte s'appliquent que dans le modèle AMP général.

CSS

Animations et transitions CSS

Sélecteurs

Les propriétés transition et animation ne sont autorisées que sur les sélecteurs qui:

• Contiennent uniquement les propriétés transition, animation, transform, visibility ou opacity.

Logique: cela permet au runtime AMP de supprimer cette classe du contexte pour désactiver les animations, si nécessaire pour les performances de la page.

Bon

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

Mauvais

Propriété non autorisée dans la classe CSS.

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

Propriétés avec possibilité de transition et d'animation

Les seules propriétés qui acceptent une transition sont l'opacité et la transformation. ( Logique )

Bon

transition: transform 2s;

Mauvais

transition: background-color 2s;

Bon

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

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

Mauvais

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

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

Extensions et fonctions intégrées AMP autorisées

Les modules d'extension AMP et les balises intégrées AMP suivants sont autorisés dans une création publicitaire AMPHTML. Les extensions ou balises intégrées non explicitement répertoriées sont interdites.

• 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, à titre expérimental. Si vous envisagez de l'utiliser, veuillez ouvrir un ticket sur wg-monetization .
• amp-mustache
• amp-pixel
• amp-position-observer
• amp-selector
• amp-social-share
• amp-video

La plupart des omissions sont liées aux performances ou permettent de simplifier l'analyse des publicités AMPHTML.

Exemple: <amp-ad> est omis de cette liste. Cela est explicitement interdit, car autoriser un <amp-ad> dans <amp-ad> pourrait potentiellement entraîner des cascades de chargement d'annonces illimitées, ce qui ne répond pas aux objectifs de performances des annonces AMPHTML.

Exemple: <amp-iframe> est omis de cette liste. Il est interdit car les annonces pourraient l'utiliser pour exécuter du Javascript arbitraire et charger du contenu arbitraire. Les annonces souhaitant utiliser de telles fonctionnalités doivent renvoyer false partir de leur entrée a4aRegistry et utiliser le mécanisme de diffusion d'annonce '3p iframe' existant.

Exemple: <amp-facebook> , <amp-instagram> , <amp-twitter> et <amp-youtube> sont tous omis pour la même raison que <amp-iframe>: ils créent tous des iframes et peuvent potentiellement consommer des ressources illimitées.

Exemple: <amp-ad-network-*-impl> sont omis de cette liste. La balise <amp-ad> gère la délégation à ces balises d'implémentation; les publicités ne doivent pas tenter de les inclure directement.

Exemple: <amp-lightbox> n'est pas encore inclus, car certaines créations publicitaires AMPHTML peuvent même être diffusées dans une iframe et il n'existe actuellement aucun mécanisme permettant à une annonce de se développer au-delà d'une iframe. Si le besoin se fait ressentir, nous pourrons ajouter la prise en charge de cet élément prochainement.

Balises HTML

Les balises suivantes sont  autorisées dans une création publicitaire AMPHTML. Les balises non explicitement autorisées sont interdites. Cette liste est un sous-ensemble de la liste générale des balises AMP autorisées. Comme cette liste, elle est ordonnée conformément aux spécifications HTML5 de la section 4 Les éléments du HTML.

La plupart des omissions sont liées aux performances ou au fait que les balises ne sont pas au standard HTML5. Par exemple, <noscript> est omis car les annonces AMPHTML dépendent de l'activation de JavaScript. Par conséquent, un bloc <noscript> ne s'exécutera jamais et, par conséquent, ne fera que gonfler la publicité, consommer la bande passante et empirer la latence. De même, <acronym>, <big> , et autres sont interdits car ils ne sont pas compatibles HTML5.

4.1 L'élément racine

4.1.1 <html>

• Doit utiliser les types <html ⚡4ads> ou <html amp4ads>

4.2 Métadonnées du document

4.2.1 <head>

4.2.2 <title>

4.2.4 <link>

• Les balises <link rel=...> ne sont pas autorisées, à l'exception de <link rel=stylesheet>.

• Remarque: contrairement à l'AMP général, les balises <link rel="canonical"> sont interdites.

4.2.5 <style> 4.2.6 <meta>

4.3 Sections

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 Regroupement du contenu

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 Sémantique au niveau du texte

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 Modifications

4.6.1 <ins> 4.6.2 <del>

4.7 Contenu intégré

• Le contenu intégré est pris en charge uniquement via les balises AMP, telles que <amp-img> ou <amp-video>.

4.7.4 <source>

4.7.18 SVG

Les balises SVG ne sont pas dans l'espace de noms HTML5. Ils sont répertoriés ci-dessous sans ID de section.

<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 Données tabulaires

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 Formulaires

4.10.8 <button>

4.11 Script

• À l'instar d'un document AMP général, l'élément <head> de la publicité doit contenir une balise <script async src="https://cdn.ampproject.org/amp4ads-v0.js"></script>.
• Contrairement à l'AMP général, <noscript> est interdit.
• Logique: étant donné que les annonces AMPHTML nécessitent l'activation de Javascript pour fonctionner, les blocs <noscript> ne servent à rien dans les annonces AMPHTML et ne font que consommer la bande passante du réseau.
• Contrairement à l'AMP général, <script type="application/ld+json"> est interdit.
• Logique: JSON LD est utilisé pour le balisage des données structurées sur les pages hôtes, mais les créations publicitaires ne sont pas des documents autonomes et ne contiennent pas de données structurées. Les blocs JSON LD qu'ils contiennent ne feraient que consommer la bande passante.
• Toutes les autres règles et exclusions de script et sont tirées de l'AMP général.