Introduzione al Tag publisher di Google

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

Puoi utilizzare GPT per creare dinamicamente richieste di annunci. GPT prende dettagli chiave come 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 dettagli sui tag GPT, consulta il Centro assistenza Ad Manager.

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

Mostra 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 test di Google.

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

  1. Creare un documento HTML di base

    In un editor di testo, crea un documento HTML di base denominato 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>
        <script>
          googletag.cmd.push(() => {
            // Request and render an ad for the "banner-ad" slot.
            googletag.display("banner-ad");
          });
        </script>
      </body>
    </html>
    
  2. Caricare la libreria GPT

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

    Questo codice carica la libreria GPT da https://securepubads.g.doubleclick.net/tag/js/gpt.js. Una volta caricata completamente, la libreria elabora tutti i comandi in coda nell'oggetto 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"></script>
      <style></style>
    </head>
    
  3. Definisci un'area annuncio

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

    Questo codice garantisce innanzitutto che l'oggetto googletag sia disponibile, quindi accoda un comando che crea un'area annuncio e attiva GPT.

    L'area annuncio di questo esempio caricherà un annuncio di dimensioni 300x250 dall'unità pubblicitaria 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.

    <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"></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>
    
  4. Specifica dove verrà visualizzato l'annuncio

    Specifica la posizione in cui verrà visualizzato l'annuncio sulla pagina aggiungendo il seguente codice a <body> del documento HTML.

    Tieni presente che l'ID di questo <div> corrisponde all'ID specificato durante la definizione dell'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>
    
  5. Visualizzare l'anteprima della pagina di test

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

Mostra il tuo annuncio

Per visualizzare il tuo annuncio, utilizza il file hello-gpt.html da Mostra un annuncio di prova, quindi sostituisci il codice nell'intestazione con il codice che specifica l'inventario della tua rete Ad Manager.

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

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

    <head>
     <meta charset="utf-8">
     <title>Hello GPT</title>
     <script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></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>
    
  3. Salva il file hello-gpt.html aggiornato e aprilo in un browser web.