AMP

amp-ad

Description

Conteneur permettant de diffuser une annonce.

 

Required Scripts

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

Il s'agit d'un conteneur permettant de diffuser une annonce. amp-embed est un alias de la balise amp-ad, dont toutes les fonctionnalités sont obtenues avec un nom de balise différent. Utilisez amp-embed lorsque cela s'avère plus précis d'un point de vue sémantique. Les documents AMP acceptent uniquement les annonces/éléments intégrés diffusés via HTTPS.

amp-ad / amp-embed

La spécification du composant amp-ad/amp-embed est susceptible d'évoluer considérablement au fil du temps. La méthode actuelle consiste à amorcer le format pour qu'il soit possible de diffuser des annonces.

Description Il s'agit d'un conteneur permettant de diffuser une annonce. amp-embed est un alias de la balise amp-ad, dont toutes les fonctionnalités sont obtenues avec un nom de balise différent. Utilisez amp-embed lorsque cela s'avère plus précis d'un point de vue sémantique. Les documents AMP acceptent uniquement les annonces/éléments intégrés diffusés via HTTPS.
Script requis <script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"><
Remarque : amp-ad peut fonctionner sans ce script, mais son utilisation est vivement conseillée pour une compatibilité future.
Mises en page compatibles fill, fixed, fixed-height, flex-item, intrinsic, nodisplay, responsive
Exemples Consultez l'exemple de composant amp-ad sur AMP By Example.

Comportement

Les annonces sont chargées comme toutes les autres ressources dans les documents AMP, avec un élément personnalisé spécial appelé <amp-ad>. Aucun code JavaScript fourni par un réseau publicitaire ne peut être exécuté dans le document AMP. À la place, l'exécution AMP charge un iFrame d'une autre origine (via le bac à sable iFrame) et exécute le code JavaScript du réseau publicitaire dans ce bac à sable iFrame.

L'élément <amp-ad> exige que les valeurs de hauteur et de largeur soient spécifiées conformément à la règle relative à son type de mise en page. Il nécessite un argument type qui sélectionne le réseau publicitaire à afficher. Tous les attributs data-* de la balise sont automatiquement transmis, en tant qu'arguments, au code qui diffuse finalement l'annonce. Les attributs data- requis pour un type de réseau publicitaire donné dépendent de ce dernier et doivent être documentés avec celui-ci.

Exemple : Diffusion de quelques annonces

<amp-ad type="a9"
  data-amzn_assoc_ad_mode="auto"
  data-divid="amzn-assoc-ad-fe746097-f142-4f8d-8dfb-45ec747632e5"
  data-recomtype="async"
  data-adinstanceid="fe746097-f142-4f8d-8dfb-45ec747632e5"
    width="300"
    height="250"
    data-aax_size="300x250"
    data-aax_pubname="test123"
    data-aax_src="302">
  </amp-ad>
  <amp-ad width="300"
    height="250"
    type="industrybrains"
    data-width="300"
    data-height="250"
    data-cid="19626-3798936394">
  </amp-ad>
  <amp-embed type="taboola"
    width="400"
    height="300"
    layout="responsive"
    data-publisher="amp-demo"
    data-mode="thumbnails-a"
    data-placement="Ads Example"
    data-article="auto">
  </amp-embed>
Ouvrir cet extrait dans le playground

Attributs

type (requis) Indique un identifiant pour le réseau publicitaire. L'attribut type sélectionne le modèle à utiliser pour le tag d'emplacement publicitaire.
src (facultatif) Utilisez cet attribut afin de charger un tag de script pour le réseau publicitaire spécifié. Vous pouvez utiliser cet attribut pour les réseaux publicitaires qui nécessitent l'insertion d'un seul tag de script dans la page. La valeur src doit avoir un préfixe placé sur liste blanche pour le réseau publicitaire spécifié, et le protocole https doit être utilisé.
data-foo-bar Pour la plupart des réseaux publicitaires, une configuration supplémentaire s'avère nécessaire. Celle-ci peut être transmise au réseau en utilisant des 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.
data-vars-foo-bar Les attributs commençant par data-vars- sont réservés pour les variables amp-analytics.
json (facultatif) Utilisez cet attribut pour transmettre une configuration à l'annonce en tant qu'objet JSON arbitraire complexe. L'objet est transmis à l'annonce en l'état, sans aucune modification au niveau des noms.
data-consent-notification-id (facultatif) Si cet attribut est fourni, le composant amp-user-notification doit être confirmé avec l'identifiant HTML donné jusqu'à ce que l'identifiant client AMP de l'utilisateur (semblable à un cookie) soit transmis à l'annonce. Cela signifie que le rendu de l'annonce est retardé jusqu'à ce que l'utilisateur confirme la notification.
data-loading-strategy (facultatif) Cet attribut indique de commencer le chargement de l'annonce lorsque celle-ci est éloignée du nombre de fenêtres d'affichage indiqué de la fenêtre d'affichage en cours. En l'absence de l'attribut data-loading-strategy, le nombre 3 est utilisé par défaut. Vous pouvez spécifier une valeur flottante dans la plage [0, 3]. Si la valeur n'est pas spécifiée, elle est définie sur 1,25. Utilisez une valeur inférieure pour obtenir un niveau de visibilité plus élevé (autrement dit, vous augmentez la probabilité qu'une annonce soit vue une fois qu'elle a été chargée), avec toutefois le risque de générer moins d'impressions (en d'autres termes, moins d'annonces sont chargées). Si l'attribut est spécifié, mais qu'aucune valeur n'est renseignée, le système attribue une valeur flottante, ce qui optimise la visibilité, sans que cela n'ait d'incidence significative sur les impressions. Notez également que la valeur prefer-viewability-over-views optimise automatiquement la visibilité.
data-ad-container-id (facultatif) Indique à l'annonce l'identifiant du composant de conteneur en cas de tentative de réduction. Le composant de conteneur doit être un composant <amp-layout> parent de l'annonce. Lorsque l'attribut data-ad-container-id est spécifié, et qu'un composant de conteneur <amp-layout> est trouvé, l'exécution AMP tente de réduire ce dernier au lieu du composant d'annonce en cas de réponse vide du serveur. Cette fonctionnalité peut s'avérer utile lorsqu'un indicateur d'annonce est présent.
common attributes Cet élément inclut des attributs communs étendus aux composants AMP.

Espace réservé

Le composant amp-ad peut, si nécessaire, accepter un élément enfant avec l'attribut placeholder. Si le réseau publicitaire le permet, cet élément reste affiché jusqu'à ce que l'annonce soit disponible pour consultation. Pour en savoir plus, consultez la section Espaces réservés et créations de remplacement.

<amp-ad width=300 height=250
    type="foo">
    <div placeholder>Loading ...</div>
</amp-ad>

Aucune annonce disponible

Si aucune annonce n'est disponible pour l'espace publicitaire, AMP tente de réduire l'élément amp-ad (c'est-à-dire de définir display: none). AMP détermine que cette opération peut être effectuée sans affecter la position de défilement de l'utilisateur. Si l'annonce se trouve dans la fenêtre d'affichage ouverte, elle n'est pas réduite, car cela affecterait la position de défilement de l'utilisateur. En revanche, elle est réduite si elle se trouve en dehors de cette fenêtre.

Si la tentative de réduction échoue, le composant amp-ad accepte un élément enfant avec l'attribut fallback. Si un élément de remplacement personnalisé est présent, il est affiché. Dans le cas contraire, AMP applique une création de remplacement par défaut.

Exemple avec création de remplacement :

<amp-ad width=300 height=250 type="foo">
  <div fallback>No ad for you</div>
</amp-ad>

Diffuser des annonces vidéo

Il existe trois méthodes permettant de monétiser des vidéos dans AMP avec des annonces vidéo :

  1. AMP est compatible, en mode natif, avec plusieurs lecteurs vidéo (BrightCove, DailyMotion, etc.) permettant de monétiser des annonces. Pour obtenir la liste complète, consultez les composants multimédias.

  2. Utilisez le composant amp-ima-video fourni avec le SDK IMA et le lecteur vidéo HTML5 intégrés.

  3. Si vous utilisez un lecteur vidéo non compatible avec AMP, vous pouvez diffuser votre lecteur personnalisé à l'aide du composant amp-iframe. Si vous optez pour la méthode amp-iframe :

    • Assurez-vous qu'il existe un élément poster en cas de chargement du lecteur dans la première fenêtre d'affichage. Détails.
    • La vidéo et l'élément poster doivent être diffusés via HTTPS.

Diffuser des annonces à partir d'un domaine personnalisé

AMP accepte le chargement de l'iFrame d'amorce utilisé pour charger les annonces à partir d'un domaine personnalisé (votre propre domaine, par exemple).

Pour l'activer, copiez le fichier remote.html sur votre serveur Web. Ensuite, ajoutez la balise Meta suivante à votre ou vos fichiers AMP :

<meta name="amp-3p-iframe-src" content="https://assets.your-domain.com/path/to/remote.html">

L'attribut content de la balise Meta correspond à l'URL absolue de votre copie du fichier remote.html sur votre serveur Web. Cette URL doit utiliser un schéma "https". Elle ne peut pas résider sur la même origine que vos fichiers AMP. Par exemple, si vous hébergez des fichiers AMP sur www.example.com, cette URL ne peut pas se trouver à cet emplacement www.example.com. En revanche, une adresse du type something-else.example.com est acceptée. Pour plus d'informations sur les origines autorisées pour les cadres iFrame, reportez-vous à la section traitant des règles relatives aux origines des cadres iFrame.

Sécurité

Validez les données entrantes avant de les transmettre à la fonction draw3p, et ce, pour vous assurer que votre iFrame effectue uniquement les actions pour lesquelles il est prévu. Cela vaut tout particulièrement pour les réseaux publicitaires qui autorisent l'injection JavaScript personnalisée.

Notez également que les cadres iFrame doivent uniquement être encadrés dans les origines pour lesquelles ils ont été prévus. Les origines sont les suivantes :

  • Vos propres origines
  • https://cdn.ampproject.org pour le cache AMP

Dans le cas du cache AMP, vous devez également vérifier que l'"origine source" (l'origine du document diffusé par cdn.ampproject.org) fait partie de vos origines.

Pour appliquer les origines, le troisième argument de la fonction draw3p peut être utilisé. Il convient, en outre, d'utiliser la directive allow-from pour disposer d'une compatibilité totale avec le navigateur.

Améliorer la configuration entrante des annonces

Cette opération est totalement facultative. Parfois, il est souhaitable d'améliorer la demande d'annonce avant de la transmettre au serveur publicitaire.

Si votre réseau publicitaire est compatible avec la récupération rapide, veuillez utiliser RTC (Real Time Config) (les intégrations DoubleClick et AdSense, par exemple, sont toutes deux compatibles avec la récupération rapide et RTC).

Si la récupération retardée est utilisée sur votre réseau publicitaire, vous pouvez transmettre un rappel à la fonction draw3p dans le fichier remote.html. Le rappel reçoit la configuration entrante en tant que premier argument, puis reçoit un autre rappel en tant que deuxième argument (appelé done dans l'exemple ci-dessous). Ce rappel doit être appelé avec la configuration mise à jour pour que le rendu de l'annonce puisse avoir lieu.

Exemple :

draw3p(function(config, done) {
  config.targeting = Math.random() > 0.5 ? 'sport' : 'fashion';
  // Don't actually call setTimeout here. This should only serve as an
  // example that is OK to call the done callback asynchronously.
  setTimeout(function() {
    done(config);
  }, 100)
}, ['allowed-ad-type'], ['your-domain.com']);

Application d'un style

Les éléments <amp-ad> proprement dits ne peuvent pas comporter de conteneurs dont le code CSS position: fixed est défini, ni être placés à l'intérieur de ces conteneurs (à l'exception de amp-lightbox). Cela est dû aux implications que les annonces en superposition pleine page peuvent avoir sur l'expérience utilisateur. À l'avenir, il est possible que des formats d'annonce semblables soient autorisés à l'intérieur de conteneurs contrôlés par AMP afin de conserver certaines caractéristiques constantes de l'expérience utilisateur.

Validation

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

Réseaux publicitaires compatibles

Types d'éléments intégrés compatibles

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