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. Verwenden Sie den Google Tag Generator, um das Tag automatisch zu generieren.
Entwickler und jene, die erweiterte Implementierungen von GPT benötigen, finden in der API-Referenz und den Beispielimplementierungen (z. B. Lazy Loading) weitere Informationen.
Erweiterte GPT-Beispiele ansehen
Beispielcode für ein Google Publisher-Tag
Für GPT sind zwei Codeabschnitte implementiert:
- Die GPT-Konfiguration befindet sich im
<head>der Webseite. - Die Aufrufe für jede spezifische Anzeigenfläche befinden sich im entsprechenden Abschnitt des
<body>.
Dieses Beispiel dient lediglich Informationszwecken. Wir empfehlen Ihnen, einen Entwickler den Code auf Ihrer Website implementieren zu lassen.
GPT-Konfiguration
Im folgenden Codebeispiel sehen Sie u. a. das Aufrufen der GPT-JavaScript-Bibliothek, das Definieren der Anzeigenflächen und das Schlüssel/Wert-Paar-Targeting.
1 |
<html> |
2 |
<head> |
3 |
<script async="async" src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script> |
4 |
<script> |
5 |
window.googletag = window.googletag || {cmd: []}; |
6 |
</script> |
|
Zeilen 3–6: Die in Ad Manager verwendete GPT-Bibliothek wird über SSL/HTTPS asynchron geladen. Hier wird die Befehlswarteschlange erstellt, mit der die Liste der Funktionen (in der Regel Anzeigenaufrufe) verwaltet wird, die asynchron verarbeitet werden sollen. Dieser Bereich des Codes muss nicht bearbeitet werden. |
|
| 7 | <script> |
| 8 | googletag.cmd.push(function() { |
| 9 | googletag.defineSlot("/1234/travel/asia", [728, 90], "div-gpt-ad-123456789-0") |
|
Zeile 9: Mit |
|
10 |
.addService(googletag.pubads()) |
11 |
.setTargeting("interests", ["sports", "music", "movies"]); |
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"); |
|
Zeilen 11, 14 und 15: Hier wird mithilfe von Weitere Informationen zum Festlegen des Targetings und der Größen mit GPT |
|
| 16 | googletag.pubads().setTargeting("topic","basketball"); |
|
Zeile 16: Mit 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: ( |
|
| 17 | googletag.pubads().enableSingleRequest(); |
|
Zeile 17: Mit |
|
| 18 | googletag.enableServices(); |
| 19 | }); |
20 |
</script> |
21 |
</head> |
22 |
<body> |
23 |
<div id="div-gpt-ad-123456789-0" style="width: 728px; height: 90px"> |
|
Zeile 23 (optional): 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. |
|
| 24 | <script> |
| 25 | googletag.cmd.push(function() { |
| 26 | googletag.display("div-gpt-ad-123456789-0"); |
| 27 | }); |
| 28 | </script> |
29 |
</div> |
30 |
<div id="div-gpt-ad-123456789-1"> |
31 |
<script> |
32 |
googletag.cmd.push(function() { |
|
Zeilen 8, 25 und 32: In die Befehlswarteschlange werden Funktionsaufrufe eingefügt, damit sie beim Laden der Seite asynchron ausgeführt werden. |
|
33 |
googletag.display("div-gpt-ad-123456789-1"); |
|
Zeilen 9, 12, 23, 26, 30 und 33: Über 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. |
|
| 34 | }); |
| 35 | </script> |
| 36 | </div> |
| 37 | </body> |
| 38 | </html> |
Erweiterte GPT-Beispiele ansehen
Wenn der Header Ihrer Webseiten nicht bearbeitet werden kann
Sie können GPT verwenden, ohne den <header> Ihrer Website zu ändern.
Möglichkeit 1: Inline-GPT
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.
Da die GPT-JavaScript-Bibliothek vom Anzeigen-Tag verwendet wird, muss der Code, mit dem die Bibliothek geladen wird, vor dem Anzeigen-Tag-Code eingebunden werden.
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 für Inline-Anzeigen-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>
Möglichkeit 2: Sämtlichen Code in den Textkörper der Webseite einfügen
Nutzen Sie die herkömmliche GPT-Implementierung, fügen Sie die Definitionen der Anzeigenflächen aber in den Textkö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.
Anfrage ohne Tags und JavaScript erstellen
Anstelle eines Anzeigen-Tags kann eine Anfrage ohne Tags verwendet werden, um den Rohcode eines Creatives anzufordern, der in Ad Manager getraffickt wird. Anfragen ohne Tags werden normalerweise eingesetzt, wenn benutzerdefiniertes Parsing und eine individuelle Darstellung erforderlich sind, wie bei Set-Top-Boxen oder anderen Umgebungen ohne Tag-Kennzeichnung von Google oder SDK-Unterstützung.