Einführung in das Google Publisher-Tag

Das Google Publisher-Tag (GPT) ist eine Bibliothek für das Anzeigen-Tagging für Google Ad Manager.

Sie können GPT verwenden, um Anzeigenanfragen dynamisch zu erstellen. GPT übernimmt wichtige Details wie Anzeigenblockcode, Anzeigengröße und benutzerdefiniertes Targeting, erstellt die Anfrage und blendet die Anzeige auf Webseiten ein.

Weitere Informationen zu GPT finden Sie in der Ad Manager-Hilfe.

Im Folgenden finden Sie einige Beispiele für die ersten Schritte mit GPT. Weitere Informationen zu GPT finden Sie unter Supportoptionen.

Testanzeige einblenden

Im folgenden Beispiel wird gezeigt, wie Sie eine Testseite erstellen, auf der mit GPT eine allgemeine Anzeige aus dem Testnetzwerk von Google geladen wird.

Den vollständigen Code für dieses Beispiel finden Sie auf der Beispielseite Testanzeige ausliefern.

  1. Einfaches HTML-Dokument erstellen

    Erstellen Sie in einem Texteditor ein einfaches HTML-Dokument mit dem Namen 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. GPT-Bibliothek laden

    Laden Sie die GPT-Bibliothek, indem Sie Folgendes in die <head> des HTML-Dokuments einfügen.

    Mit diesem Code wird die GPT-Bibliothek von https://securepubads.g.doubleclick.net/tag/js/gpt.js geladen. Sobald die Bibliothek vollständig geladen wurde, verarbeitet sie alle Befehle in der Warteschlange im googletag-Objekt.

    <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. Definieren Sie eine Anzeigenfläche

    Definieren Sie eine Anzeigenfläche und initialisieren Sie GPT mit der Methode googletag.enableServices().

    Dieser Code stellt zuerst sicher, dass das googletag-Objekt verfügbar ist. Dann wird ein Befehl in die Warteschlange gestellt, der eine Anzeigenfläche erstellt und GPT aktiviert.

    Die Anzeigenfläche in diesem Beispiel lädt eine Anzeige der Größe 300x250 aus dem Anzeigenblock, der durch den Pfad /6355419/Travel/Europe/France/Paris angegeben wird. Die Anzeige wird in einem <div id="banner-ad">-Element im Hauptteil der Seite eingeblendet, das als Nächstes hinzugefügt wird.

    <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. Festlegen, wo die Anzeige erscheinen soll

    Geben Sie an, wo auf der Seite die Anzeige erscheinen soll, indem Sie den folgenden Code in das <body>-Element des HTML-Dokuments einfügen.

    Die ID dieses <div>-Objekts stimmt mit der ID überein, die beim Definieren der Anzeigenfläche angegeben wurde.

    <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. Vorschau der Testseite anzeigen

    Speichern Sie die Datei hello-gpt.html und öffnen Sie sie in einem Webbrowser. Nach dem Laden wird auf der Seite im Textbereich der Webseite eine Testanzeige eingeblendet.

Eigene Anzeige schalten

Wenn Sie Ihre eigene Anzeige ausliefern möchten, verwenden Sie die Datei hello-gpt.html aus dem Artikel Testanzeige ausliefern. Ersetzen Sie dann den Code im Header durch einen Code, der das Inventar aus Ihrem eigenen Ad Manager-Netzwerk angibt.

  1. Erstellen Sie ein Anzeigen-Tag für den Anzeigenblock, den Sie anzeigen möchten. Weitere Informationen zum Generieren von Anzeigen-Tags finden Sie in der Ad Manager-Hilfe.

  2. Kopieren Sie den Anzeigen-Tag-Code im Abschnitt Dokument-Header und ersetzen Sie damit den entsprechenden Code im <head> Ihres HTML-Dokuments.

    <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. Speichern Sie die aktualisierte Datei hello-gpt.html und öffnen Sie sie in einem Webbrowser.