AMP

amp-auto-ads

Ce composant injecte des annonces de manière dynamique dans une page AMP en utilisant un fichier de configuration diffusé à distance.

DisponibilitéExpérimental
Script requis<script async custom-element="amp-auto-ads" src="https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js"></script>
Mises en page compatiblesN/A

Comportement

Étant donné un nombre suffisant d'emplacements valides (fournis dans la configuration), le composant amp-auto-ads tente d'insérer des annonces supplémentaires, tout en respectant un ensemble de contraintes spécifiées par le réseau publicitaire. Ces contraintes limitent :

  • le nombre total d'annonces pouvant être insérées ;
  • la distance minimale à respecter entre les annonces adjacentes.

En outre, les annonces ne sont insérées que dans les zones de la page qui n'entraînent pas de reflow non autorisé (tel que défini par attemptChangeSize).

La balise <amp-auto-ads> doit être placée comme premier élément enfant de <body>.

Le type de réseau publicitaire et toutes les informations supplémentaires (requises par le réseau publicitaire) doivent être spécifiés dans la balise.

<amp-auto-ads
    type="adsense"
    data-ad-client="ca-pub-5439573510495356">;
  </amp-auto-ads>

Réseaux publicitaires compatibles

Attributs

type (requis)Identifiant du réseau publicitaire.
data-foo-barLa plupart des réseaux publicitaires nécessitent une configuration supplémentaire, qui peut leur être transmise à l'aide d'attributs data- HTML. Les noms des paramètres font l'objet d'une conversion standard des attributs de type "data" avec tiret vers le format camel case. Par exemple, "data-foo-bar" est envoyé à l'annonce sous la forme "fooBar" à des fins de configuration. Consultez la documentation pour savoir sur quel réseau publicitaire les attributs peuvent être utilisés.
common attributesCet élément comprend des attributs communs étendus aux composants AMP.

Spécification de configuration

La configuration définit les zones de la page dans lesquelles le composant <amp-auto-ads> peut placer des annonces. La configuration est extraite d'un réseau publicitaire tiers, à l'URL définie dans ad-network-config.js. La configuration doit être un objet JSON sérialisé correspondant à la définition ConfigObj décrite ci-dessous.

Exemple de configuration

L'exemple suivant indique que l'annonce doit être positionnée immédiatement après tous les éléments <P class='paragraph'> situés dans le troisième élément <DIV id='domId'> de la page. Une annonce qui occupe l'un de ces emplacements doit être de type BANNER, et avoir une marge supérieure de 4 pixels et une marge inférieure de 10 pixels.

{
  "placements": [
    {
      "anchor": {
        "selector": "DIV#domId",
        "index": 2,
        "sub": {
          "selector": "P.paragraph",
          "all": true,
        },
      },
      "pos": 4,
      "type": 1,
      "style": {
        "top_m": 5,
        "bot_m": 10,
      },
    },
  ]
}

Définitions d'objets

ConfigObj

Champs à spécifier dans l'objet de configuration :

Nom du champTypeDescription
placementsTableau<!PlacementObj>Champ obligatoire qui indique les emplacements potentiels où les annonces peuvent être insérées sur la page.
attributesObjet<string, string>Champ facultatif qui spécifie une correspondance entre le nom de l'attribut et les valeurs d'attribut à appliquer à tous les éléments <amp-ad> injectés à l'aide de cette configuration. Seuls les noms d'attributs suivants sont autorisés :
  • type
  • layout
  • data-* (c'est-à-dire tout attribut de données)
adConstraintsAdConstraintsObjChamp facultatif qui spécifie les contraintes à appliquer lors du placement d'annonces sur la page. En l'absence de contraintes définies, amp-auto-ads tente d'utiliser les contraintes par défaut spécifiées dans [ad-network-config.js](0.1/ad-network-config.js).

PlacementObj

Champs à renseigner dans l'objet de configuration placements :

Nom du champTypeDescription
anchorAnchorObjChamp obligatoire qui fournit des informations utilisées pour rechercher les éléments de la page auxquels est ancrée la position de l'emplacement.
posRelativePositionEnumChamp obligatoire qui indique la position de l'emplacement par rapport à son élément d'ancrage.
typePlacementTypeEnumChamp obligatoire qui indique le type d'emplacement.
stylePlacementStyleObjChamp facultatif qui indique le style à appliquer à une annonce insérée à cet emplacement.
attributesObjet<string, string>Champ facultatif permettant de faire correspondre un nom d'attribut à une valeur pour les attributs à appliquer à tous les éléments <amp-ad> injectés à l'aide de cet emplacement. Un attribut spécifié ici remplace tout attribut du même nom qui est également spécifié dans la définition ConfigObj parent. Seuls les noms d'attributs suivants sont autorisés :
  • type
  • layout
  • data-* (c'est-à-dire tout attribut de données)

AnchorObj

Champs à renseigner dans l'objet de configuration anchor :

Nom du champTypeDescription
selectorchaîneChamp obligatoire qui définit un sélecteur CSS pour sélectionner les éléments à ce niveau de la définition d'ancrage.
indexnombreChamp facultatif permettant de spécifier l'index des éléments sélectionnés par le sélecteur auquel ce niveau de la définition d'ancrage doit être limité. Par défaut, la valeur est définie sur 0 (si le champ all est défini sur false).
allbooléenIgnoré si le champ index été spécifié. Si la valeur est définie sur true, tous les éléments sélectionnés par le sélecteur doivent être inclus ; sinon, elle est définie sur false.
min_cnombreChamp facultatif qui spécifie la longueur minimale que la propriété textContent d'un élément doit avoir pour être incluse. La valeur par défaut est 0.
subAnchorObjChamp facultatif indiquant un AnchorObj récursif qui sélectionne des éléments à l'intérieur de tout autre élément sélectionné à ce niveau de définition d'ancrage.

PlacementStyleObj

Champs à spécifier dans l'objet de configuration style :

Nom du champTypeDescription
top_mnombreChamp facultatif qui indique la marge supérieure, en pixels, d'une annonce insérée à cette position. La valeur par défaut est 0.
bot_mnombreChamp facultatif qui indique la marge inférieure, en pixels, d'une annonce insérée à cette position. La valeur par défaut est 0.

RelativePositionEnum

Valeurs ENUM du champ pos dans l'objet de configuration placements :

NomValeurDescription
BEFORE1L'annonce doit être insérée en tant qu'élément frère immédiatement avant l'ancrage.
FIRST_CHILD2L'annonce doit être insérée en tant que premier élément enfant de l'ancrage.
LAST_CHILD3L'annonce doit être insérée en tant que dernier élément enfant de l'ancrage.
AFTER4L'annonce doit être insérée en tant qu'élément frère immédiatement après l'ancrage.

PlacementTypeEnum

Valeurs ENUM du champ type dans l'objet de configuration placements :

NomValeurDescription
BANNER1L'emplacement décrit la position d'une bannière.

AdConstraintsObj

Champs à spécifier dans l'objet de configuration adConstraints :

Nom du champTypeDescription
initialMinSpacingchaîneChamp obligatoire indiquant la distance minimale qu'il doit y avoir entre une annonce et les annonces figurant déjà sur la page (annonces placées manuellement ou placées précédemment par amp-auto-ads) au moment de l'insertion. Les valeurs sont exprimées sous la forme d'un nombre accompagné d'un préfixe d'unité. Par exemple : "10px" correspond à 10 pixels et "0,5vp" correspond à la moitié de la hauteur de la fenêtre d'affichage. Les valeurs négatives ne sont pas autorisées. Les unités acceptées sont les suivantes :
  • px : pixels
  • vp : multiple de la hauteur de la fenêtre d'affichage
Cette valeur s'applique uniquement lorsque le nombre d'annonces déjà présentes sur la page est inférieur à tout sélecteur adCount spécifié dans le champ subsequentMinSpacing.
subsequentMinSpacingTableau<!SubsequentMinSpacingObj>Champ facultatif qui spécifie l'espacement à appliquer entre les annonces en fonction du nombre d'annonces déjà présentes sur la page au moment de l'insertion.
maxAdCountnombreChamp obligatoire qui spécifie le nombre maximal d'annonces que le composant amp-auto-ads peut générer sur une page. Les annonces placées manuellement et celles insérées par amp-auto-ads sont comptabilisées dans ce total. Par exemple, si ce champ est défini sur 5 et que 3 annonces ont été placées manuellement sur la page, le composant amp-auto-ads insérera au maximum deux annonces supplémentaires.

SubsequentMinSpacingObj

Champs à spécifier dans l'objet de configuration subsequentMinSpacing. Les entrées subsequentMinSpacing peuvent être utilisées pour modifier l'espacement requis entre des annonces supplémentaires en fonction du nombre d'annonces déjà présentes sur la page. Prenons l'exemple suivant :

  • La page contient actuellement deux annonces
  • Le champ subsequentMinSpacing est défini comme suit : [ {adCount: 3, spacing: "500px"}, {adCount: 5, spacing: "1000px"}, ]

Au départ, la page contient deux annonces ; il n'y a donc pas de mappage. Par conséquent, l'espacement minimal est défini par défaut sur initialMinSpacing dans l'objet AdConstraints. Le composant amp-auto-ads tente de placer des annonces de manière récursive jusqu'à ce qu'il se trouve à court d'emplacements pouvant être utilisés sans enfreindre la contrainte adContraints. Une fois que le composant amp-auto-ads a placé sa première annonce, la page en comporte trois. Étant donné qu'il existe un mappage pour trois annonces (ou plus) dans le champ subsequentMinSpacing, l'espacement minimal est désormais de 500 px. Comme prévu, cette règle continue de s'appliquer jusqu'au moment où la page comporte cinq annonces. En cas d'insertion de la sixième annonce (ou des annonces suivantes), il faudra la séparer des autres d'au moins 1 000 pixels.

Nom du champTypeDescription
adCountnombreChamp obligatoire. Nombre minimal d'annonces déjà présentes sur la page entraînant l'application de cette règle (en supposant qu'aucune autre règle ne corresponde mieux). Pour obtenir une explication détaillée, consultez la description ci-dessus.
spacingchaîneChamp obligatoire indiquant l'espacement minimal entre les annonces qui s'applique lorsque cette condition est respectée sur la base du champ adCount. Les valeurs sont exprimées sous la forme d'un nombre accompagné d'un préfixe d'unité. Par exemple : "10px" correspond à 10 pixels et "0,5vp" correspond à la moitié de la hauteur de la fenêtre d'affichage. Les valeurs négatives ne sont pas autorisées. Les unités acceptées sont les suivantes :
  • px : pixels
  • vp : multiple de la hauteur de la fenêtre d'affichage

Validation

Consultez les règles relatives à amp-auto-ads dans les spécifications du validateur AMP.

Need more help?

You've read this document a dozen times but it doesn't really cover all of your questions? Maybe other people felt the same: reach out to them on Stack Overflow.

Go to Stack Overflow
Found a bug or missing a feature?

The AMP project strongly encourages your participation and contributions! We hope you'll become an ongoing participant in our open source community but we also welcome one-off contributions for the issues you're particularly passionate about.

Go to GitHub