Introduzione al Tag publisher di Google

Tag publisher di Google (GPT) è una libreria di tag annuncio per in Google Ad Manager.

Puoi utilizzare GPT per creare dinamicamente richieste di annunci. GPT utilizza dettagli chiave quali il codice dell'unità pubblicitaria, le dimensioni dell'annuncio e il targeting personalizzato, crea la richiesta e visualizza l'annuncio nelle pagine Web.

Per ulteriori informazioni su GPT, consulta Centro assistenza Ad Manager.

Di seguito sono riportati alcuni esempi che puoi utilizzare per iniziare a utilizzare GPT. Se hai bisogno di ulteriore assistenza con GPT, consulta le informazioni su opzioni.

Visualizzare un annuncio di prova

L'esempio seguente illustra la creazione di una pagina di test che utilizza GPT per caricare un annuncio generico dalla rete di prova di Google.

Il codice completo per questo esempio è disponibile nella pagina di esempio mostra un annuncio di prova.

Creare un documento HTML di base

In un editor di testo, crea un documento HTML di base chiamato hello-gpt.html.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="Display a fixed-sized test ad." />
    <title>Display a test ad</title>
    <style></style>
  </head>
  <body>
  </body>
</html>

Caricare la libreria GPT

Carica la libreria GPT aggiungendo quanto segue al file <head> del documento HTML.

Questo codice carica la libreria GPT da https://securepubads.g.doubleclick.net/tag/js/gpt.js. Una volta che la libreria ha completamente caricato, elabora tutti i comandi in coda googletag.

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="description" content="Display a fixed-sized test ad." />
  <title>Display a test ad</title>
  <script
    async
    src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"
    crossorigin="anonymous"
  ></script>
  <style></style>
</head>

Definisci un'area annuncio

Definisci un'area annuncio e inizializza il tag GPT utilizzando il metodo googletag.enableServices().

Questo codice garantisce innanzitutto che l'oggetto googletag sia disponibile, poi mette in coda un che crea un'area annuncio e attiva GPT.

L'area annuncio di questo esempio caricherà un annuncio di dimensioni 300x250 dall'annuncio unità specificata dal percorso /6355419/Travel/Europe/France/Paris. L'annuncio verrà visualizzato in un elemento <div id="banner-ad"> nel corpo della pagina, che verrà aggiunto successivamente.
Il percorso dell'unità pubblicitaria segue il formato /network-code/[parent-ad-unit-code/.../]ad-unit-code, dove:
- network-code è un identificatore univoco dei La rete Ad Manager a cui appartiene l'unità pubblicitaria
- parent-ad-unit-code sono i codici di tutte le unità pubblicitarie principali (solo si applica alle unità pubblicitarie non di primo livello)
- ad-unit-code è il codice per la visualizzazione dell'unità pubblicitaria
Tieni presente che tutti i codici delle unità pubblicitarie inclusi nel percorso dell'unità pubblicitaria devono rispettare le regole di formattazione specificate da in Ad Manager.
```
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="description" content="Display a fixed-sized test ad." />
  <title>Display a test ad</title>
  <script
    async
    src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"
    crossorigin="anonymous"
  ></script>
  <script>
    window.googletag = window.googletag || { cmd: [] };

    googletag.cmd.push(() => {
      // Define an ad slot for div with id "banner-ad".
      googletag
        .defineSlot("/6355419/Travel/Europe/France/Paris", [300, 250], "banner-ad")
        .addService(googletag.pubads());

      // Enable the PubAdsService.
      googletag.enableServices();
    });
  </script>
  <style></style>
</head>
```
Specifica dove verrà visualizzato l'annuncio

Specifica in quale punto della pagina verrà visualizzato l'annuncio aggiungendo il seguente codice alla il <body> del documento HTML.

Tieni presente che l'ID di questo <div> corrisponde all'ID specificato al momento della definizione area annuncio.
```
<body>
  <div id="banner-ad" style="width: 300px; height: 250px"></div>
  <script>
    googletag.cmd.push(() => {
      // Request and render an ad for the "banner-ad" slot.
      googletag.display("banner-ad");
    });
  </script>
</body>
```
Visualizza l'anteprima della pagina di test

Salva il file hello-gpt.html e aprilo in un browser web. Una volta caricati, la pagina visualizzerà un annuncio di prova nel corpo della pagina web.

Attenzione: se non vedi un annuncio, assicurati che l'ID div specificato nella <head> della pagina corrisponde all'ID dell'elemento <div> che hai aggiunto il <body> della pagina.

Visualizza il tuo annuncio

Per pubblicare il tuo annuncio, utilizza il file hello-gpt.html da Mostra un test ad, poi sostituisci il codice nell'intestazione con il codice che specifica l'inventario della tua rete Ad Manager.

Genera un tag annuncio per l'unità pubblicitaria da visualizzare. Scopri di più su generando tag annuncio nel Centro assistenza Ad Manager.

Copia il codice del tag annuncio fornito nella sezione Intestazione documento e utilizzalo per sostituire il codice corrispondente nel <head> del documento HTML.

<head>
  <meta charset="utf-8">
  <title>Hello GPT</title>
  <script src="https://securepubads.g.doubleclick.net/tag/js/gpt.js" crossorigin="anonymous" async></script>
  <script>
    window.googletag = window.googletag || {cmd: []};
    googletag.cmd.push(function() {
      googletag
          .defineSlot("ad-unit-path", [width, height], "div-id")
          .addService(googletag.pubads());
      googletag.enableServices();
    });
  </script>
</head>

Salva il file hello-gpt.html aggiornato e aprilo in un browser web.

Avanti

Impara le basi