Beispiele für Google Publisher-Tags

Dieser Artikel enthält Beispiele für Google Publisher-Tags für Desktop- und mobile Implementierungen. Lesen Sie, wie Sie das Google Publisher-Tag-Generierungstool für die automatische Erzeugung von GPT-Tags einsetzen.

Dieser Artikel enthält Folgendes:

Beispiel für ein asynchrones Google Publisher-Tag

Im Folgenden finden Sie ein Beispiel für den vollständigen Code, mit dem Sie ein asynchrones Google Publisher-Tag erstellen können. Dieses Tag beschreibt viele gängige Funktionen und die Syntax in einer asynchronen GPT-Anzeigenanfrage.

1 <html>
  • Die Zeilen 3 bis 15 sind Textbausteine, mit denen die von DFP verwendete GPT-JavaScript-Bibliothek asynchron geladen wird. Falls erforderlich, wird SSL bzw. HTTPS verwendet. Hier wird die Befehlswarteschlange erstellt, mit der die Liste der Funktionen (im Allgemeinen Anzeigenaufrufe) verwaltet wird, die asynchron verarbeitet werden sollen. Publisher müssen in diesem Bereich des Codes keine Änderungen vornehmen.

  • Optional: Die Zeilen 16 bis 20 legen Attribute für Anzeigenflächen auf Seitenebene fest, die in AdSense geschaltet werden. Hier vorgenommene Einstellungen überschreiben jegliche Formate, die in DFP oder AdSense vorgenommen wurden. Diese Option wird im Allgemeinen nicht verwendet, da die Werte in DFP eingestellt werden können. Weitere Informationen zum Einrichten von AdSense-Parametern in GPT finden Sie in der Dokumentation zur Funktion .set() in der Hilfe.

  • Zeilen 17, 22, 39, 46: Wenn Sie asynchrones Rendering verwenden, umschließen Sie sämtlichen JavaScript-Code nach dem ersten Skriptbaustein in der Funktion googletag.cmd.push in Zeile 17. Damit wird die Funktion zur Befehlswarteschlange hinzugefügt, damit sie in Bezug auf den Seitenladevorgang asynchron verarbeitet wird. Weitere Informationen zu den Unterschieden zwischen synchronem und asynchronem Rendering

  • Zeile 23: "/1234/travel/asia/food" gibt den Netzwerkcode (1234) und ausgewählten Anzeigenblock (travel/asia/food) an. Sie finden Ihren Netzwerkcode in DFP auf dem Tab "Admin".

    [728, 90] legt die Größe des Creatives für die Anzeigenfläche fest. Geben Sie hier an, welche Creative-Größen in dieser Anzeigenfläche geschaltet werden dürfen. Wenn Sie mehrere Größen angeben möchten, verwenden Sie die folgende Syntax: [[Breite1, Höhe1], [Breite2, Höhe2], [Breite3, Höhe3]]. Alle hier angegebenen Größen sollten auch mit dem Anzeigenblock verknüpft werden, auf den sich das Targeting richtet. So können Sie die Liste basierend auf der jeweiligen Anzeigenfläche eingrenzen. Bei Verwendung von Anzeigenflächen mit mehreren Größen sollten die Größen der Anzeigenflächen in derselben Reihenfolge angegeben werden, wie sie in DFP erscheinen. Weitere Informationen zur Anzeigenflächendefinition und Reihenfolge

  • Zeilen 23, 26, 37, 40, 44 und 47: Über "div-gpt-ad-123456789-0" werden die Anzeigenflächen, die im Kopfbereich definiert sind, mit den Anzeigenflächen auf der Seite abgeglichen, d. h. mit den div-Tags im Textkörper, wo die Creatives geschaltet werden. Sie können beliebig benannt werden, solange sie übereinstimmen. Unser Tag-Generator verwendet jedoch "div-gpt-ad-[Zufallszahl]-0", "div-gpt-ad-[Zufallszahl]-1" usw. Auf diese Art sind die Namen zwar ähnlich, aber doch genau differenziert.

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

  • Zeilen 25, 28, 29 und 30: Hier wird mit Hilfe der Funktion .setTargeting() das Schlüssel/Wert-Paar-Targeting auf Anzeigenflächenebene festgelegt. Sie können mehrere Werte mit einem Schlüssel zuordnen, wie im ersten Beispiel: ("Schlüssel*. ["Wert1", "Wert2", "Wert3"]). Wenn Sie mehrere Schlüssel ausrichten möchten, rufen Sie die Funktion wie im zweiten Fall mehrfach auf:gender=male und age=20-30. Weitere Informationen zum Festlegen von Schlüssel/Wert-Parametern in GPT finden Sie in der Dokumentation zur Funktion .setTargeting() sowie in unserem Artikel "Einrichten des Targetings und der Größen mit GPT".

  • Zeile 30: googletag.pubads().setTargeting("topic","basketball"); legt das Schlüssel/Wert-Targeting auf Seitenebene fest. Beachten Sie, dass beim benutzerdefiniertem Targeting auf Seitenebene alle Anzeigenflächen diese benutzerdefinierten Targeting-Werte übernehmen. Wie beim benutzerdefinierten Targeting auf der Ebene der Anzeigenfläche können Sie mit einem Schlüssel mehrere Werte verknüpfen:"Schlüssel". ["Wert1", "Wert2", "Wert3"]. Weitere Informationen zum Festlegen von Schlüssel/Wert-Paar-Parametern im GPT finden Sie in der Dokumentation zur Funktion .setTargeting() sowie in unserem Artikel Einrichten des Targetings und der Größen mit GPT.

  • Zeile 31: googletag.pubads().enableSingleRequest(); aktiviert Single Request Architecture (SRA). Fügen Sie diese Zeile hinzu, wenn Sie alle Anzeigenflächen auf der Seite gemeinsam aufrufen möchten. Dies ermöglicht garantierte Roadblocks und eventuell eine bessere Leistung für Ihre Seite, wenn die Anzeigen in einem einzigen Aufruf zusammengefasst werden. Was könnte gegen SRA sprechen? SRA unterstützt derzeit weder die Rewind-Funktion über DoubleClick-Tags (InRed-Tags) noch programmierbare Google-Anzeigen (GPA).

  • Zeile 37: (Optional) style="width: 728px; height: 90px" ist die Größe des Elements, bevor das Creative vollständig dargestellt wird. Bei der Verwendung von Tags mit mehreren Größen empfiehlt es sich, diese Zeile wegzulassen. Dann übernimmt das Element die Größe des ausgewählten Creatives nach dem Rendern. Wenn Sie die Zeile dennoch verwenden möchten, machen Sie beide Abmessungen so groß, dass das größte zulässige Creative verwendet werden kann. Bei Anzeigen-Tags mit einer einzigen Größe können Sie mit dieser Zeile das Container-Element maximieren, bis das Creative geladen wird, damit die anderen Seitenelemente beim Rendern des Creatives nicht verschoben werden.

2 <head>
3 <script type="text/javascript">
4   var googletag = googletag || {};
5   googletag.cmd = googletag.cmd || [];
6   (function() {
7     var gads = document.createElement("script");
8     gads.async = true;
9     gads.type = "text/javascript";
10     var useSSL = "https:" == document.location.protocol;
11     gads.src = (useSSL ? "https:" : "http:") + "//www.googletagservices.com/tag/js/gpt.js";
12     var node =document.getElementsByTagName("script")[0];
13     node.parentNode.insertBefore(gads, node);
14    })();
15 </script>
16 <script type="text/javascript">
17   googletag.cmd.push(function() {
18     googletag.pubads().set("adsense_background_color", "FFFFFF");
19   });
20 </script>
21 <script>
22   googletag.cmd.push(function() {
23     googletag.defineSlot("/1234/travel/asia/food", [728, 90], "div-gpt-ad-123456789-0")
24       .addService(googletag.pubads())
25       .setTargeting("interests", ["sports", "music", "movies"]);
26     googletag.defineSlot("/1234/travel/asia/food", [[468, 60], [728, 90], [300, 250]], "div-gpt-ad-123456789-1")
27       .addService(googletag.pubads())
28       .setTargeting("gender", "male")
29       .setTargeting("age", "20-30");
30     googletag.pubads().setTargeting("topic","basketball");
31     googletag.pubads().enableSingleRequest();
32     googletag.enableServices();
33   });
34 </script>
35 </head>
36 <body>
37   <div id="div-gpt-ad-123456789-0" style="width: 728px; height: 90px">
38     <script type="text/javascript">
39       googletag.cmd.push(function() {
40       googletag.display("div-gpt-ad-123456789-0");
41       });
42     </script>
43   </div>
44     <div id="div-gpt-ad-123456789-1">
45     <script type="text/javascript">
46       googletag.cmd.push(function() {
47          googletag.display("div-gpt-ad-123456789-1");
48       });
49     </script>
50   </div>
51 </body>
52 </html>
 

Beispiel eines synchronen Google Publisher-Tags

Im Folgenden finden Sie ein Beispiel für den vollständigen Code, mit dem Sie ein synchrones Google Publisher-Tag erstellen können. Dieses Tag veranschaulicht die Syntax und viele gebräuchliche Funktionen, die in einer synchronen GPT-Anzeigenanfrage verwendet werden.

Weitere Informationen zum Generieren von Google Publisher-Tags finden Sie im Artikel Tags in DFP erstellen.

1 <html>
  • Die Zeilen 3 bis 10 sind Bausteine, durch die die von DFP verwendete GPT-JavaScript-Bibliothek automatisch geladen wird. Falls erforderlich, wird SSL bzw. HTTPS verwendet. Hier wird die Befehlswarteschlange erstellt, mit der die Liste der Funktionen (im Allgemeinen Anzeigenaufrufe) verwaltet wird, die asynchron verarbeitet werden sollen. Publisher müssen in diesem Bereich des Codes keine Änderungen vornehmen.

  • Optional: In den Zeilen 11 bis 13 werden Attribute für Anzeigenflächen auf Seitenebene festgelegt, die in AdSense geschaltet werden. Hier vorgenommene Einstellungen überschreiben jegliche Formate, die in DFP oder AdSense vorgenommen wurden. Diese Option wird im Allgemeinen nicht verwendet, da die Werte in DFP eingestellt werden können. Weitere Informationen zum Einrichten von AdSense-Parametern in GPT finden Sie in der Dokumentation zur Funktion .set() in der Hilfe.

  • Zeilen 15 und 18: "/1234/travel/asia/food" gibt den Netzwerkcode (1234) und ausgewählten Anzeigenblock (travel/asia/food) an. Sie finden Ihren Netzwerkcode in DFP auf dem Tab "Admin".

    [728, 90] legt die Größe des Creatives für die Anzeigenfläche fest. Geben Sie hier an, welche Creative-Größen in dieser Anzeigenfläche geschaltet werden dürfen. Wenn Sie mehrere Größen angeben möchten, verwenden Sie die folgende Syntax: [[Breite1, Höhe1], [Breite2, Höhe2], [Breite3, Höhe3]]. Alle hier angegebenen Größen sollten auch mit dem Anzeigenblock verknüpft werden, auf den sich das Targeting richtet. So können Sie die Liste basierend auf der jeweiligen Anzeigenfläche eingrenzen. Bei Verwendung von Anzeigenflächen mit mehreren Größen sollten die Größen der Anzeigenflächen in derselben Reihenfolge angegeben werden, wie sie in DFP erscheinen. Weitere Informationen zur Anzeigenflächendefinition und Reihenfolge

    Zeilen 15, 18, 29, 31, 34 und 36: Mit "div-gpt-ad-123456789-0" werden die Anzeigenflächen, die im Kopfbereich definiert sind, mit den Anzeigenflächen auf der Seite abgeglichen, d. h. mit den div-Tags im Textkörper, wo die Creatives geschaltet werden. Sie können beliebig benannt werden, solange sie übereinstimmen. Unser Tag-Generator verwendet jedoch "div-gpt-ad-[Zufallszahl]-0", "div-gpt-ad-[Zufallszahl]-1" usw. Auf diese Art sind die Namen zwar ähnlich, aber doch genau differenziert.

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

  • Zeilen 17, 20, 21 und 22 (optional): Hier wird mit Hilfe der Funktion .setTargeting() das Schlüssel/Wert-Paar-Targeting auf Anzeigenflächenebene festgelegt. Sie können mehrere Werte mit einem Schlüssel zuordnen, wie im ersten Beispiel: ("Schlüssel". ["Wert1", "Wert2", "Wert3"]). Wenn Sie mehrere Schlüssel ausrichten möchten, rufen Sie die Funktion wie im zweiten Fall mehrfach auf:gender=male und age=20-30. Weitere Informationen zum Festlegen von Schlüssel/Wert-Parametern in GPT finden Sie in der Dokumentation zur Funktion .setTargeting() sowie in unserem Artikel "Einrichten des Targetings und der Größen mit GPT".

  • Zeile 22: googletag.pubads().setTargeting("topic","basketball"); legt das Schlüssel/Wert-Targeting auf Seitenebene fest. Beachten Sie, dass beim benutzerdefiniertem Targeting auf Seitenebene alle Anzeigenflächen diese benutzerdefinierten Targeting-Werte übernehmen. Wie beim benutzerdefinierten Targeting auf der Ebene der Anzeigenfläche können Sie mit einem Schlüssel mehrere Werte verknüpfen:"Schlüssel". ["Wert1", "Wert2", "Wert3"]. Weitere Informationen zum Festlegen von Schlüssel/Wert-Paar-Parametern im GPT finden Sie in der Dokumentation zur Funktion .setTargeting() sowie in unserem Artikel Einrichten des Targetings und der Größen mit GPT.

  • Zeile 23: googletag.pubads().enableSingleRequest(); aktiviert Single Request Architecture (SRA). Fügen Sie diese Zeile hinzu, wenn Sie alle Anzeigenflächen auf der Seite gemeinsam aufrufen möchten. Dies ermöglicht garantierte Roadblocks und eventuell eine bessere Leistung für Ihre Seite, wenn die Anzeigen in einem einzigen Aufruf zusammengefasst werden. Was könnte gegen SRA sprechen? SRA unterstützt derzeit weder die Rewind-Funktion über DoubleClick-Tags (InRed-Tags) noch programmierbare Google-Anzeigen (GPA).

  • Zeile 24: Um die Creatives synchron zu rendern, fügen Sie googletag.pubads().enableSyncRendering(); hinzu. Damit wird der Dienst angewiesen, auf den Abschluss jeder Anzeigenanfrage zu warten, bevor das Rendern der Seite fortgesetzt wird.

  • Zeile 29: (Optional) style="width: 728px; height: 90px" ist die Größe des Elements, bevor das Creative vollständig dargestellt wird. Bei der Verwendung von Tags mit mehreren Größen empfiehlt es sich, diese Zeile wegzulassen. Dann übernimmt das Element die Größe des ausgewählten Creatives nach dem Rendern. Wenn Sie die Zeile dennoch verwenden möchten, machen Sie beide Abmessungen so groß, dass das größte zulässige Creative verwendet werden kann. Bei Anzeigen-Tags mit einer einzigen Größe können Sie mit dieser Zeile das Container-Element maximieren, bis das Creative geladen wird, damit die anderen Seitenelemente beim Rendern des Creatives nicht verschoben werden.

2 <head>
3 <script type="text/javascript">
4   (function() {
5   var useSSL = 'https:' == document.location.protocol;
6   var src = (useSSL ? 'https:' : 'http:') +
7 '//www.googletagservices.com/tag/js/gpt.js';
8   document.write('<scr' + 'ipt src="' + src + '"></scr' + 'ipt>');
9   })();
10 </script>
11 <script type="text/javascript">
12     googletag.pubads().set("adsense_background_color", "FFFFFF");
13 </script>
14 <script>
15     googletag.defineSlot("/1234/travel/asia/food", [728, 90], "div-gpt-ad-123456789-0")
16       .addService(googletag.pubads())
17       .setTargeting("interests", ["sports", "music", "movies"]);
18     googletag.defineSlot("/1234/travel/asia/food", [[468, 60], [728, 90], [300, 250]], "div-gpt-ad-123456789-1")
19       .addService(googletag.pubads())
20       .setTargeting("gender", "male")
21       .setTargeting("age", "20-30");
22     googletag.pubads().setTargeting("topic","basketball");
23     googletag.pubads().enableSingleRequest();
24     googletag.pubads().enableSyncRendering();
25     googletag.enableServices();
26 </script>
27 </head>
28 <body>
29   <div id="div-gpt-ad-123456789-0" style="width: 728px; height: 90px">
30     <script type="text/javascript">
31       googletag.display("div-gpt-ad-123456789-0");
32     </script>
33   </div>
34   <div id="div-gpt-ad-123456789-1">
35     <script type="text/javascript">
36       googletag.display("div-gpt-ad-123456789-1");
37     </script>
38   </div>
39 </body>
40 </html>
 

Vorgehensweise, wenn Sie die Header Ihrer Webseiten nicht bearbeiten können

Sie können Anzeigenblöcke beim Laden der Seite in den einzelnen Anzeigen-Tags als Inline-Elemente definieren. Obwohl dies nicht die empfohlene Tagging-Methode ist, ist diese Vorgehensweise eventuell erforderlich, falls Sie nicht die Möglichkeit haben, den Header zu bearbeiten.

Da das Anzeigen-Tag die GPT-JavaScript-Bibliothek verwendet, muss der Code, der die Bibliothek lädt, vor dem Anzeigen-Tag-Code eingebunden werden. Der Code, der die Bibliothek lädt, ist im nachstehenden Beispiel enthalten.

Die folgenden Beispiele zeigen, wie Sie eine Anzeigenfläche beim Laden der Seite definieren:

Beispiel für asynchrones GPT

GPT-JavaScript-Bibliothek aufrufen

<script type="text/javascript">
 var googletag = googletag || {};
 googletag.cmd = googletag.cmd || [];
 (function() {
   var gads = document.createElement("script");
   gads.async = true;
   gads.type = "text/javascript";
   var useSSL = "https:" == document.location.protocol;
   gads.src = (useSSL ? "https:" : "http:") + "//www.googletagservices.com/tag/js/gpt.js";
   var node =document.getElementsByTagName("script")[0];
   node.parentNode.insertBefore(gads, node);
  })();
</script>

Anzeigen-Tag-Beispiel 1: asynchrones Inline-Tag. Diese Methode bietet keine Unterstützung für SRA.

<div id="div-gpt-ad-1234567891234-0">
  <script type='text/javascript'>
    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>

Anzeigen-Tag-Beispiel 2: asynchrones verkürztes Inline-Tag. Diese Methode unterstützt weder SRA noch das Targeting auf Ebene der Anzeigenfläche.

<div id='div-gpt-ad-1234567891234-0'>
  <script type='text/javascript'>
    googletag.cmd.push(function() {
      googletag.pubads().display('/1234/sports/football', [728, 90], 'div-gpt-ad-1234567891234-0');
    });
  </script>
</div>
Beispiel für synchrones GPT

GPT-JavaScript-Bibliothek aufrufen

<script type="text/javascript">
 (function() {
   var useSSL = 'https:' == document.location.protocol;
   var src = (useSSL ? 'https:' : 'http:') + '//www.googletagservices.com/tag/js/gpt.js';
   document.write('<scr' + 'ipt src="' + src + '"></scr' + 'ipt>');
 })();
</script>

Anzeigen-Tag-Beispiel 1: Synchrones Inline-Tag. Diese Methode bietet keine Unterstützung für SRA.

<div id='div-gpt-ad-1234567891234-0'>
  <script type='text/javascript'>
    googletag.defineSlot('/1234/sports/football', [728, 90],'div-gpt-ad-1234567891234-0')
      .addService(googletag.pubads())
      .setTargeting("Gender", "Male");
    googletag.pubads().enableSyncRendering();
    googletag.enableServices();googletag.display('div-gpt-ad-1234567891234-0');
  </script>
</div>

Anzeigen-Tag-Beispiel 2: Verkürzte Inline-Tags. Diese Methode unterstützt weder SRA noch das Targeting auf Anzeigenflächenebene.

<div id='div-gpt-ad-1234567891234-0'>
  <script type='text/javascript'>
    googletag.pubads().display('/1234/sports/football', [728, 90], 'div-gpt-ad-1234567891234-0');
  </script>
</div>

AdSense-Formatierungen auf Seitenebene überschreiben (optional)

In den meisten Fällen haben Sie für Ihre AdSense-Anzeigen bereits in DFP oder AdSense eine Formatierung festgelegt. Wenn Sie diese Formatierung jedoch auf Seitenebene individuell überschreiben möchten, können Sie in Ihre Tags den folgenden Code einfügen.

Für asynchrone Tags:

<script>
  googletag.cmd.push(function() {
    googletag.pubads().set("adsense_background_color", "FFFFFF");
  });
</script>

Für synchrone Tags:

<script>
  googletag.pubads().set("adsense_background_color", "FFFFFF");
</script>

Verwenden Sie ein GPT-Tag ohne JavaScript, um ein 1x1-Tracking-Pixel zu erstellen:

So erstellen Sie einen Impressions-Tracker mit GPT:

  1. Erstellen Sie einen neuen Anzeigenblock oder wählen Sie einen vorhandenen aus, mit dem die Anzahl der Impressionen verfolgt werden soll.

  2. Erstellen Sie eine 1x1-Werbebuchung und fügen Sie zu dieser ein benutzerdefiniertes oder ein Drittanbieter-Creative mit transparentem Pixel hinzu.

  3. Richten Sie die 1x1-Werbebuchung auf den Tracking-Anzeigenblock aus.

  4. Erstellen Sie ein GPT-Tag ohne JavaScript, welches das Impressionspixel aufruft.

    Unten finden Sie ein Beispiel für den Code, den Sie zum Creative-Code hinzufügen würden, um einen 1 x 1-Impressions-Tracker ohne JavaScript-Tag-Format zu erstellen:

    <img src='http://pubads.g.doubleclick.net/gampad/ad?iu=/1234/ad_unit&sz=1x1&t=&c=12345678'/>
  5. Verwenden Sie das Impressions-Pixel-Tag auf eine der folgenden beiden Arten:

    • Fügen Sie das Tag zu einem benutzerdefinierten oder Drittanbieter-Creative hinzu, das auf der Seite geschaltet wird: Fügen Sie das Tag auf dem Tab "Einstellungen" des Creatives oben im Feld "Code-Snippet" hinzu.

    • Fügen Sie das Tag direkt zur Webseite hinzu.

Weitere Informationen zum Erstellen von URLs, die nicht auf JavaScript basieren, finden Sie in unserem Artikel Anzeigen in Umgebungen ohne JavaScript schalten.