In diesem Leitfaden wird das Anzeigen von Testanzeigen vertieft und es werden grundlegende Konzepte vorgestellt, mit denen Sie die Google Publisher-Tag-Bibliothek (GPT) optimal nutzen können. Dazu zählen:
- Anzeigengröße
- Targeting auf Schlüssel/Wert-Paare
- Einzelanfrage-Architektur
GPT-Bibliothek laden
Laden und initialisieren Sie zuerst die GPT-Bibliothek. Fügen Sie dem <head> des HTML-Dokuments Folgendes hinzu:
<script
async
src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"
crossorigin="anonymous"
></script>
<script>
window.googletag = window.googletag || { cmd: [] };
googletag.cmd.push(() => {
});
</script>
Dadurch wird die GPT-Bibliothek geladen und sowohl die googletag- als auch die CommandArray-Objekte werden initialisiert. Wenn Sie diese Objekte initialisieren, können Sie sofort mit dem GPT-Befehlsarray arbeiten. Fügen Sie den folgenden JavaScript-Code in den Body der in diesem Snippet definierten leeren Funktion ein.
Anzeigenflächen definieren
Nachdem Sie GPT geladen haben, 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
Hier ein einfacher Anzeigenblock mit fester Größe:
// 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");
Neben dem Pfad, der Größe und der <div>-ID des Anzeigenblocks gibt dieses Snippet auch eine Reihe von Targeting-Optionen an. Mit diesen Optionen können Sie die Anzeigen einschränken und unterscheiden, die in diesem Slot ausgeliefert werden können. Weitere Informationen zum Targeting auf Schlüssel/Wert-Paare
Anzeigenfläche für Ankeranzeigen
Hier sehen Sie eine Anzeigenfläche für Ankeranzeigen, die am unteren Rand des Darstellungsbereichs verankert 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.";
}
Anker-Slots sind eine Art von Out-of-Page-Format, das nicht mit der üblichen defineSlot-Methode, sondern mit der defineOutOfPageSlot-Methode definiert wird. Weitere Informationen zu Out-of-Page-Creatives
Für Out-of-Page-Formate gelten häufig Einschränkungen hinsichtlich der Arten von Seiten und Geräten, auf bzw. auf denen sie ausgeliefert werden dürfen. Aufgrund dieser Einschränkungen müssen Sie prüfen, ob der Slot richtig definiert ist, bevor Sie damit interagieren. Weitere Informationen finden Sie im Beispiel Ankeranzeige ausliefern.
Flexible Anzeigenfläche
Hier ein flexibler Anzeigen-Slot für eine native Anzeige:
// Define a fluid ad slot that fills the width of the enclosing column and
// adjusts the height as defined by the native creative delivered.
googletag
.defineSlot("/6355419/Travel", ["fluid"], "native-ad")
.addService(googletag.pubads());
Anzeigenflächen mit flexibler Größe haben keine feste Größe. Fluide Anzeigenflächen passen sich an die Creative-Inhalte der Anzeige an. Sie definieren flexible Anzeigenflächen mit der Größe fluid. Weitere Informationen zu Anzeigengrößen und verfügbaren Größenoptionen
Einstellungen auf Seitenebene konfigurieren
Bestimmte GPT-Konfigurationsoptionen gelten nicht für bestimmte Anzeigenflächen, sondern global. Dies sind Einstellungen auf Seitenebene.
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();
Dieses Snippet führt drei Dinge aus:
- Hiermit werden Optionen für das Targeting auf Seitenebene konfiguriert, die auf alle Anzeigenflächen auf der Seite angewendet werden.
- Aktiviert den Modus „Einzelanfrage-Architektur“ (Single Request Architecture, SRA), bei dem Anfragen für mehrere Anzeigenflächen in einer einzigen Anzeigenanfrage zusammengefasst werden. Die Einzelanfrage-Architektur verbessert die Leistung und ist erforderlich, um zu gewährleisten, dass Konkurrenzausschlüsse und Roadblocks berücksichtigt werden. Wir empfehlen daher, die Einzelanfrage-Architektur immer zu aktivieren. Weitere Informationen zur korrekten Verwendung der Einzelanfrage-Architektur
- Aktiviert die Dienste, die mit unseren Anzeigenflächen verknüpft sind und die das Senden von Anzeigenanfragen ermöglichen.
Displayanzeigen
Fügen Sie zum Schluss das folgende Snippet in das <body>-Tag 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>
Dadurch werden zwei Anzeigenflächencontainer definiert: banner-ad und native-ad. Diese id-Werte für den Container entsprechen den Werten, die Sie beim Definieren der Anzeigenslots weiter oben in diesem Beispiel angegeben haben.
Nachdem alle Anzeigenflächen definiert sind, wird ein Aufruf zum Anzeigen der banner-ad gesendet. Da die Einzelanfrage-Architektur aktiviert ist, werden mit diesem einzelnen Displayaufruf alle bis zu diesem Zeitpunkt definierten Anzeigenflächen angefordert und gerendert. Wenn Sie möchten, können Sie mit aktivierter SRA das Anzeigen-Laden und -Aktualisieren sowie das Batching-Verhalten genauer steuern.
Vollständiges Beispiel
Im Folgenden finden Sie den vollständigen Quellcode für die Beispielseite, auf der dieser Leitfaden basiert. Sie können sich auch eine interaktive Demo dieser Seite ansehen.