AMP

amp-ad

Description

Un contenitore per la visualizzazione di un annuncio.

 

Required Scripts

<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

È probabile che la specifica di amp-ad/amp-embed subirà modifiche significative nel corso del tempo. L'approccio attuale è progettato per eseguire il bootstrap del formato in modo da pubblicare gli annunci.

Descrizione 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.
Script obbligatorio <script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"><
Nota: amp-ad potrebbe continuare a funzionare anche senza questo script, ma lo consigliamo vivamente per questioni di compatibilità futura.
Layout supportati fill, fixed, fixed-height, flex-item, intrinsic, nodisplay, responsive
Esempi Vedi l'esempio amp-ad del sito AMP by Example.

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>
Apri questo frammento in playground

Attributi

type (obbligatorio) Specifica un identificatore per la rete pubblicitaria. L'attributo type seleziona il modello da utilizzare per il tag annuncio.
src (facoltativo) Utilizza questo attributo per caricare un tag script per la rete pubblicitaria specificata. Puoi utilizzarlo per reti pubblicitarie che richiedono l'inserimento di un solo tag script nella pagina. Il valore src deve disporre di un prefisso consentito per la rete pubblicitaria e deve utilizzare il protocollo https.
data-foo-bar La maggior parte delle reti pubblicitarie necessita di un'ulteriore configurazione, che può essere trasmessa alla rete tramite attributi data- HTML. I nomi dei parametri sono soggetti alla conversione standard degli attributi dei dati dai trattini alla notazione a cammello. Ad esempio, "data-foo-bar" viene inviato all'annuncio per la configurazione come "fooBar". Consulta la documentazione relativa alla rete pubblicitaria in cui possono essere utilizzati gli attributi.
data-vars-foo-bar Gli attributi che iniziano con data-vars- sono riservati ad amp-analytics vars.
json (facoltativo) Utilizza questo attributo per trasmettere una configurazione all'annuncio come un oggetto JSON arbitrariamente complesso. In questo modo, l'oggetto verrà trasmesso all'annuncio così com'è, senza alcuna alterazione dei nomi.
data-consent-notification-id (facoltativo) Se fornito, richiede la conferma di amp-user-notification con l'HTML-id specificato fino a quando "ID client AMP" dell'utente (simile a un cookie) non viene trasmesso all'annuncio. Ciò significa che il rendering dell'annuncio viene rimandato fino alla conferma della notifica da parte dell'utente.
data-loading-strategy (facoltativo) Indica all'annuncio di iniziare il caricamento quando si trova entro il numero specificato di aree visibili di distanza da quella attuale. Senza l'attributo data-loading-strategy, tale numero è 3 per impostazione predefinita. Puoi specificare un valore float nell'intervallo [0, 3]. Se il valore non è specificato, viene impostato su 1.25. Utilizza un valore inferiore per ottenere un maggiore grado di visibilità, ossia la probabilità che un annuncio, una volta caricato, venga visto. Così facendo, però, rischierai di generare meno impressioni, ovvero meno annunci caricati. Se specifichi l'attributo ma non il valore, il sistema assegna un valore float, che ottimizza per la visibilità senza avere un impatto eccessivamente negativo sulle impressioni. Tieni presente che, specificando prefer-viewability-over-views come valore, ottimizzerai comunque in modo automatico la visibilità.
data-ad-container-id (facoltativo) Informa l'annuncio dell'ID componente del contenitore nel caso in cui si tenti di comprimere. Il componente del contenitore deve essere un componente <amp-layout> che è un elemento principale rispetto all'annuncio. Quando specifichi data-ad-container-id e viene trovato un componente del contenitore <amp-layout>, il runtime AMP tenterà di comprimere il componente del contenitore anziché il componente dell'annuncio in caso di mancato riempimento. Questa funzione può essere utile quando è presente un indicatore di annunci.
common attributes Questo elemento include attributi comuni estesi ai componenti AMP.

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

Tipi di incorporamenti supportati

Ti servono altre informazioni?

Hai letto questo documento decine di volte ma non risponde a tutte le tue domande? Forse ci sono altre persone col tuo stesso problema: entra in contatto con loro su Stack Overflow.

Vai a Stack Overflow
Hai trovato un bug o una funzione mancante?

Il progetto AMP invita tutti a partecipare e dare il proprio contributo! Ci auguriamo che tu possa partecipare regolarmente alla nostra community open source, ma saremo anche lieti di ricevere eventuali contributi una-tantum sulle questioni che ti interessano.

Vai a GitHub