Suche
Suche löschen
Suche schließen
Google-Apps
Hauptmenü

Beispiele für Google Publisher-Tags

Dieser Artikel enthält Beispiele für Google Publisher-Tags (GPTs) zur Implementierung für Desktop-Computer und Mobilgeräte. Lesen Sie, wie Sie den Tag-Generator von Google zur automatischen Erstellung von GPTs nutzen.

Dieser Artikel enthält Folgendes:

Beispiel für ein asynchrones Google Publisher-Tag

Im Folgenden sehen Sie ein Beispiel für den vollständigen Code zum Erstellen eines asynchronen Google Publisher-Tags. Mit dem Beispiel werden viele gängige Funktionen und die Syntax in einer asynchronen GPT-Anzeigenanfrage veranschaulicht. Weitere Informationen zum Generieren von Tags in DFP

1 <html>
  • Die Zeilen 3 bis 8 sind Textbausteine, mit denen die von DFP verwendete GPT-Bibliothek unter Verwendung von SSL/HTTPS asynchron geladen wird. Hier wird die Befehlswarteschlange erstellt, mit der die Liste der Funktionen (im Allgemeinen Anzeigenaufrufe) verwaltet wird, die asynchron verarbeitet werden sollen. Dieser Bereich des Codes muss nicht bearbeitet werden.

  • (Optional) In den Zeilen 9 bis 13 werden Attribute für Anzeigenflächen auf Seitenebene festgelegt, die in AdSense bereitgestellt werden. Wenn Sie diese Attribute ändern, werden alle in DFP oder AdSense festgelegten Stile überschrieben. Diese Funktion wird im Allgemeinen nicht verwendet, da die Einstellungen in DFP vorgenommen werden können. In der Entwicklerdokumentation für die Funktion .set() wird beschrieben, wie AdSense-Parameter in GPTs eingerichtet werden.

  • Zeilen 10, 15, 32 und 39: Bei Verwendung des asynchronen Renderings werden alle Skripts nach dem ersten Skriptbaustein in der Funktion googletag.cmd.push in Zeile 10 eingefügt. Dadurch wird die Funktion der Befehlswarteschlange hinzugefügt, damit sie beim Laden der Seite asynchron ausgeführt wird. Weitere Informationen zu den Unterschieden zwischen dem synchronen und dem asynchronen Rendering

  • Zeile 16: "/1234/travel/asia" gibt den Netzwerkcode (1234) und den Anzeigenblock (travel/asia) an, auf den Anzeigen ausgerichtet sind. Sie finden Ihren Netzwerkcode in DFP auf dem Tab "Admin".

    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. Bei Verwendung von Anzeigenflächen mit 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

  • Zeilen 16, 19, 30, 33, 37 und 40: Ü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, wo die Creatives bereitgestellt werden. Sie können beliebig benannt werden, solange sie übereinstimmen. Vom Tag-Generator wird 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 DFP-Inventars, zur Anzeigenblockhierarchie und dazu, wie das Targeting von Anzeigenblöcken übernommen wird, erhalten Sie im Artikel "Inventarübersicht".

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

    In der Entwicklerdokumentation für die Funktion .setTargeting() wird beschrieben, wie Sie Schlüssel/Wert-Paar-Parameter in GPTs einrichten. Weitere Informationen zum Festlegen eines Targetings und von Größen mit GPTs

  • Zeile 23: 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"]).

  • Zeile 24: Mit googletag.pubads().enableSingleRequest(); wird die Einzelanfrage-Architektur aktiviert. Fügen Sie diese Zeile hinzu, um alle Anzeigenflächen auf der Seite gemeinsam aufzurufen. Dies ermöglicht garantierte Roadblocks und eventuell eine bessere Leistung für Ihre Seite. Derzeit werden Google Programmable Ads (GPA) nicht von der Einzelanfrage-Architektur unterstützt.

  • Zeile 30 (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 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, sodass andere Elemente auf der Seite nicht verschoben werden, wenn das Creative erscheint.

2 <head>
3 <script async="async" src="https://www.googletagservices.com/tag/js/gpt.js">
4 </script>
5 <script>
6   var googletag = googletag || {};
7   googletag.cmd = googletag.cmd || [];
8 </script>
9 <script>
10   googletag.cmd.push(function() {
11     googletag.pubads().set("adsense_background_color", "FFFFFF");
12   });
13 </script>
14 <script>
15   googletag.cmd.push(function() {
16     googletag.defineSlot("/1234/travel/asia", [728, 90], "div-gpt-ad-123456789-0")
17       .addService(googletag.pubads())
18       .setTargeting("Interessen", ["Sport", "Musik", "Filme"]);
19     googletag.defineSlot("/1234/travel/asia", [[468, 60], [728, 90], [300, 250]], "div-gpt-ad-123456789-1")
20       .addService(googletag.pubads())
21       .setTargeting("gender", "male")
22       .setTargeting("age", "20-30");
23     googletag.pubads().setTargeting("topic","basketball");
24     googletag.pubads().enableSingleRequest();
25     googletag.enableServices();
26   });
27 </script>
28 </head>
29 <body>
30   <div id="div-gpt-ad-123456789-0" style="width: 728px; height: 90px">
31     <script>
32       googletag.cmd.push(function() {
33          googletag.display("div-gpt-ad-123456789-0");
34       });
35     </script>
36   </div>
37     <div id="div-gpt-ad-123456789-1">
38     <script>
39       googletag.cmd.push(function() {
40          googletag.display("div-gpt-ad-123456789-1");
41       });
42     </script>
43   </div>
44 </body>
45 </html>
 

Beispiel eines synchronen Google Publisher-Tags

Nachfolgend sehen Sie ein Beispiel des vollständigen Codes für das Erstellen eines synchronen Google Publisher-Tags. In diesem Beispiel werden die Syntax und viele gebräuchliche Funktionen veranschaulicht, die in einer synchronen GPT-Anzeigenanfrage verwendet werden.

Wir empfehlen, synchrone Anfragen nicht zu aktivieren, da diese zu Verzögerungen beim Laden des Seitencontents führen können. Verwenden Sie stattdessen asynchrone Tags. Sehen Sie sich weitere Informationen zu asynchronen Tags sowie Anwendungsfälle an, in denen der Einsatz synchroner Tags weiterhin empfohlen wird.
Bei Nutzern mit langsamen Verbindungen wie 2G kann das dynamische Einfügen externer Skripte über document.write() dazu führen, dass sich das Anzeigen des Contents der Hauptseite mehrere Sekunden verzögert. Dies ist ein weiterer Grund, warum wir die Verwendung asynchroner Tags statt eines synchronen Renderings empfehlen. Weitere Informationen zu den Problemen mit 2G und document.write()
1 <html>
  • Die Zeilen 3 und 4 sind Textbausteine, mit denen die von DFP verwendete GPT-JavaScript-Bibliothek gegebenenfalls unter Verwendung von SSL/HTTPS synchron geladen wird. Hier wird die Befehlswarteschlange erstellt, mit der die Liste der Funktionen (im Allgemeinen Anzeigenaufrufe) verwaltet wird, die synchron verarbeitet werden sollen. Dieser Bereich des Codes muss nicht bearbeitet werden.

  • (Optional) In den Zeilen 5 bis 7 werden Attribute für Anzeigenflächen auf Seitenebene festgelegt, die in AdSense bereitgestellt werden. Wenn Sie diese Attribute ändern, werden alle in DFP oder AdSense festgelegten Stile überschrieben. Diese Option wird im Allgemeinen nicht verwendet, da die Einstellungen in DFP vorgenommen werden können. In der Entwicklerdokumentation für die Funktion .set() wird beschrieben, wie AdSense-Parameter in GPTs eingerichtet werden.

  • Zeilen 9 und 12: Mit "/1234/travel/asia" werden der Netzwerkcode (1234) und der Anzeigenblock (travel/asia) definiert, auf den Anzeigen ausgerichtet sind. Sie finden Ihren Netzwerkcode in DFP auf dem Tab "Admin".

    Mit [728, 90] wird angegeben, welche Creative-Größe für diese Anzeigenfläche zulässig ist. 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. Bei Verwendung von Anzeigenflächen mit 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

    Zeilen 9, 12, 23, 25, 28 und 30: Ü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 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 DFP-Inventars, zur Anzeigenblockhierarchie und dazu, wie das Targeting von Anzeigenblöcken übernommen wird, erhalten Sie im Artikel "Inventarübersicht".

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

    In der Entwicklerdokumentation für die Funktion .setTargeting() wird beschrieben, wie Sie Schlüssel/Wert-Paar-Parameter in GPTs einrichten. Weitere Informationen zum Festlegen eines Targetings und von Größen mit GPTs

  • 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"]).

  • Zeile 17: Mit googletag.pubads().enableSingleRequest(); wird die Einzelanfrage-Architektur aktiviert. Fügen Sie diese Zeile hinzu, um alle Anzeigenflächen auf der Seite gemeinsam aufzurufen. Dies ermöglicht garantierte Roadblocks und eventuell eine bessere Leistung für Ihre Seite. Derzeit werden Google Programmable Ads (GPA) nicht von der Einzelanfrage-Architektur unterstützt.

  • Zeile 18: Damit die Creatives synchron gerendert werden, fügen Sie googletag.pubads().enableSyncRendering(); hinzu. Dadurch wird der Dienst angewiesen, auf den Abschluss jeder Anzeigenanfrage zu warten, bevor das Rendering der Seite fortgesetzt wird.

  • Zeile 23 (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 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, sodass andere Elemente auf der Seite nicht verschoben werden, wenn das Creative erscheint.

2 <head>
3 <script src="https://www.googletagservices.com/tag/js/gpt.js"> 
4 </script>
5 <script type="text/javascript">
6     googletag.pubads().set("adsense_background_color", "FFFFFF");
7 </script>
8 <script>
9     googletag.defineSlot("/1234/travel/asia", [728, 90], "div-gpt-ad-123456789-0")
10       .addService(googletag.pubads())
11       .setTargeting("Interessen", ["Sport", "Musik", "Filme"]);
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");
16     googletag.pubads().setTargeting("topic","basketball");
17     googletag.pubads().enableSingleRequest();
18     googletag.pubads().enableSyncRendering();
19     googletag.enableServices();
20 </script>
21 </head>
22 <body>
23   <div id="div-gpt-ad-123456789-0" style="width: 728px; height: 90px">
24     <script type="text/javascript">
25       googletag.display("div-gpt-ad-123456789-0");
26     </script>
27   </div>
28   <div id="div-gpt-ad-123456789-1">
29     <script type="text/javascript">
30       googletag.display("div-gpt-ad-123456789-1");
31     </script>
32   </div>
33 </body>
34 </html>
 

Wenn der Header Ihrer Webseiten nicht bearbeitet werden kann

Sie können Google Publisher-Tags verwenden, ohne den Header der Webseiten zu ändern.

Möglichkeit 1: 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. Nachfolgend sehen Sie ein Beispiel für das Definieren einer Anzeigenfläche inline.

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

Beispiel für ein asynchrones 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://www.googletagservices.com/tag/js/gpt.js"></script>
<script>
 var googletag = googletag || {};
 googletag.cmd = googletag.cmd || [];
</script>

Anzeigen-Tag-Beispiel 1 – asynchrones Inline-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>

Anzeigen-Tag-Beispiel 2: verkürztes asynchrones Inline-Tag (Targeting auf Anzeigenflächenebene nicht möglich)

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

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

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>

Beispiel 1 für das Anzeigen-Tag – 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 (Targeting auf Anzeigenflächenebene nicht möglich)

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

Möglichkeit 2: Nutzen Sie die herkömmliche GPT-Implementierung, fügen Sie die Definitionen der Anzeigenflächen aber in den HTML-Kö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.

Verwenden Sie ein GPT 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 an Impressionen erfasst werden soll.

  2. Erstellen Sie eine Werbebuchung mit einer Größe von 1 x 1 und fügen Sie ihm ein Bild-Creative mit transparentem Pixel hinzu.

  3. Richten Sie die 1x1-Werbebuchung auf den in Schritt 1 erstellten Anzeigenblock aus.

  4. Erstellen Sie ein GPT ohne JavaScript, über das das Impressionspixel aufgerufen und der in Schritt 1 erstellte Anzeigenblock definiert wird. Beispiel:

    <img src='http://pubads.g.doubleclick.net/gampad/ad?iu=/1234/ad_unit&sz=1x1&t=&c=12345678'/>

    Weitere Informationen zum Generieren von URLs, die nicht auf JavaScript basieren

  5. Verwenden Sie das Impressionspixel-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 der Webseite hinzu.

War dieser Artikel hilfreich?
Wie können wir die Seite verbessern?