amp-ad

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

Un contenitore per la visualizzazione di un annuncio. amp-embed è un alias del tag amp-ad, da cui derivano tutte le sue funzionalità con un nome tag diverso. Utilizza amp-embed quando semanticamente è più preciso. I documenti AMP supportano solo annunci/incorporamenti pubblicati tramite HTTPS.

amp-ad / amp-embed

Comportamento

Gli annunci vengono caricati come tutte le altre risorse nei documenti AMP, insieme a uno speciale elemento personalizzato chiamato <amp-ad>. All'interno del documento AMP non è possibile eseguire codice JavaScript fornito da reti pubblicitarie. Invece, il runtime AMP carica un iframe da un'origine diversa (tramite la sandbox iframe) come documento AMP ed esegue il codice JavaScript della rete pubblicitaria all'interno della sandbox iframe.

<amp-ad> richiede che i valori di larghezza e altezza siano specificati in base alla regola del suo tipo di layout. Richiede un argomento type che selezioni quale rete pubblicitaria mostrare. Tutti gli attributi data-* nel tag sono trasmessi automaticamente come argomenti al codice che fa visualizzare l'annuncio. Quali attributi data- sono necessari per un determinato tipo di rete dipende dalla rete pubblicitaria e devono essere specificati.

Esempio: visualizzazione di alcuni annunci

<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>

Attributi

Segnaposto

Facoltativamente, amp-ad può supportare un elemento secondario con l'attributo placeholder. Se supportato dalla rete pubblicitaria, questo elemento viene mostrato finché l'annuncio è disponibile per la visualizzazione. Per ulteriori informazioni, consulta l'articolo relativo a segnaposto e fallback.

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

Nessun annuncio disponibile

Se non è disponibile nessun annuncio per lo slot, AMP tenta di comprimere l'elemento amp-ad (ovvero, viene impostato su display: none). AMP fa in modo che questa operazione venga eseguita senza influire sulla posizione di scorrimento dell'utente. Se l'annuncio si trova nell'area visibile corrente non verrà compresso, in quanto ciò influirebbe sulla posizione di scorrimento dell'utente; tuttavia, se l'annuncio è esterno all'area visibile corrente, verrà compresso.

Nel caso in cui il tentativo di compressione fallisca, il componente amp-ad supporta un elemento secondario con l'attributo fallback. Se è presente un elemento di riserva, viene mostrato l'elemento di riserva personalizzato. In caso contrario, AMP applica un elemento di riserva predefinito.

Esempio con elemento di riserva:

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

Pubblicare annunci video

Sono tre i modi per monetizzare video in AMP con gli annunci video:

1. AMP supporta in modo nativo diversi video player, come BrightCove, DailyMotion e altri in grado di monetizzare gli annunci. Per un elenco completo, consulta i componenti multimediali.

2. Utilizza il componente amp-ima-video che include un SDK IMA incorporato e un video player HTML5

3. Se il tuo video player non è supportato in AMP, puoi pubblicare il tuo video player personalizzato con amp-iframe. Se utilizzi amp-iframe:

   • Assicurati che ci sia un poster se il player viene caricato nella prima area visibile. Ulteriori dettagli.
   • Video e poster devono essere pubblicati tramite HTTPS.

Pubblicare annunci da un dominio personalizzato

AMP supporta il caricamento dell'iframe bootstrap utilizzato per caricare gli annunci da un dominio personalizzato, come il tuo.

Per attivarlo, copia il file remote.html sul tuo server web. In seguito, aggiungi il seguente meta tag ai tuoi file AMP:

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

L'attributo content del meta tag è l'URL assoluto della tua copia del file html remoto sul server web. L'URL deve utilizzare uno schema "https" e non può trovarsi sulla stessa origine dei file AMP. Ad esempio, se i file AMP sono ospitati su www.example.com, l'URL non deve trovarsi su www.example.com ma su something-else.example.com. Consulta le norme relative alle origini di iframe per ulteriori dettagli sulle origini consentite per iframe.

Sicurezza

Convalida i dati in arrivo prima di trasmetterli alla funzione draw3p in modo da assicurarti che il tuo iframe funzioni come previsto. Questo vale in particolare per le reti pubblicitarie che consentono l'inserimento di codice JavaScript personalizzato.

Gli iframe dovrebbero anche far sì che vengano inseriti come iframe solo nelle origini previste. Tali origini sono:

• Le tue origini
• https://cdn.ampproject.org per la cache AMP

Nel caso della cache AMP, devi anche controllare che la "provenienza dell'origine" (l'origine del documento pubblicato da cdn.ampproject.org) sia una delle tue origini.

L'applicazione delle origini può essere effettuata con il terzo argomento di draw3p e deve essere eseguita utilizzando la direttiva allow-from per garantire il supporto completo del browser.

Migliorare la configurazione degli annunci in arrivo

Questa operazione è completamente facoltativa. Potresti voler migliorare la richiesta di annuncio prima che questa venga effettuata all'ad server.

Se la rete pubblicitaria supporta il recupero veloce, utilizza la Configurazione in tempo reale (RTC, Real Time Config); ad esempio, le integrazioni DoubleClick e AdSense supportano entrambe il recupero veloce e la Configurazione in tempo reale.

Se la rete pubblicitaria utilizza il recupero ritardato, puoi trasmettere un callback alla chiamata funzione draw3p all'interno del file remote.html. Il callback riceve la configurazione in entrata come primo argomento, quindi riceve un altro callback come secondo argomento (chiamato done nell'esempio di seguito). Questo callback deve essere chiamato con la configurazione aggiornata affinché la visualizzazione dell'annuncio possa proseguire.

Esempio:

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']);

Stili

Gli elementi <amp-ad> non possono possedere o essere inseriti essi stessi in contenitori impostati su CSS position: fixed, con l'eccezione di amp-lightbox. Ciò è dovuto alle implicazioni UX degli annunci in overlay a pagina intera. È possibile che in futuro si consentano formati di annunci simili all'interno di contenitori controllati da AMP che mantengano determinati elementi UX non modificati.

Convalida

Consulta le regole amp-ad nella specifica dello strumento di convalida AMP.

Reti pubblicitarie supportate

• 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
• Pixel
• 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

Tipi di incorporamenti supportati

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