Beispiele für Google Publisher-Tags

In diesem Artikel finden Sie Beispiele für Google Publisher-Tags für Implementierungen auf Desktop-Computern und Mobilgeräten. Lesen Sie, wie Sie das Google Publisher-Tag-Generierungstool zur automatischen Erstellung von Google Publisher-Tags einsetzen.

Inhalt dieses Artikels:

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, in der Regel Anzeigenaufrufe, verwaltet wird, die asynchron verarbeitet werden sollen. Publisher müssen in diesem Bereich des Codes keine Änderungen vornehmen.

  • Optional: In den Zeilen 16 bis 20 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 zur Einrichtung von AdSense-Parametern in Google Publisher-Tags erhalten Sie in der Google Developers-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, für den das Targeting festgelegt wurde. 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 DFP-Hilfe im Artikel Targeting und Größen mit GPT einrichten.

  • 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. Dadurch sind die Namen zwar ähnlich, aber gut zu unterscheiden. Es ist wichtig, an einer bestimmten Position auf einer Seite die gleiche ID für <div> zu verwenden, 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 für ein GPT eine Anzeigenanfrage eindeutig identifiziert wird. 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 Google Publisher-Tags erhalten Sie in der Dokumentation zur Funktion .setTargeting() sowie in unserem Artikel "Targeting und Größen mit GPT einrichten". 

  • 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 Google Publisher-Tags erhalten Sie in der Dokumentation zur Funktion .setTargeting() sowie in unserem Artikel Targeting und Größen mit GPT einrichten.

  • 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. Gegen die SRA spricht, dass sie derzeit keine programmierbaren Google-Anzeigen (Google Programmable Ads – GPA) unterstützt.

  • 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, legen Sie beide Abmessungen so groß fest, 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. 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 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, in der Regel 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 zur Einrichtung von AdSense-Parametern in Google Publisher-Tags erhalten Sie in der Google Developers-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, für den das Targeting festgelegt wurde. 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 DFP-Hilfe im Artikel Targeting und Größen mit GPT einrichten.

    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. Dadurch sind die Namen zwar ähnlich, aber gut zu unterscheiden. Es ist wichtig, an einer bestimmten Position auf einer Seite die gleiche ID für <div> zu verwenden, 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 für ein GPT eine Anzeigenanfrage eindeutig identifiziert wird. 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 Google Publisher-Tags erhalten Sie in der Dokumentation zur Funktion .setTargeting() sowie in unserem Artikel "Targeting und Größen mit GPT einrichten". 

  • 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 Google Publisher-Tags erhalten Sie in der Dokumentation zur Funktion .setTargeting() sowie in unserem Artikel Targeting und Größen mit GPT einrichten.

  • 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. Gegen die SRA spricht, dass sie derzeit keine programmierbaren Google-Anzeigen (Google Programmable Ads – GPA) unterstützt.

  • 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, legen Sie beide Abmessungen so groß fest, 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 GPT verwenden, ohne den Header der Webseiten zu ändern, indem Sie Anzeigenblöcke inline dort definieren, wo der Anzeigenblock auf der Seite erscheint, anstatt im Header der Seite. Für dynamisch erstellte Seiten kann es hilfreich sein, Anzeigenblock-Definitionen inline in die Seite zu einzu, wenn Abschnitte erstellt werden.

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 dazu führt, dass die Bibliothek geladen wird, ist im Beispiel unten enthalten.

Wir empfehlen, den GPT-Code sofern möglich im Header der Webseiten zu platzieren, um die Implementierung zu vereinfachen. Der in diesem Abschnitt erläuterte Ansatz sollte nur verwendet werden, wenn Sie keine Möglichkeit haben, den Header der Seite zu bearbeiten.

Anhand der folgenden Beispiele sehen Sie, 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

<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 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

<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 Targeting auf Anzeigenflächenebene)

<div id='div-gpt-ad-1234567891234-0'>
  <script type='text/javascript'>
    googletag.pubads().enableSyncRendering().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 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.

Erstellen von URLs, die nicht auf JavaScript basieren

War dieser Artikel hilfreich?