La guida riportata di seguito illustra in modo più dettagliato la visualizzazione di un annuncio di prova e introduce concetti più di base per sfruttare al meglio la raccolta di Tag publisher di Google (GPT). Questi concetti includono:
- Dimensioni degli annunci
- Targeting per coppie chiave-valore
- Architettura di richiesta singola
Carica la libreria GPT
Per iniziare, carica e inizializza la libreria GPT. Aggiungi quanto segue al <head> del documento HTML:
<script
async
src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"
crossorigin="anonymous"
></script>
<script>
window.googletag = window.googletag || { cmd: [] };
googletag.cmd.push(() => {
});
</script>
Viene caricata la libreria GPT e vengono inizializzati sia gli oggetti googletag
che CommandArray. L'inizializzazione di questi oggetti ti consente di iniziare subito a utilizzare l'array di comandi GPT. Aggiungi il codice JavaScript che segue al corpo della funzione vuota definita in questo snippet.
Definire le aree annuncio
Dopo aver caricato il GPT, puoi definire le aree annuncio. L'esempio seguente definisce tre spazi annunci con diversi formati, dimensioni e opzioni di targeting.
Spazio annuncio con dimensioni fisse
Ecco un semplice spazio annuncio con 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 al percorso, alle dimensioni e all'ID <div> del contenitore dell'unità pubblicitaria, questo snippet specifica anche una serie di opzioni di targeting. Queste opzioni limitano e differenziano gli annunci idonei alla pubblicazione in questo spazio. Scopri di più sul targeting per coppie chiave-valore.
Area annuncio ancorato
Ecco un'area annuncio ancorata, collegata 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.";
}
Gli slot ancorati sono un tipo di formato esterno alla pagina, che vengono definiti utilizzando il metodo defineOutOfPageSlot anziché il solito metodo defineSlot. Scopri di più sulle creatività fuori pagina.
I formati fuori pagina sono spesso soggetti a limitazioni relative ai tipi di pagine e di dispositivi su cui possono essere pubblicati. A causa di queste limitazioni, devi verificare che lo slot sia definito correttamente prima di interagire con esso. Per maggiori dettagli, consulta l'esempio Mostrare un annuncio ancorato.
Area annuncio fluida
Ecco uno spazio per annunci flessibili per un annuncio nativo:
// Define a fluid ad slot that fills the width of the enclosing column and
// adjusts the height as defined by the native creative delivered.
googletag
.defineSlot("/6355419/Travel", ["fluid"], "native-ad")
.addService(googletag.pubads());
Le aree annuncio flessibili non hanno una dimensione fissa. Le aree annuncio fluide si adattano ai contenuti della creatività dell'annuncio. Puoi definire aree annuncio fluide con l'opzione di dimensione fluid. Scopri di più sulle dimensioni degli annunci e sulle opzioni di dimensionamento disponibili.
Configurare le impostazioni a livello di pagina
Alcune opzioni di configurazione del GPT si applicano a livello globale, anziché a aree annuncio specifiche. Queste sono le impostazioni 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 esegue tre operazioni:
- Configura le opzioni di targeting a livello di pagina, che vengono applicate a ogni area annuncio nella pagina.
- Attiva la modalità di architettura di richiesta singola (SRA), che raggruppa le richieste per più aree annuncio in una singola richiesta di annuncio. L'architettura SRA migliora il rendimento ed è necessaria per garantire il rispetto delle esclusioni competitive e dei roadblock, pertanto ti consigliamo di attivarla sempre. Scopri di più su come utilizzare correttamente l'architettura SRA.
- Consente di attivare i servizi collegati alle nostre aree annuncio che consentono di effettuare richieste di annunci.
Annunci display
Infine, aggiungi il seguente snippet al <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>
Vengono definiti due contenitori di aree annuncio: banner-ad e native-ad. Questi valori id del contenitore corrispondono a quelli che hai fornito quando hai definito gli spazi pubblicitari in precedenza in questo esempio.
Una volta definite tutte le aree annuncio, viene effettuata una chiamata per visualizzare banner-ad. Poiché
l'architettura SRA è attivata, questa singola chiamata di visualizzazione richiede e mostra tutte le aree annuncio
definite fino a questo punto. Se necessario, puoi controllare con maggiore precisione il caricamento e l'aggiornamento degli annunci e il comportamento di raggruppamento con l'RA attivato.
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.