Google Publisher-Tags erstellen

Beispiel für 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. Lesen Sie, wie Sie den Tag-Generator von Google zur automatischen Erstellung von GPTs nutzen.

Der Artikel enthält außerdem Informationen zur Problembehebung beim Bearbeiten des Headers Ihrer Webseiten und zum Erstellen eines 1 × 1-Tracking-Pixels ohne JavaScript.

GPT-Geschwindigkeit optimieren, indem die Domain der gehosteten Bibliothek aktualisiert wird

Die Google Publisher Tag-Bibliothek wird jetzt unter https://securepubads.g.doubleclick.net/tag/js/gpt.js gehostet, zusätzlich zur Domain googletagservices.com. Obwohl dies nicht erforderlich ist, empfehlen wir dringend, alle Verweise auf GPTs auf Ihren Seiten zu aktualisieren, um diese neue Domain zu verwenden.

Durch diese Änderung werden alle Ad Serving-Anfragen in einer statt in zwei Domains zusammengefasst. Das bedeutet, dass der Browser nur eine Verbindung zu einer Domain herstellen muss. Die Bibliothek ist in beiden Domains identisch.

Dies führt zu einer höheren Tag-Geschwindigkeit, sodass Anzeigen etwas schneller abgerufen werden.

Beispiel eines Google Publisher-Tags

Code ohne Tipps anzeigen
1 <html>
2 <head>
3 <script async="async" src="https://securepubads.g.doubleclick.net/tag/js/gpt.js">
4 </script>
5 <script>
6   window.googletag = window.googletag || {cmd: []};
7 </script>
8 <script>
9   googletag.cmd.push(function() {
10     googletag.pubads().set("adsense_background_color", "FFFFFF");
11   });
12 </script>
13 <script>
14   googletag.cmd.push(function() {
15     googletag.defineSlot("/1234/travel/asia", [728, 90], "div-gpt-ad-123456789-0")
16       .addService(googletag.pubads())
17       .setTargeting("interests", ["sports", "music", "movies"]);
18     googletag.defineSlot("/1234/travel/asia", [[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.enableServices();
25   });
26 </script>
27 </head>
28 <body>
29   <div id="div-gpt-ad-123456789-0" style="width: 728px; height: 90px">
30     <script>
31       googletag.cmd.push(function() {
32          googletag.display("div-gpt-ad-123456789-0");
33       });
34     </script>
35   </div>
36     <div id="div-gpt-ad-123456789-1">
37     <script>
38       googletag.cmd.push(function() {
39          googletag.display("div-gpt-ad-123456789-1");
40       });
41     </script>
42   </div>
43 </body>
44 </html>
 
1 <html>
2 <head>
3 <script async="async" src="https://securepubads.g.doubleclick.net/tag/js/gpt.js">
4 </script>
5 <script>
6   window.googletag = window.googletag || {cmd: []};
7 </script>

Zeilen 3–7: Die Zeilen 3 bis 7 sind Textbausteine, mit denen die in Ad Manager verwendete GPT-Bibliothek über 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.

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

Zeilen 8 bis 12 (optional): In diesen Zeilen werden Attribute für Anzeigenflächen auf Seitenebene festgelegt, die in AdSense ausgeliefert werden. Wenn Sie diese Attribute ändern, werden alle in Ad Manager oder AdSense festgelegten Stile überschrieben. Diese Funktion wird im Allgemeinen nicht verwendet, da die Einstellungen in Ad Manager vorgenommen werden können. In der Entwicklerdokumentation für die Funktion .set() wird beschrieben, wie Sie AdSense-Parameter in GPTs einrichten.

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

Zeile 15: "/1234/travel/asia" gibt den Netzwerkcode (1234) und den Anzeigenblock (travel/asia) an, auf den Anzeigen ausgerichtet sind. Sie finden den Code 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

16       .addService(googletag.pubads())
17       .setTargeting("interests", ["sports", "music", "movies"]);
18     googletag.defineSlot("/1234/travel/asia", [[468, 60], [728, 90], [300, 250]], "div-gpt-ad-123456789-1")
19       .addService(googletag.pubads())
20       .setTargeting("gender", "male")
21       .setTargeting("age", "20-30");

Zeilen 17, 20 und 21: 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 zu sehen: (gender=male und age=20-30).

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

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

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

23     googletag.pubads().enableSingleRequest();

Zeile 23: 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.

24     googletag.enableServices();
25   });
26 </script>
27 </head>
28 <body>
29   <div id="div-gpt-ad-123456789-0" style="width: 728px; height: 90px">

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

30     <script>
31       googletag.cmd.push(function() {
32          googletag.display("div-gpt-ad-123456789-0");
33       });
34     </script>
35   </div>
36     <div id="div-gpt-ad-123456789-1">
37     <script>
38       googletag.cmd.push(function() {

Zeilen 9, 14, 31 und 38: In die Befehlswarteschlange werden Funktionsaufrufe eingefügt, damit sie beim Laden der Seite asynchron ausgeführt werden.

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

Zeilen 15, 18, 29, 32, 36 und 39: Ü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.

40       });
41     </script>
42   </div>
43 </body>
44 </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 dafür, wie Sie eine Anzeigenfläche inline definieren.

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://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<script>
 window.googletag = window.googletag || {cmd: []};
</script>

Beispiel 1 für das Anzeigen-Tag – 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 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>

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 der Seite "Einstellungen" des Creatives oben im Feld "Code-Snippet" hinzu.

    • Fügen Sie das Tag direkt auf der Webseite ein.

War das hilfreich?
Wie können wir die Seite verbessern?