In der folgenden Anleitung werden das Ausliefern einer Testanzeige behandelt. Außerdem werden grundlegende Konzepte vorgestellt, mit denen Sie die Google Publisher-Tag-Bibliothek (GPT) optimal nutzen können. Dazu zählen:
- Anzeigengröße
- Schlüsselwert-Targeting
- Einzelanfrage-Architektur
GPT-Bibliothek laden
Laden Sie zuerst die GPT-Bibliothek und initialisieren Sie sie. Fügen Sie dem <head> des HTML-Dokuments Folgendes hinzu:
<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<script>
window.googletag = window.googletag || { cmd: [] };
googletag.cmd.push(() => {
});
</script>
Dadurch wird die GPT-Bibliothek geladen und die Objekte googletag und CommandArray initialisiert. Wenn Sie diese Objekte initialisieren, können Sie das GPT-Befehlsarray sofort verwenden. Fügen Sie den folgenden JavaScript-Code in den Text der leeren Funktion ein, die in diesem Snippet definiert ist.
Anzeigenflächen definieren
Nach dem Laden des GPT können Sie Anzeigenflächen definieren. Im folgenden Beispiel werden drei Anzeigenflächen mit unterschiedlichen Anzeigenformaten, Größen und Ausrichtungsoptionen definiert.
Anzeigenfläche mit fester Größe
So sieht eine einfache Anzeigenfläche mit fester Größe aus:
// Define a fixed size ad slot, customized with key-value targeting.
googletag
.defineSlot("/6355419/Travel/Asia", [728, 90], "banner-ad")
.addService(googletag.pubads())
.setTargeting("color", "red")
.setTargeting("position", "atf");
Zusätzlich zu Pfad, Größe und Container-ID <div> des Anzeigenblocks werden mit diesem Snippet verschiedene Targeting-Optionen angegeben. Mit diesen Optionen werden die Anzeigen eingeschränkt, die für die Auslieferung auf dieser Anzeigenfläche infrage kommen. Weitere Informationen zum Schlüssel/Wert-Paar-Targeting
Ankeranzeigenfläche
Im Folgenden sehen Sie eine Ankeranzeigenfläche, die unten im Darstellungsbereich angehängt ist:
// Define an anchor ad slot that sticks to the bottom of the viewport.
const anchorSlot = googletag.defineOutOfPageSlot(
"/6355419/Travel",
googletag.enums.OutOfPageFormat.BOTTOM_ANCHOR,
);
// The slot will be null if the page or device does not support anchors.
if (anchorSlot) {
anchorSlot.setTargeting("test", "anchor").addService(googletag.pubads());
document.getElementById("status").textContent =
"Anchor ad is initialized. Scroll page to activate.";
}
Ankerslots sind ein Out-of-Page-Format, das mit der Methode defineOutOfPageSlot und nicht mit der üblichen defineSlot-Methode definiert wird. Weitere Informationen zu Out-of-Page-Creatives
Für Out-of-Page-Formate gelten oft Einschränkungen in Bezug auf die Seiten und Geräte, auf denen sie ausgeliefert werden können. Aufgrund dieser Einschränkungen müssen Sie prüfen, ob der Slot erfolgreich definiert wurde, bevor Sie damit interagieren können. Weitere Informationen finden Sie im Beispiel Ankeranzeige schalten.
Fließende Anzeigenfläche
Hier sehen Sie eine flexible Anzeigenfläche für eine native Anzeige:
// Define a fluid ad slot that adjusts its height to fit the creative
// content being displayed.
googletag
.defineSlot("/6355419/Travel", ["fluid"], "native-ad")
.addService(googletag.pubads());
Anzeigenflächen mit flexibler Größe haben keine feste Größe. Flexible Anzeigenflächen passen sich
an den Creative-Content der Anzeige an. Flexible Anzeigenflächen definieren Sie mit der Größenoption fluid. Weitere Informationen zur Anzeigengröße und zu den verfügbaren Größenoptionen
Einstellungen auf Seitenebene konfigurieren
Bestimmte GPT-Konfigurationsoptionen gelten global und nicht für bestimmte Anzeigenflächen. Diese werden als Einstellungen auf Seitenebene bezeichnet.
Hier ein Beispiel für die Konfiguration von Einstellungen auf Seitenebene:
// Configure page-level targeting.
googletag.pubads().setTargeting("interests", "basketball");
// Enable SRA and services.
googletag.pubads().enableSingleRequest();
googletag.enableServices();
Das Snippet erfüllt drei Aufgaben:
- Mit dieser Richtlinie werden Optionen für das Targeting auf Seitenebene konfiguriert, die auf jede Anzeigenfläche auf der Seite angewendet werden.
- Dadurch wird der Einzelanfrage-Architekturmodus aktiviert, in dem Anfragen für mehrere Anzeigenflächen in einer einzigen Anzeigenanfrage gebündelt werden. SRA verbessert die Leistung und ist notwendig, um sicherzustellen, dass Konkurrenzausschlüsse und -Roadblocks berücksichtigt werden. Daher empfehlen wir, die Einzelanfrage-Architektur immer zu aktivieren. Weitere Informationen zur richtigen Verwendung der SRA
- Aktiviert die Dienste, die mit unseren Anzeigenflächen verknüpft sind und für die das Senden von Anzeigenanfragen möglich ist.
Displayanzeigen
Fügen Sie schließlich das folgende Snippet in den <body> der Seite ein:
<div class="page-content centered">
<div id="banner-ad" style="width: 728px; height: 90px"></div>
<!--
If the following status is displayed when the page is rendered, try
loading the page in a new window or on a different device.
-->
<h1 id="status">Anchor ads are not supported on this page.</h1>
<!--
Spacer used for example purposes only. This positions the native ad
container below the fold to encourage scrolling.
-->
<div class="spacer"></div>
<div id="native-ad" class="native-slot"></div>
</div>
<script>
googletag.cmd.push(() => {
// Request and render all previously defined ad slots.
googletag.display("banner-ad");
});
</script>
Es werden zwei Anzeigenflächencontainer definiert: banner-ad und native-ad. Diese Container-id-Werte entsprechen den Werten, die Sie beim Definieren der Anzeigenflächen in diesem Beispiel angegeben haben.
Nachdem alle Anzeigenflächen definiert wurden, wird ein Aufruf zum Anzeigen der banner-ad ausgeführt. Da die Einzelanfrage-Architektur aktiviert ist, werden mit diesem einzelnen Displayaufruf alle bis zu diesem Zeitpunkt definierten Anzeigenflächen angefordert und gerendert. Bei Bedarf können Sie das Laden und Aktualisieren von Anzeigen sowie die Batchverarbeitung bei aktivierter Einzelanfrage-Architektur präziser steuern.
Vollständiges Beispiel
Im Folgenden finden Sie den vollständigen Quellcode der Beispielseite, auf der dieser Leitfaden basiert. Sie können sich auch eine interaktive Demo dieser Seite ansehen.