Apri lo spazio

Guida all'implementazione

Annunci nelle pagine AMP

AMP ads (amp-ad, amp-auto-ads, amp-sticky-ad)

Come mostrare annunci nelle pagine AMP con amp-ad, annunci automatici e banner fisso, in AdSense e in Ad Manager.

  • AdSense
  • Ad Manager
  • smartphone e desktop (nelle pagine AMP)
Scopri il formatoControlla sul mio sito
Desktop
Cellulare

Capirlo in 1 minuto

Cosa sono gli annunci nelle pagine AMP

AMP è un modo di costruire pagine molto leggere e veloci, nato come progetto aperto. Immagina un portamerenda con gli scomparti: ogni cosa ha il suo angolino e non si può buttare dentro qualsiasi cosa. In una pagina AMP è lo stesso. Non puoi incollare un codice pubblicitario qualsiasi. Usi invece pezzi pronti, chiamati componenti, che sanno già richiedere e mostrare annunci senza appesantire la pagina.

Sono tre pezzi principali. L'amp-ad è lo spazio pubblicitario normale, come un banner: indichi il tipo di rete, adsense per AdSense o doubleclick per Ad Manager, e indichi larghezza e altezza. L'amp-auto-ads è la modalità automatica: riceve una configurazione dalla rete e sceglie da solo dove mettere gli annunci, rispettando un numero massimo e una distanza minima tra loro. L'amp-sticky-ad è la fascia fissa nella parte bassa dello schermo, come un'ancora, e ha un pulsante di chiusura.

Il codice della rete pubblicitaria non gira direttamente nella pagina. Gira in un riquadro separato, chiamato iframe, che AMP stesso controlla. Se non arriva nessun annuncio, AMP prova a nascondere lo spazio vuoto, ma non nasconde uno spazio che è sullo schermo, perché la pagina non salti. Gli annunci AMP non possono nemmeno stare dentro contenitori con posizione fissa, tranne gli annunci fissi propri di AMP e l'amp-lightbox.

Google spiega che l'AMP è un progetto aperto che punta a pagine veloci e con buone prestazioni su qualsiasi dispositivo. In AdSense, crei un'unità pubblicitaria e scegli il codice AMP, oppure attivi gli Annunci automatici per AMP. In Ad Manager, generi i tag AMP direttamente nel pannello, e Google consiglia di usare annunci HTML per AMP. Conviene usarlo se il tuo sito ha già versioni AMP delle pagine e vuoi che mostrino annunci anche loro.

Passo passo

Come implementare

  1. Carica i componenti nell'headMetti nell'head della pagina AMP lo script di amp-ad. Se usi annunci automatici o la fascia fissa, metti anche gli script di amp-auto-ads e amp-sticky-ad.
  2. AdSense: crea un blocco AMPIn AdSense, clicca su Annunci, Per unità pubblicitaria e Annunci display. Dai un nome, lascia Responsive, clicca su Salva e ottieni il codice e clicca su AMP. Lo script va nell'head e il codice dell'annuncio va nel body.
  3. AdSense: attiva gli automatici per AMPIn Annunci, clicca su Hai un sito AMP?, attiva Annunci automatici per AMP e clicca su Ottieni il codice AMP. Incolla lo script nell'head e il codice subito dopo l'apertura del body di ogni pagina. Poi clicca su Fine e Applica.
  4. Ad Manager: genera il tag AMPClicca su Inventario e poi su Unità pubblicitarie, apri l'unità e vai nella scheda Tag. Scegli Tag AMP e clicca su Continua. Seleziona Segnaposto AMP per includere lo spazio riservato e gli annunci di riserva, e scegli le dimensioni dell'unità.
  5. Collega la pagina AMP a quella normaleNella pagina normale, indica la versione AMP con il markup amphtml. Nella pagina AMP, indica di nuovo quella normale con il markup canonical.
  6. Aspetta e controllaGli annunci possono impiegare alcuni minuti e, a volte, fino a un'ora per comparire.

Esempio implementato

Il codice e come appare sullo schermo

Gli script dei componenti vanno nell'head; l'amp-auto-ads va subito dopo l'apertura del body, e gli altri annunci vanno nel body, dove devono comparire.
<!-- No <head> da página AMP -->
<script async custom-element="amp-ad"
  src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
<script async custom-element="amp-auto-ads"
  src="https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js"></script>
<script async custom-element="amp-sticky-ad"
  src="https://cdn.ampproject.org/v0/amp-sticky-ad-1.0.js"></script>

<body>
  <!-- AdSense: anúncios automáticos, logo depois de abrir o body -->
  <amp-auto-ads type="adsense"
    data-ad-client="ca-pub-0000000000000000">
  </amp-auto-ads>

  <!-- AdSense: bloco responsivo, onde o anúncio deve aparecer -->
  <amp-ad width="100vw" height="320"
    type="adsense"
    data-ad-client="ca-pub-0000000000000000"
    data-ad-slot="1234567890"
    data-auto-format="rspv"
    data-full-width>
    <div overflow></div>
  </amp-ad>

  <!-- Ad Manager: faixa fixa embaixo (só uma por página) -->
  <amp-sticky-ad layout="nodisplay">
    <amp-ad width="320" height="50"
      type="doubleclick"
      data-slot="/1234567/exemplo">
    </amp-ad>
  </amp-sticky-ad>
</body>
Su desktopL'amp-ad occupa lo spazio con la larghezza e l'altezza definite, come un banner normale. La fascia fissa dell'amp-sticky-ad resta ferma in basso, a tutta larghezza e con un'altezza massima di 100 pixel.
Su smartphoneIl blocco responsive di AdSense occupa la larghezza dello schermo. La fascia fissa sta in basso, può essere chiusa, e quando si arriva in fondo alla pagina AMP lascia uno spazio extra perché non copra il contenuto.

Cosa indica Google

Cosa si può e non si può fare

Consentito

  • Usare l'amp-ad con il tipo adsense o doubleclick, indicando larghezza e altezza.
  • Usare blocchi responsive di AdSense, che Google consiglia di lasciare selezionati.
  • Usare l'amp-auto-ads con AdSense e disattivare, nel pannello, i formati che non vuoi nelle pagine AMP.
  • Avere una fascia fissa amp-sticky-ad per pagina, con un solo amp-ad dentro.
  • Mostrare uno spazio riservato mentre l'annuncio si carica e un sostituto quando non arriva.
  • In Ad Manager, aggiornare gli annunci AMP che usano Fast Fetch, con intervallo minimo di 30 secondi.

Non consentito

  • Mettere l'amp-ad dentro contenitori con posizione fissa, tranne gli annunci fissi e l'amp-lightbox.
  • Avere più di un amp-sticky-ad nella stessa pagina.
  • Usare uno sfondo trasparente o semitrasparente nella fascia fissa. AMP lo sostituisce con un colore pieno.
  • Servire annunci o embed senza HTTPS.
  • In Ad Manager, attivare l'aggiornamento insieme alla richiesta singola (SRA). L'aggiornamento viene disattivato e compare un errore.
  • Usare l'amp-ad direttamente in una Web Story. Le Web Stories usano l'amp-story-auto-ads.

Consigli

Per farlo nel modo giusto

Attenzione

Errori comuni

Script fuori dall'head

Lo script di ogni componente va nell'head, e l'annuncio va nel body. Senza lo script giusto, il componente non funziona.

Copiare il codice di esempio

AdSense fornisce il codice AMP già pronto quando scegli l'opzione AMP. Copia il codice dal tuo account, con il tuo ID publisher.

Fascia fissa montata male

L'amp-sticky-ad richiede il layout nodisplay e un solo amp-ad al suo interno.

Pagina AMP isolata

AdSense chiede che la pagina normale e la pagina AMP si indichino a vicenda, con i markup amphtml e canonical.

Domande frequenti

Posso usare il normale codice di AdSense in una pagina AMP?

Usa il codice AMP. Nelle pagine AMP, il JavaScript della rete pubblicitaria non gira direttamente nella pagina, ma in un iframe controllato da AMP.

Cosa succede se non arriva nessun annuncio?

AMP prova a nascondere lo spazio. Se non ci riesce, mostra il sostituto. La fascia fissa senza annuncio non compare.

Ad Manager aggiorna gli annunci in AMP?

Sì, negli annunci con Fast Fetch. Metti un markup nell'head con l'intervallo, di almeno 30 secondi, per pagina o per slot. Non funziona insieme a SRA.

Quanto tempo ci vuole perché compaiano gli annunci?

In genere alcuni minuti, e a volte fino a un'ora.

Biblioteca

Fonte ufficiale di Google

Tutto in questa pagina segue la documentazione ufficiale di Google. Leggila direttamente alla fonte:

Il tuo sito usa questo formato nel modo giusto?

L'audit legge il sito come un visitatore, senza cliccare su nulla, e mostra cosa correggere.

Avvia un audit