amp-ad

<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

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>

Attributs

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

• A8
• A9
• AccessTrade
• Adblade
• AdButler
• Adform
• Adfox
• Ad Generation
• Adhese
• Adincube
• ADITION
• Adman
• AdmanMedia
• Admixer
• AdOcean
• AdPicker
• AdPlugg
• Adpon
• AdReactor
• AdSense
• AdSensor
• AdsNative
• AdSpeed
• AdSpirit
• AdStir
• AdTech
• AdThrive
• AdUnity
• Ad Up Technology
• Adventive
• Adverline
• Adverticum
• AdvertServe
• Adyoulike
• Affiliate-B
• AJA
• AMoAd
• AppNexus
• AppVador
• Atomx
• Baidu
• BeOpinion
• Bidtellect
• brainy
• Broadstreet Ads
• CA A.J.A. Infeed
• CA-ProFit-X
• Cedato
• Chargeads
• Colombia
• Connatix
• Content.ad
• Criteo
• CSA
• CxenseDisplay
• Dianomi
• Directadvert
• DistroScale
• Dot and Media
• DoubleClick
• eADV
• Epeex
• E-Planning
• Ezoic
• Felmat
• FlexOneELEPHANT
• FlexOneHARRIER
• Flite
• fluct
• FreeWheel
• Fusion
• GenieeSSP
• Giraff
• GMOSSP
• GumGum
• Holder
• I-Mobile
• Imonomy
• iBillboard
• Imedia
• Improve Digital
• Index Exchange
• Industrybrains
• InMobi
• Innity
• Kargo
• Kiosked
• Kixer
• Kuadio
• Ligatus
• LockerDome
• LOKA
• MADS
• MANTIS
• Media.net
• MediaImpact
• Mediavine
• Medyanet
• Meg
• MicroAd
• MixiMedia
• Mixpo
• Monetizer101
• mox
• myTarget
• myWidget
• Nativo
• Navegg
• Nend
• NETLETIX
• Noddus
• Nokta
• OneAD
• OnNetwork
• Open AdStream (OAS)
• OpenX
• Pixels
• plista
• polymorphicAds
• popin
• Pressboard
• PromoteIQ
• PubGuru
• PubMatic
• Pubmine
• PulsePoint
• Purch
• Rambler&Co
• RbInfoxSg
• Realclick
• recomAD
• Red for Publishers
• Relap
• Revcontent
• RevJet
• Rubicon Project
• RUNative
• SAS CI 360 Match
• Sekindo
• Sharethrough
• Sklik
• SlimCut Media
• Smart AdServer
• smartclip
• sogou Ad
• Sortable
• SOVRN
• Speakol
• SpotX
• SunMedia
• Swoop
• TcsEmotion
• Teads
• torimochi
• TripleLift
• Trugaze
• UZOU
• ValueCommerce
• video intelligence
• Videonow
• Viralize
• UAS
• ucfunnel
• Unruly
• VMFive
• Webediads
• Weborama
• Widespace
• Wisteria
• WPMedia
• Xlift
• Yahoo
• YahooJP
• Yandex
• Yengo
• Yieldbot
• Yieldmo
• Yieldone
• Yieldpro
• Zedo
• Zucks

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

• 24smi
• Bringhub
• Dable
• Engageya
• Epeex
• Insticator
• Jubna
• Outbrain
• Postquare
• PubExchange
• Smi2
• Taboola
• Zen
• ZergNet