Important: this documentation is not applicable to your currently selected format stories!
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 :
|
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 :
|
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 :
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 :
|
Validation
Consultez les règles relatives à amp-auto-ads dans les spécifications du validateur AMP.
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