AMP

amp-auto-ads

Description

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

 

Required Scripts

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

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 compatibles N/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-bar La 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 attributes Cet é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 champ Type Description
placements Tableau<!PlacementObj> Champ obligatoire qui indique les emplacements potentiels où les annonces peuvent être insérées sur la page.
attributes Objet<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)
adConstraints AdConstraintsObj Champ 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 champ Type Description
anchor AnchorObj Champ obligatoire qui fournit des informations utilisées pour rechercher les éléments de la page auxquels est ancrée la position de l'emplacement.
pos RelativePositionEnum Champ obligatoire qui indique la position de l'emplacement par rapport à son élément d'ancrage.
type PlacementTypeEnum Champ obligatoire qui indique le type d'emplacement.
style PlacementStyleObj Champ facultatif qui indique le style à appliquer à une annonce insérée à cet emplacement.
attributes Objet<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 champ Type Description
selector chaîne Champ obligatoire qui définit un sélecteur CSS pour sélectionner les éléments à ce niveau de la définition d'ancrage.
index nombre Champ 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).
all booléen Ignoré 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_c nombre Champ 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.
sub AnchorObj Champ 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 champ Type Description
top_m nombre Champ 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_m nombre Champ 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 :

Nom Valeur Description
BEFORE 1 L'annonce doit être insérée en tant qu'élément frère immédiatement avant l'ancrage.
FIRST_CHILD 2 L'annonce doit être insérée en tant que premier élément enfant de l'ancrage.
LAST_CHILD 3 L'annonce doit être insérée en tant que dernier élément enfant de l'ancrage.
AFTER 4 L'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 :

Nom Valeur Description
BANNER 1 L'emplacement décrit la position d'une bannière.

AdConstraintsObj

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

Nom du champ Type Description
initialMinSpacing chaîne Champ 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.
subsequentMinSpacing Tableau<!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.
maxAdCount nombre Champ 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 champ Type Description
adCount nombre Champ 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.
spacing chaîne Champ 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.

Besoin d'une aide supplémentaire ?

Vous avez lu ce document une douzaine de fois mais il ne répond pas à toutes vos questions ? D'autres personnes ont peut-être eu le même sentiment. Contactez-les sur Stack Overflow.

Se rendre sur Stack Overflow
Vous avez trouvé un bug ou une fonctionnalité manquante ?

Le projet AMP encourage fortement votre participation et vos contributions ! Nous espérons que vous deviendrez un membre régulier de notre communauté open source, mais nous serons également ravis de recevoir des contributions ponctuelles concernant les questions qui vous intéressent particulièrement.

Se rendre sur GitHub