AMP

Spécification AMP pour les annonces

Important: this documentation is not applicable to your currently selected format websites!

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:

Règle Logique
Doit utiliser les types <html ⚡4ads> ou <html amp4ads> comme ses balises englobantes. Permet aux validateurs d'identifier un document publicitaire en tant que document AMP général ou en tant que document publicitaire AMPHTML restreint et de l'envoyer en conséquence.
Doit inclure <script async src="https://cdn.ampproject.org/amp4ads-v0.js"> comme script d'exécution au lieu de https://cdn.ampproject.org/v0.js. Permet des comportements d'exécution personnalisés pour les annonces AMP HTML diffusées dans des iframes d'origine croisée.
Ne doit pas inclure une balise Ne doit pas inclure une balise <link rel="canonical">. Les créations publicitaires n'ont pas de « version canonique non AMP » et ne seront pas indexées de manière indépendante par la recherche. L'auto-référencement serait donc inutile.
Peut inclure des métabalises facultatives dans l'en-tête HTML comme identifiants, au format <meta name="amp4ads-id" content="vendor=${vendor},type=${type},id=${id}">. Ces métabalises doivent être placées avant le script amp4ads-v0.js. Les valeurs de vendor et id sont des chaînes de caractères contenant uniquement [0-9a-zA-Z_-]. La valeur de type est soit creative-id soit impression-id. Ces identificateurs personnalisés peuvent être utilisés pour identifier l'impression ou la publicité. Ils peuvent être utiles pour le signalement et le débogage.

Exemple:

<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> le suivi de la visibilité ne peut cibler que le sélecteur d'annonces complètes, via "visibilitySpec": {"selector": "amp-ad" } tel que défini dans Ticket #4018 et PR #4368. En particulier, il ne doit pas cibler de sélecteurs des éléments de la création publicitaire. Dans certains cas, les annonces AMPHTML peuvent choisir de diffuser une publicité dans une iframe, auquel cas l'analyse de la page cible ne peut cibler que l'iframe entière de toute façon, et n'aura pas accès à des sélecteurs plus fins.

Exemple:

<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>

Cette configuration envoie une requête à l'URL https://example.com/nestedAmpAnalytics lorsque 50% de l'annonce englobante a été continuellement visible à l'écran pendant 1 seconde.

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

Règle Logique
position:fixed et position:sticky sont interdites dans un CSS de publicité. position:fixed crée une rupture avec le shadow DOM dont dépendent les annonces AMPHTML. De plus, les annonces dans AMP ne sont déjà pas autorisées à utiliser une position fixe.
touch-action est interdite. Une annonce qui peut manipuler touch-action peut interférer avec la capacité de l'utilisateur à faire défiler le document hôte.
Le CSS de publicité est limité à 20 000 octets. Les gros blocs CSS gonflent la publicité, augmentent la latence du réseau et dégradent les performances de la page.
Les transitions et animation sont soumises à des restrictions supplémentaires. AMP doit pouvoir contrôler toutes les animations appartenant à une annonce, afin de pouvoir les arrêter lorsque l'annonce n'est pas à l'écran ou que les ressources système sont très faibles.
Les préfixes spécifiques au fournisseur sont considérés comme des alias pour le même symbole sans le préfixe à des fins de validation. Cela signifie que si un symbole foo est interdit par les règles de validation CSS, alors le symbole -vendor-foo sera également interdit. Certaines propriétés préfixées par le fournisseur fournissent des fonctionnalités équivalentes à des propriétés qui sont autrement interdites ou contraintes en vertu de ces règles.

Exemple: -webkit-transition et -moz-transition sont tous deux considérés comme des alias de transition. Ils ne seront autorisés que dans des contextes où transition seul serait autorisé (voir la section Sélecteurs ci-dessous).

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.

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.