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 zum automatischen Erstellen 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. Mit diesem Tag werden viele gängige Funktionen und die Syntax in einer asynchronen GPT-Anzeigenanfrage veranschaulicht.

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 festgelegt sind. Diese Option wird im Allgemeinen nicht verwendet, da die Einstellungen in DFP vorgenommen werden können. Weitere Informationen zum Einrichten von AdSense-Parametern in GPT erhalten Sie in der Hilfe in der Dokumentation zur Funktion .set().

  • Zeilen 17, 22, 39, 46: Wenn Sie asynchrones Rendering verwenden, umschließen Sie sämtliche JavaScript-Codes nach dem ersten Skriptbaustein in der Funktion googletag.cmd.push in Zeile 17. Damit wird die Funktion zur Befehlswarteschlange hinzugefügt, damit sie beim Seitenladevorgang asynchron verarbeitet wird. Weitere Informationen zu den Unterschieden zwischen synchronem und asynchronem Rendering erhalten Sie im Artikel Richtigen GPT-Modus und Tag-Typ auswählen.

  • Zeile 23: "/1234/travel/asia/food" gibt den Netzwerkcode (1234) und den gewünschten 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öße oder -Größen zum Schalten dieser Anzeigenfläche freigegeben werden. Geben Sie mehrere Größen über die folgende Syntax an: [[width1, height1], [width2, height2], [width3, height3]]. 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 in mehreren Größen sollten die Größen der Anzeigenflächen in derselben Reihenfolge deklariert werden, wie sie in DFP erscheinen. Weitere Informationen zur Anzeigenflächendefinition und Reihenfolge der Anzeigenauswahl erhalten Sie in der Hilfe im Artikel Einrichten des Targetings und der Größen mit GPT.

  • 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, also 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 "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 auf einer Seite nicht mehrere Instanzen desselben div-Namens befinden.

  • Zeilen 25, 28, 29 und 30 (optional): Hier wird mithilfe der Funktion .setTargeting() das Schlüssel/Wert-Paar-Targeting auf Anzeigenflächenebene festgelegt. Wie Sie im ersten Beispiel sehen ("Schlüssel". ["Wert1", "Wert2", "Wert3"]), können Sie einem Schlüssel mehrere Werte zuordnen. 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 Parametern für Schlüssel/Wert-Paare in GPT erhalten Sie in der Dokumentation zur Funktion .setTargeting() sowie in unserem Artikel "Einrichten des Targetings und der Größen mit GPT". 

  • Zeile 30: Mit googletag.pubads().setTargeting("topic","basketball"); wird das Schlüssel/Wert-Paar-Targeting auf Seitenebene festgelegt. Beim benutzerdefiniertem Targeting auf Seitenebene übernehmen alle Anzeigenflächen diese benutzerdefinierten Targeting-Werte. Wie beim benutzerdefinierten Targeting auf Ebene der Anzeigenfläche können Sie mehrere Werte mit einem Schlüssel verknüpfen: ("Schlüssel". ["Wert1", "Wert2", "Wert3"]). Weitere Informationen zum Festlegen von Parametern für Schlüssel/Wert-Paare in GPT erhalten 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 die 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 keine programmierbaren Google-Anzeigen (Google Programmable Ads – GPA).

  • Zeile 37 (optional): style="width: 728px; height: 90px" ist die Größe des Elements, bevor das Creative gerendert 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. Für Anzeigen-Tags mit einer einzigen Größe können Sie damit das Container-Element maximieren, bis das Creative geladen wird, damit die anderen Seitenelemente bei Darstellung 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. Mit diesem Tag werden die Syntax und viele gebräuchliche Funktionen veranschaulicht, die in einer synchronen GPT-Anzeigenanfrage verwendet werden.

Weitere Informationen zum Generieren von Google Publisher-Tags erhalten Sie im Artikel Anzeigen-Tags generieren.

1 <html>
  • Die Zeilen 3 bis 10 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: 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 festgelegt sind. Diese Option wird im Allgemeinen nicht verwendet, da die Einstellungen in DFP vorgenommen werden können. Weitere Informationen zum Einrichten von AdSense-Parametern in GPT erhalten Sie in der Hilfe in der Dokumentation zur Funktion .set().

  • Zeilen 15 und 18: "/1234/travel/asia/food" gibt den Netzwerkcode (1234) und den gewünschten 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öße oder -Größen zum Schalten dieser Anzeigenfläche freigegeben werden. Geben Sie mehrere Größen über die folgende Syntax an: [[width1, height1], [width2, height2], [width3, height3]]. 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 in mehreren Größen sollten die Größen der Anzeigenflächen in derselben Reihenfolge deklariert werden, wie sie in DFP erscheinen. Weitere Informationen zur Anzeigenflächendefinition und Reihenfolge der Anzeigenauswahl erhalten Sie in der Hilfe im Artikel Einrichten des Targetings und der Größen mit GPT.

    Zeilen 15, 18, 29, 31, 34 und 36: Über "div-gpt-ad-123456789-0" werden die Anzeigenflächen, die im Kopfbereich definiert sind, mit den Anzeigenflächen auf der Seite abgeglichen, also 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 "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 auf einer Seite nicht mehrere Instanzen desselben div-Namens befinden.

  • Zeilen 17, 20, 21 und 22 (optional): Hier wird mithilfe der Funktion .setTargeting() das Schlüssel/Wert-Paar-Targeting auf Anzeigenflächenebene festgelegt. Wie Sie im ersten Beispiel sehen ("Schlüssel". ["Wert1", "Wert2", "Wert3"]), können Sie einem Schlüssel mehrere Werte zuordnen. 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 Parametern für Schlüssel/Wert-Paare in GPT erhalten Sie in der Dokumentation zur Funktion .setTargeting() sowie in unserem Artikel "Einrichten des Targetings und der Größen mit GPT". 

  • Zeile 22: Mit googletag.pubads().setTargeting("topic","basketball"); wird das Schlüssel/Wert-Paar-Targeting auf Seitenebene festgelegt. Beim benutzerdefiniertem Targeting auf Seitenebene übernehmen alle Anzeigenflächen diese benutzerdefinierten Targeting-Werte. Wie beim benutzerdefinierten Targeting auf Ebene der Anzeigenfläche können Sie mehrere Werte mit einem Schlüssel verknüpfen: ("Schlüssel". ["Wert1", "Wert2", "Wert3"]). Weitere Informationen zum Festlegen von Parametern für Schlüssel/Wert-Paare in GPT erhalten 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 die 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 keine programmierbaren Google-Anzeigen (Google Programmable Ads – GPA).

  • Zeile 24: Damit die Creatives synchron gerendert werden, 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 gerendert 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 (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 – verkürztes asynchrones Inline-Tag (keine Unterstützung für SRA oder Targeting auf Anzeigenflächenebene)

<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 (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 (keine Unterstützung für SRA oder 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 1-x-1-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, mit dem das Impressionspixel aufgerufen wird.

    Unten finden Sie ein Beispiel für den Code, den Sie dem Creative-Code hinzufügen können, um einen Impressions-Tracker mit den Abmessungen 1 x 1 für das Tag-Format ohne JavaScript 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, erhalten Sie in diesem Artikel.