Codebeispiel für das Google Publisher-Tag

Nachfolgend sehen Sie ein Beispiel für den vollständigen Code eines Google Publisher-Tags (GPT), das auf Websites für Computer und Mobilgeräte implementiert werden kann. Verwenden Sie den Google Tag Generator, um das Tag automatisch zu generieren.

Entwickler und jene, die erweiterte Implementierungen von GPT benötigen, finden in der API-Referenz und den Beispielimplementierungen (z. B. Lazy Loading) weitere Informationen.

Erweiterte GPT-Beispiele ansehen

Beispielcode für ein Google Publisher-Tag

Für GPT sind zwei Codeabschnitte implementiert:

  • Die GPT-Konfiguration befindet sich im <head> der Webseite.
  • Die Aufrufe für jede spezifische Anzeigenfläche befinden sich im entsprechenden Abschnitt des <body>.

Dieses Beispiel dient lediglich Informationszwecken. Wir empfehlen Ihnen, einen Entwickler den Code auf Ihrer Website implementieren zu lassen.

GPT-Konfiguration

Im folgenden Codebeispiel sehen Sie u. a. das Aufrufen der GPT-JavaScript-Bibliothek, das Definieren der Anzeigenflächen und das Schlüssel/Wert-Paar-Targeting.

1 <html>
2 <head>
3 <script async="async" src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
4 <script>
5   window.googletag = window.googletag || {cmd: []};
6 </script>

Zeilen 3–6: Die in Ad Manager verwendete GPT-Bibliothek wird über SSL/HTTPS asynchron geladen. Hier wird die Befehlswarteschlange erstellt, mit der die Liste der Funktionen (in der Regel Anzeigenaufrufe) verwaltet wird, die asynchron verarbeitet werden sollen. Dieser Bereich des Codes muss nicht bearbeitet werden.

7 <script>
8   googletag.cmd.push(function() {
9     googletag.defineSlot("/1234/travel/asia", [728, 90], "div-gpt-ad-123456789-0")

Zeile 9: "/1234/travel/asia" gibt den Netzwerkcode (1234) und den Anzeigenblock (travel/asia), auf den Anzeigen ausgerichtet sind, an. Sie finden ihn in Ad Manager unter Admin und dann Globale Einstellungen und dann Netzwerkcode.

Mit [728, 90] wird die Größe des Creatives für die Anzeigenfläche festgelegt. Geben Sie mehrere Größen über die folgende Syntax an: [[width1, height1], [width2, height2], [width3, height3]]. Verknüpfen Sie hier alle Größen mit dem Anzeigenblock, auf den Anzeigen ausgerichtet sind, damit Sie die Liste basierend auf der angegebenen Anzeigenfläche eingrenzen können. Wenn Sie Anzeigenflächen mit mehreren Größen verwenden, sollten die Größen in derselben Reihenfolge deklariert werden, wie sie in Ad Manager erscheinen. Weitere Informationen zu Anzeigenflächendefinition und Reihenfolge

10       .addService(googletag.pubads())
11       .setTargeting("interests", ["sports", "music", "movies"]);
12     googletag.defineSlot("/1234/travel/asia", [[468, 60], [728, 90], [300, 250]], "div-gpt-ad-123456789-1")
13       .addService(googletag.pubads())
14       .setTargeting("gender", "male")
15       .setTargeting("age", "20-30");

Zeilen 11, 14 und 15: Hier wird mithilfe von .setTargeting() das Schlüssel/Wert-Paar-Targeting auf Anzeigenflächenebene festgelegt. Wie im ersten Beispiel können Sie einem Schlüssel mehrere Werte zuordnen: ("key", ["value1", "value2", "value3"]). Wenn Sie ein Targeting auf mehrere Schlüssel vornehmen, rufen Sie die Funktion mehrere Male auf, wie im zweiten Fall zu sehen: (gender=male und age=20-30).

Weitere Informationen zum Festlegen des Targetings und der Größen mit GPT

16     googletag.pubads().setTargeting("topic","basketball");

Zeile 16: Mit googletag.pubads().setTargeting("topic","basketball"); wird das Schlüssel/Wert-Paar-Targeting auf Seitenebene festgelegt.

Wenn Sie ein Targeting mit Schlüssel/Wert-Paaren auf Seitenebene konfigurieren, wird dieses Targeting für alle Anzeigenflächen übernommen. Wie bei Schlüssel/Wert-Paaren auf Ebene der Anzeigenfläche können Sie mehrere Werte mit einem Schlüssel verknüpfen: ("key", ["value1", "value2", "value3"]).

17     googletag.pubads().enableSingleRequest();

Zeile 17: Mit googletag.pubads().enableSingleRequest(); wird die Einzelanfrage-Architektur aktiviert. Fügen Sie diese Zeile ein, um alle Anzeigenflächen auf der Seite in einem einzigen Aufruf aufzurufen. So wird sichergestellt, dass alle Anzeigenflächen auf der Seite bei der Bewertung von Roadblocks und Konkurrenzausschlüssen berücksichtigt werden.

18     googletag.enableServices();
19   });
20 </script>
21 </head>
22 <body>
23   <div id="div-gpt-ad-123456789-0" style="width: 728px; height: 90px">

Zeile 23 (optional): style="width: 728px; height: 90px" ist die anfängliche Größe für das div-Element, womit vor dem Rendern des Creatives Platz reserviert wird.

Bei der Verwendung von Tags mit mehreren Größen empfehlen wir, diese Zeile entweder wegzulassen, falls die Größe des Elements beim Rendering mit der des ausgewählten Creatives übereinstimmen soll, oder beide Größen so festzulegen, dass das größte Creative hineinpasst. Nutzen Sie diesen Parameter bei Anzeigen-Tags mit einer einzigen Größe, um das Containerelement zu maximieren, bis das Creative geladen wird. So werden andere Elemente auf der Seite nicht verschoben, wenn das Creative erscheint.

24     <script>
25       googletag.cmd.push(function() {
26          googletag.display("div-gpt-ad-123456789-0");
27       });
28     </script>
29   </div>
30     <div id="div-gpt-ad-123456789-1">
31     <script>
32       googletag.cmd.push(function() {

Zeilen 8, 25 und 32: In die Befehlswarteschlange werden Funktionsaufrufe eingefügt, damit sie beim Laden der Seite asynchron ausgeführt werden.

33          googletag.display("div-gpt-ad-123456789-1");

Zeilen 9, 12, 23, 26, 30 und 33: Über "div-gpt-ad-123456789-0" werden die Anzeigenflächen, die im Header definiert sind, mit den Anzeigenflächen auf der Seite abgeglichen, also mit den div-Tags im Textkörper, in dem die Creatives bereitgestellt werden. Sie können beliebig benannt werden, solange sie übereinstimmen. Vom Tag-Generator wird die Namenskonvention "div-gpt-ad-[Zufallszahl]-0", "div-gpt-ad-[Zufallszahl]-1" und so weiter verwendet. Nutzen Sie immer dieselbe <div>-ID für eine Position auf einer Seite, da sie für die Optimierung vieler verschiedener Bereiche benötigt wird.

Auch wenn hier Zufallszahlen verwendet werden, ist dies nicht die Methode, mit der Anzeigenanfragen eindeutig von GPTs identifiziert werden. Dies erfolgt im Hintergrund und unter Verwendung der GPT-Bibliothek. Darüber hinaus können diese Namen seitenübergreifend beibehalten werden, solange sich auf einer Seite nicht mehrere Instanzen desselben div-Namens befinden.

Weitere Informationen zur Struktur des Ad Manager-Inventars, zur Anzeigenblockhierarchie und dazu, wie das Targeting von Anzeigenblöcken übernommen wird, finden Sie im Artikel Inventarstruktur erstellen.

34       });
35     </script>
36   </div>
37 </body>
38 </html>

Erweiterte GPT-Beispiele ansehen

Wenn der Header Ihrer Webseiten nicht bearbeitet werden kann

Sie können GPT verwenden, ohne den <header> Ihrer Website zu ändern.

Möglichkeit 1: Inline-GPT

Nutzen Sie statt des Seitenheaders ein Inline-Tag, um zu definieren, wo der Anzeigenblock auf der Seite erscheint. Bei einem Inline-Tag ist die gesamte GPT-Anzeigenflächendefinition und -anfrage in einem einzelnen <script>-Tag enthalten, einschließlich des Befehls zum Laden der GPT-Bibliothek.

Da die GPT-JavaScript-Bibliothek vom Anzeigen-Tag verwendet wird, muss der Code, mit dem die Bibliothek geladen wird, vor dem Anzeigen-Tag-Code eingebunden werden.

Beispiel für Inline-GPT

In diesen Beispielen für Inline-GPTs wird die Einzelanfrage-Architektur nicht unterstützt.

GPT-JavaScript-Bibliothek aufrufen

<script async="async" src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<script>
 window.googletag = window.googletag || {cmd: []};
</script>

Beispiel für Inline-Anzeigen-Tag

<div id="div-gpt-ad-1234567891234-0">
  <script>
    googletag.cmd.push(function() {
      googletag.defineSlot('/1234/sports/football', [728, 90],'div-gpt-ad-1234567891234-0')
        .addService(googletag.pubads())
        .setTargeting("Gender", "Male");
      googletag.enableServices();
      googletag.display('div-gpt-ad-1234567891234-0');
  });
  </script>
</div>

Möglichkeit 2: Sämtlichen Code in den Textkörper der Webseite einfügen

Nutzen Sie die herkömmliche GPT-Implementierung, fügen Sie die Definitionen der Anzeigenflächen aber in den Textkörper und nicht in den Header ein.

Der Code, über den die Bibliothek geladen und die Anzeigenflächen definiert werden, muss aufgerufen werden, bevor Sie Anzeigen für diese Anzeigenflächen anfordern. Da der Code nicht in den Header und Textkörper der Seite segmentiert ist, müssen Sie die Reihenfolge des Codes verwalten. Die Implementierung dieses Ansatzes ist komplex, aber dadurch erhalten Sie die Flexibilität, die Einzelanfrage-Architektur zu nutzen.

Anfrage ohne Tags und JavaScript erstellen

Anstelle eines Anzeigen-Tags kann eine Anfrage ohne Tags verwendet werden, um den Rohcode eines Creatives anzufordern, der in Ad Manager getraffickt wird. Anfragen ohne Tags werden normalerweise eingesetzt, wenn benutzerdefiniertes Parsing und eine individuelle Darstellung erforderlich sind, wie bei Set-Top-Boxen oder anderen Umgebungen ohne Tag-Kennzeichnung von Google oder SDK-Unterstützung.

War das hilfreich?

Wie können wir die Seite verbessern?
Suche
Suche löschen
Suche schließen
Google-Apps
Hauptmenü