La seguente guida si occupa della visualizzazione di un annuncio di prova e introduce concetti di base per utilizzare al meglio la libreria di Tag publisher di Google (GPT). Questi concetti includono:
- Dimensioni degli annunci
- Targeting per coppia chiave-valore
- Architettura di richiesta singola
Caricare la libreria GPT
Inizia caricando e inizializzando la libreria GPT. Aggiungi quanto segue a <head> del documento HTML:
<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<script>
window.googletag = window.googletag || { cmd: [] };
googletag.cmd.push(() => {
});
</script>
Questa operazione carica la libreria GPT e inizializza entrambi gli oggetti googletag e CommandArray. L'inizializzazione di questi oggetti consente di iniziare a utilizzare immediatamente l'array di comandi GPT. Aggiungi il codice JavaScript che segue al corpo della funzione vuota definita in questo snippet.
Definisci aree annunci
Dopo aver caricato GPT, puoi definire le aree annuncio. L'esempio riportato di seguito definisce tre aree annuncio con opzioni di formati, dimensioni e targeting degli annunci.
Area annuncio a dimensioni fisse
Di seguito è riportata una semplice area annuncio a dimensioni fisse:
// Define a fixed size ad slot, customized with key-value targeting.
googletag
.defineSlot("/6355419/Travel/Asia", [728, 90], "banner-ad")
.addService(googletag.pubads())
.setTargeting("color", "red")
.setTargeting("position", "atf");
Oltre a percorso dell'unità pubblicitaria, dimensioni e ID <div> del contenitore, questo
snippet specifica anche una serie di opzioni di targeting. Queste opzioni limitano e differenziano gli annunci idonei alla pubblicazione in quest'area. Scopri di più sul targeting per coppia chiave-valore.
Area annuncio ancorata
Ecco un'area annuncio ancorata, attaccata alla parte inferiore dell'area visibile:
// Define an anchor ad slot that sticks to the bottom of the viewport.
const anchorSlot = googletag.defineOutOfPageSlot(
"/6355419/Travel",
googletag.enums.OutOfPageFormat.BOTTOM_ANCHOR,
);
// The slot will be null if the page or device does not support anchors.
if (anchorSlot) {
anchorSlot.setTargeting("test", "anchor").addService(googletag.pubads());
document.getElementById("status").textContent =
"Anchor ad is initialized. Scroll page to activate.";
}
Le aree di ancoraggio sono un tipo di formato fuori pagina, definito
utilizzando il metodo defineOutOfPageSlot anziché il solito metodo
defineSlot. Scopri di più sulle creatività fuori pagina.
I formati fuori pagina spesso sono soggetti a limitazioni riguardo ai tipi di pagine e dispositivi su cui possono essere pubblicati. A causa di queste restrizioni, devi verificare che l'area venga definita correttamente prima di interagire. Per informazioni dettagliate, consulta l'esempio di visualizzazione di un annuncio ancorato.
Area annuncio flessibile
Di seguito è riportata un'area annuncio flessibile per un annuncio nativo:
// Define a fluid ad slot that adjusts its height to fit the creative
// content being displayed.
googletag
.defineSlot("/6355419/Travel", ["fluid"], "native-ad")
.addService(googletag.pubads());
Le aree annuncio flessibili non hanno una dimensione fissa. Le aree annuncio flessibili si adattano
ai contenuti delle creatività dell'annuncio. Per definire le aree annuncio flessibili, puoi utilizzare l'opzione delle dimensioni fluid. Scopri di più sulle dimensioni degli annunci e le opzioni disponibili per le dimensioni.
Configurare le impostazioni a livello di pagina
Alcune opzioni di configurazione GPT si applicano a livello globale, piuttosto che a specifiche aree annuncio. Queste impostazioni sono denominate a livello di pagina.
Ecco un esempio di come configurare le impostazioni a livello di pagina:
// Configure page-level targeting.
googletag.pubads().setTargeting("interests", "basketball");
// Enable SRA and services.
googletag.pubads().enableSingleRequest();
googletag.enableServices();
Questo snippet fa tre cose:
- Consente di configurare le opzioni di targeting a livello di pagina, che vengono applicate a ogni area annuncio nella pagina.
- Attiva la modalità SRA (Single Request Architecture), che raggruppa le richieste per più aree annuncio in una singola richiesta di annuncio. La modalità SRA migliora le prestazioni ed è necessaria per garantire il rispetto delle esclusioni e dei roadblock competitivi, pertanto ti consigliamo di attivare sempre SRA. Scopri di più su come utilizzare correttamente SRA.
- Attiva i servizi collegati alle nostre aree annunci che consentono di effettuare richieste di annunci.
Annunci display
Infine, aggiungi il seguente snippet a <body> della pagina:
<div class="page-content centered">
<div id="banner-ad" style="width: 728px; height: 90px"></div>
<!--
If the following status is displayed when the page is rendered, try
loading the page in a new window or on a different device.
-->
<h1 id="status">Anchor ads are not supported on this page.</h1>
<!--
Spacer used for example purposes only. This positions the native ad
container below the fold to encourage scrolling.
-->
<div class="spacer"></div>
<div id="native-ad" class="native-slot"></div>
</div>
<script>
googletag.cmd.push(() => {
// Request and render all previously defined ad slots.
googletag.display("banner-ad");
});
</script>
Questo attributo definisce due contenitori dell'area annuncio: banner-ad e native-ad. Questi valori id del contenitore corrispondono ai valori forniti al momento della definizione delle aree annuncio in precedenza in questo esempio.
Dopo aver definito tutte le aree annuncio, viene effettuata una chiamata per visualizzare banner-ad. Poiché l'SRA è attivata, questa singola chiamata display richiede e visualizza tutte le aree annuncio definite fino a questo punto. Se necessario, puoi controllare il caricamento e l'aggiornamento degli annunci e il
comportamento in batch in modo più preciso con la modalità SRA abilitata.
Esempio completo
Di seguito è riportato il codice sorgente completo della pagina di esempio su cui si basa questa guida. Puoi anche visualizzare una demo interattiva di questa pagina.