Erste Schritte mit Google Publisher-Tags

Das Google Publisher-Tag (GPT) ist eine Tag-Bibliothek für Google Ad Manager, mit der Anzeigenanfragen dynamisch erstellt werden. Er übernimmt wichtige Details von Ihnen (etwa Anzeigenblockcode, Anzeigengröße und benutzerdefiniertes Targeting), erstellt die Anfrage und blendet die Anzeige auf Webseiten ein.

Einen kurzen Überblick über GPT, einschließlich seiner Vorteile, grundlegenden Funktionen und Features, finden Sie in der Ad Manager-Hilfe.

Testanzeige schalten

Im folgenden Beispiel wird beschrieben, wie Sie eine Testseite erstellen, auf der GPT eine allgemeine Anzeige aus dem Testnetzwerk von Google lädt.

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

  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">
        <title>Hello GPT</title>
      </head>
      <body>
      </body>
    </html>
    
  2. GPT-Bibliothek laden

    Laden Sie die GPT-Bibliothek, indem Sie dem <head> des HTML-Dokuments Folgendes hinzufügen:

    <head>
      <meta charset="utf-8">
      <title>Hello GPT</title>
      <script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
    </head>
    

    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 in der Warteschlange enthaltenen Befehle im googletag-Objekt.

  3. Eine Anzeigenfläche definieren

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

    <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(
                  '/6355419/Travel/Europe/France/Paris', [300, 250], 'banner-ad')
              .addService(googletag.pubads());
          googletag.enableServices();
        });
      </script>
    </head>
    

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

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

  4. Angeben, wo die Anzeige ausgeliefert werden soll

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

    <body>
      <div id="banner-ad" style="width: 300px; height: 250px;">
        <script>
          googletag.cmd.push(function() {
            googletag.display('banner-ad');
          });
        </script>
      </div>
    </body>
    

    Die ID dieses <div> entspricht der ID, die beim Definieren der Anzeigenfläche angegeben wurde.

  5. Vorschau der Testseite ansehen

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

Eigene Anzeige schalten

Verwenden Sie die Datei hello-gpt.html, die im Abschnitt Testanzeige einblenden erstellt wurde, und ersetzen Sie den Code im Header durch Code, der das Inventar aus Ihrem eigenen Ad Manager-Netzwerk angibt.

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

  2. Kopieren Sie den Anzeigen-Tag-Code aus dem Abschnitt Document header und ersetzen Sie damit den entsprechenden Code in der <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.