Guida all'implementazione

Banner di Ad Manager

Display ad slots (Google Publisher Tag)

Lo spazio pubblicitario classico di Ad Manager, creato con la Google Publisher Tag, con dimensione fissa, più dimensioni o responsive.

Ad Manager
mobile e desktop

Scopri il formato Controlla sul mio sito

Desktop

Cellulare

Capirlo in 1 minuto

Cos'è il banner di Ad Manager

Il banner di Ad Manager è quel rettangolo pubblicitario che sta fermo dentro la pagina: in mezzo al testo, in alto o di lato. Pensa a un manifesto appeso al muro della scuola. Ha un posto preciso e una dimensione precisa, e tutti quelli che passano di lì possono vederlo. In Ad Manager, questo posto riservato si chiama slot, che è semplicemente la parola inglese per spazio pubblicitario. A richiedere e mostrare l'annuncio in questo spazio è GPT, sigla di Google Publisher Tag, una libreria di codice di Google che metti sul sito.

Funziona così: prima dici alla GPT quale unità pubblicitaria di Ad Manager userai, quali dimensioni ci stanno e in quale scatolina della pagina deve comparire. Questa scatolina è una div, un pezzo di HTML con un nome univoco. Poi la GPT richiede l'annuncio e lo disegna dentro la scatolina. Il nome della scatolina deve essere uguale nei due posti. Se non lo è, l'annuncio non compare. Lo stesso Google dice di controllare questo quando l'annuncio non compare.

La dimensione può essere scelta in tre modi. Con la dimensione fissa, entrano solo annunci di quella misura, come 300 per 250. Con più dimensioni, elenchi varie misure e Ad Manager può sceglierne una qualsiasi. Con il responsive, costruisci una tabella chiamata mappatura delle dimensioni, che dice quali misure valgono per ogni larghezza di schermo: un elenco per gli schermi grandi e un altro per quelli piccoli. Esiste poi la dimensione fluida, che si allarga alla larghezza della pagina, ma Google spiega che oggi è usata solo per gli annunci nativi.

Google ha creato questo modo di lavorare perché il sito abbia il controllo: decidi dove vive ogni annuncio, quali dimensioni accetta e quando si carica. La documentazione insegna a far caricare gli annunci in fondo alla pagina solo quando la persona si avvicina, il che si chiama caricamento lento. Spiega anche come aggiornare un annuncio senza ricaricare l'intera pagina, seguendo regole di tempo e di dichiarazione. Il banner conviene quando hai già un account Ad Manager e vuoi scegliere con cura il posto e la dimensione di ogni spazio.

Passo passo

Come implementare

Genera il tag in Ad ManagerIn Ad Manager, clicca su Inventario e poi su Unità pubblicitarie. Apri l'unità, vai nella scheda Tag, scegli Google Publisher Tag (GPT) e clicca su Continua. Fai le altre scelte e copia i tag in Risultati dei tag.
Carica GPT nell'headMetti lo script di GPT dentro la parte head della pagina. È lui che porta sul sito gli strumenti pubblicitari di Google.
Definisci lo slotSempre nell'head, indica a GPT il percorso del blocco di annunci, le dimensioni accettate e il nome del div. Se vuoi uno slot responsive, aggiungi una mappatura delle dimensioni. Alla fine, attiva il servizio pubblicitario.
Crea il div con lo spazio riservatoNel body, crea il div con lo stesso nome usato nella definizione. Dagli altezza e larghezza nel CSS, pensando all'annuncio più grande, perché nulla salti sullo schermo quando arriva l'annuncio.
Richiedi l'annuncioSubito dopo la div, richiama la visualizzazione con il nome della div. Perché compaiano annunci del tuo inventario, serve un elemento pubblicitario attivo con stato Pronto.
Caricamento lento e aggiornamentoSe vuoi, attiva il caricamento lento per gli spazi in fondo alla pagina. Se aggiornerai gli annunci, dichiaralo in Ad Manager in Inventario, Regole dell'inventario, Dichiarazioni dell'editore, e usa la stessa regola nella pagina.

Esempio implementato

Il codice e come appare sullo schermo

GPT e la definizione dello slot vanno nell'head; il div con la chiamata di visualizzazione va nel body, nel punto in cui il banner deve comparire.

<!-- No <head> -->
<script async
  src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"
  crossorigin="anonymous"></script>
<script>
  window.googletag = window.googletag || { cmd: [] };
  googletag.cmd.push(() => {
    // Tamanhos por largura de tela (slot responsivo).
    const mapping = googletag
      .sizeMapping()
      .addSize([1024, 768], [[728, 90], [300, 250]])
      .addSize([0, 0], [300, 250])
      .build();

    googletag
      .defineSlot(
        "/1234567/exemplo",
        [[728, 90], [300, 250]],
        "banner-exemplo",
      )
      .defineSizeMapping(mapping)
      .addService(googletag.pubads());

    // Carregamento lento para espaços longe da tela.
    googletag.setConfig({
      lazyLoad: {
        fetchMarginPercent: 500,
        renderMarginPercent: 200,
        mobileScaling: 2.0,
      },
    });

    googletag.enableServices();
  });
</script>

<!-- No <body>, onde o anúncio deve aparecer -->
<div id="banner-exemplo" style="min-height: 250px;"></div>
<script>
  googletag.cmd.push(() => {
    googletag.display("banner-exemplo");
  });
</script>

Su desktopCompare come un rettangolo fermo nel posto che hai scelto, per esempio 728 per 90 o 300 per 250. Scorre insieme alla pagina, come qualsiasi parte del testo.

Su smartphoneCompare in mezzo al contenuto, in misure che stanno nello schermo, come 300 per 250. Con la mappatura delle dimensioni, lo smartphone riceve solo le misure che hai consentito per gli schermi piccoli.

Cosa indica Google

Cosa si può e non si può fare

Consentito

Definire una dimensione fissa, un elenco di più dimensioni o una mappatura delle dimensioni per larghezza di schermo.
Riservare nel CSS lo spazio della dimensione più grande che può comparire. Google dice che è il modo più efficace per evitare che la pagina salti.
Definire nell'head gli spazi che compaiono subito, perché abbiano la priorità.
Usare il caricamento lento negli spazi sotto la piega, che compaiono solo quando la persona scorre la pagina.
Aggiornare gli annunci con la funzione di aggiornamento di GPT, invece di ricaricare l'intera pagina, purché l'aggiornamento sia dichiarato in Ad Manager.
Aggiornare su azione della persona senza tempo minimo, dato che Google richiede un intervallo minimo solo per l'aggiornamento a tempo o su evento.

Non consentito

Usare nel div un nome diverso da quello passato nella definizione dello slot.
Aggiornare gli annunci senza dichiararlo in Ad Manager, o dichiararlo in modo sbagliato. Google lo tratta come una violazione.
Aggiornare a tempo o su evento con un intervallo inferiore a 30 secondi sul web.
Svuotare lo spazio prima di aggiornare. L'aggiornamento sostituisce già l'annuncio, e svuotare lascia solo lo spazio vuoto più a lungo.
Aggiornare spazi che la persona non vede mai. Google avverte che questo può far calare molto il tasso di visibilità.
Lasciare il div senza misure riservate, il che fa saltare il contenuto quando arriva l'annuncio.

Consigli

Per farlo nel modo giusto

In uno spazio con più dimensioni, Google chiede che la div abbia l'altezza dell'annuncio più alto e la larghezza dell'annuncio più largo.
Nella mappatura delle dimensioni, GPT sceglie la fascia di schermo più grande che corrisponde, guardando prima la larghezza e poi l'altezza. Se la mappatura ha un errore, torna alle dimensioni della definizione dello slot.
Nell'esempio ufficiale di caricamento lento, Google recupera gli annunci a 5 schermate di distanza, li disegna a 2 schermate e raddoppia questi valori su smartphone.
Per aggiornare solo dopo che l'annuncio è stato visto, la documentazione suggerisce di aspettare l'evento di impressione visibile, chiamato impressionViewable.

Attenzione

Errori comuni

Nome del div diverso

Il nome passato nella definizione dello slot e nella visualizzazione deve essere uguale a quello del div. Quando non lo è, l'annuncio semplicemente non compare.

Div di dimensione diversa dall'annuncio

Google chiede che larghezza, altezza e nome della div corrispondano a quanto c'è nel tag. Se non corrispondono, l'annuncio potrebbe non comparire.

Nessun elemento pubblicitario pronto

Senza un elemento pubblicitario attivo con stato Pronto, il tuo inventario non mostra annunci, anche con il codice giusto.

Mappatura che svuota lo smartphone

Nell'esempio di Google, gli schermi più piccoli di 640 per 480 ricevono un elenco vuoto e restano senza annuncio. Se copi senza adattare, gli smartphone in verticale possono restare senza banner.

Domande frequenti

Qual è la differenza tra più dimensioni e responsive?

Con più dimensioni, qualsiasi misura dell'elenco può comparire su qualsiasi schermo. Con il responsive, la mappatura delle dimensioni dice quali misure valgono per ogni larghezza di schermo.

Posso usare la dimensione fluida in un banner normale?

Google spiega che oggi l'unico tipo fluido accettato da Ad Manager è l'annuncio nativo. Per il banner normale, usa dimensione fissa, più dimensioni o mappatura.

Qual è il tempo minimo per aggiornare un annuncio?

Sul web, l'aggiornamento a tempo o su evento richiede almeno 30 secondi. L'aggiornamento su azione della persona non ha minimo. In ogni caso, deve essere dichiarato nelle Regole dell'inventario.

Conviene usare il caricamento lento?

Google consiglia di rimandare gli spazi sotto la piega, il che aiuta soprattutto su smartphone, dove le risorse sono minori. Gli spazi in alto devono avere la priorità.

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