Der Google Ad Manager unterstützt verschiedene Out-of-Page-Anzeigenformate. Dabei handelt es sich um Anzeigen, die nicht direkt im Dokument bzw. HTML platziert werden, sondern über dem Inhalt liegen. Meist sind das Pop-Ups oder feste Anzeigen, die am unteren oder oberen Rand immer sichtbar sind. Welche Out-of-Page-Formate mit den Google Publisher Tags unterstützt und wie diese implementiert werden, darum geht es in diesem Beitrag.
- Welche Out-of-Page-Formate gibt es?
- GPT-Methode für die Definition von Out-of-Page-Formaten
- Web-Interstitial
- Out-of-Page-Anzeige
- Ankeranzeigen
- Anzeige mit Prämie
Welche Out-of-Page-Formate gibt es?
Welche Formate unterstützt werden lässt sich über den Enum-Typ “OutOfPageFormat” der Google Publisher Tags erkennen. Auf diesen kannst du wie folgt zugreifen:
googletag.enums.OutOfPageFormat
In der GPT-Doku ist es aber auch dokumentiert. Folgende Out-of-Page-Formate werden unterstützt:
- INTERSTITIAL: Wie der Name schon sagt, handelt es sich dabei um eine Interstitial-Anzeige.
- TOP_ANCHOR: Dabei handelt es sich um eine Anzeige, die am oberen Viewport-Rand fixiert wird.
- BOTTOM_ANCHOR: Das ist das Gegenteil von “TOP_ANCHOR” – hierbei bleibt die Anzeige am unteren Viewport-Rand fixiert.
- REWARDED: Dabei handelt es sich um eine Anzeige, wo der Nutzer anschließend eine Prämie erhält.
Zudem gibt es noch Out-of-Page-Anzeigen in Form von Pop-Ups und Pop-Unders (die ich nachfolgend als “Standard-Out-of-Page-Anzeige” bezeichne), die in einem eigenen Browserfenster ausgespielt werden können. Diese sind nicht im Enum-Typ definiert, da für dessen Ausspielung nur die ID des Ad Slots angegeben werden muss (dazu später mehr).
GPT-Methode für die Definition von Out-of-Page-Formaten
Um eine Out-of-Page-Anzeige zu erstellen, muss man die bereitgestellte Methode defineOutOfPageSlot() nutzen. Diese Methode nimmt dann 2 Parameter entgegen:
- Den Pfad zum Anzeigenblock im üblichen Format.
- Als zweiten Parameter kann entweder die ID des div-Elements, wo die “Standard-Out-of-Page-Anzeigen” erscheinen soll oder es kann eines der Formate aus dem Enum-Typ “OutOfPageFormat” angegeben werden.
Wie die Google Publisher Tags dabei je Format konfiguriert werden müssen, zeige ich nachfolgend.
Web-Interstitial
Bei Web-Interstitials handelt es sich um ein Anzeigen-Format, welches vor dem Aufruf einer zweiten Seite angezeigt wird. Ausgelöst werden Web-Interstitials durch eine Seitennavigation (Klick auf einen Link) des Nutzers. Sobald dieses Ereignis eintritt, stellt die GPT-Bibliothek automatisch sicher, dass die entsprechende Anzeige zwischen den zwei Seitenaufrufen angezeigt wird. Damit die Anzeige ohne Verzögerung angezeigt wird, muss sie vorher schon geladen werden. Das geschieht, indem man auf der initialen Seiten alle Anzeigenblöcke definiert und die Pubads-Services initiiert.
Bevor ich zu den Code-Beispielen komme, noch ein paar allgemeine Hinweise zu Web-Interstitials:
- Da Web-Interstitials bei einer Seitennavigation ausgelöst werden, funktionieren sie nicht bei SPAs und generell dynamisch nachladenden Seiten.
- Web-Interstitials werden nur bei HTTP- und HTTPS-Links ausgelöst, jedoch nicht wenn ein neues Fenster geöffnet wird.
- Achte bei der Implementierung von Web-Interstitials auf die entsprechenden Regeln wie in meinem Artikel dazu beschrieben. Hier auch eine offizielle Google-Dokumentation dazu.
- Bei Web-Interstitials gibt es ein automatisches Frequency Capping, welches geändert werden kann. Das automatische Frequency Capping erlaubt es ein Web-Interstitial nur einmal pro Stunde anzuzeigen. Dabei wird im Local Storage der Key “__lsv__” für die Identifizierung abgelegt. Wenn du also innerhalb kürzerer Zeiten die Anzeige testen möchtest, diese aber nicht erscheint, dann solltest du beim wiederholten Test diesen Key aus deinem Local Storage vorher löschen.
- Die Anzeige für das Web-Interstitial braucht kein vordefiniertes div-Element innerhalb der HTML-Struktur. Ein entsprechender Container wird automatisch erstellt.
Wie schon beschrieben wird für Out-of-Page-Formate wie z.B. Web-Interstitials die defineOutOfPageSlot()-Methode verwendet. Nachfolgend ein einfaches Beispiel wie man ein Web-Interstitial ausspielen kann:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Web Interstitial</title>
<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<script>
window.googletag = window.googletag || {cmd: []};
var interstitialSlot;
googletag.cmd.push(function() {
interstitialSlot = googletag.defineOutOfPageSlot(
'/1234567/Sports',
googletag.enums.OutOfPageFormat.INTERSTITIAL)
.addService(googletag.pubads());
googletag.enableServices();
googletag.display(interstitialSlot);
});
</script>
</head>
<body>
<div class="content">
<p>
<a href="https://www.example.com/">YES: Web Interstitial</a>
</p>
<p>
<a data-google-interstitial="false" href="https://www.example.com/">NO: Web Interstitial</a>
</p>
</div>
</body>
</html>
Zur Erklärung:
- Wir haben im sichtbaren Bereich 2 Links. Beide Links führen zu einer externen Seite, jedoch hat ein Link das Attribut “data-google-interstitial”. Dieses ist auf “false” gesetzt und das führt dazu, dass dieser Link nie ein Interstitial auslöst. Der Link mit dem Text “YES: Web Interstitial” besitzt dieses Attribut nicht, entsprechend wird hier zwischen beiden Seiten das Ad-Interstitial ausgespielt.
- Über die defineOutOfPageSlot()-Methode wird das Interstitial definiert. Wichtig ist hier, dass der zweite Parameter auf “INTERSTITIAL” gesetzt wird.
Dieses Vorgehen kann aber zu diversen Problemen führen. Erstens kann es passieren, dass Web Interstitials für eine Seite nicht unterstützt werden. Zudem möchte man sicherstellen, dass die Anzeige für das Web Interstitial schon fertig geladen wurde, bevor man es dem Nutzer präsentiert (falls der Nutzer auf den Link klickt, bevor die Anzeige zurück geliefert wurde). Entsprechend braucht das Beispiel folgende Anpassungen:
- Der Link, der ein Interstitial auslöst, wird zunächst ausgeblendet. Dazu bekommt der Link eine ID im HTML und per CSS wird dieses zunächst auf “display: none” gesetzt.
- Anschließend wird die addService-Methode erst gesetzt, wenn defineOutOfPageSlot kein “null” zurückgibt, sondern den Slot des Interstitials. Das geschieht über eine einfache if-Bedingung.
- Auch innerhalb der if-Bedingung wird ein Event Listener registriert, der den Link zum Interstitial erst einblendet, wenn der Ad Slot fertig geladen worden ist. Dazu wird das slotOnload-Event genutzt.
Hier das fertige Beispiel:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Web Interstitial</title>
<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<script>
window.googletag = window.googletag || {cmd: []};
var interstitialSlot;
googletag.cmd.push(function() {
interstitialSlot = googletag.defineOutOfPageSlot(
'/1234567/Sports',
googletag.enums.OutOfPageFormat.INTERSTITIAL);
if (interstitialSlot) {
interstitialSlot.addService(googletag.pubads());
googletag.pubads().addEventListener('slotOnload', function(event) {
if (interstitialSlot === event.slot) {
document.getElementById('wiLink').style.display = 'block';
}
});
}
googletag.enableServices();
googletag.display(interstitialSlot);
});
</script>
<style>
#wiLink {
display: none;
}
</style>
</head>
<body>
<div class="content">
<p>
<a id="wiLink" href="https://www.example.com/">YES: Web Interstitial</a>
</p>
<p>
<a data-google-interstitial="false" href="https://www.example.com/">NO: Web Interstitial</a>
</p>
</div>
</body>
</html>
Out-of-Page-Anzeige
Die klassische Form von Out-of-Page-Anzeigen sind Pop-Ups oder Pop-Unders. Im Gegensatz zu den anderen Out-of-Page-Formaten ist diese Form nicht im Enum-Typ “OutOfPageFormat” der Google Publisher Tags festgelegt. Zwar wird auch hier die defineOutOfPageSlot-Methode zum Präsentieren der Anzeigen genutzt, jedoch wird als zweiter Parameter anstelle des Enum-Typen die ID des div-Elements übergeben. Nachfolgend das Beispiel dazu:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Pop Up</title>
<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<script>
window.googletag = window.googletag || {cmd: []};
googletag.cmd.push(function() {
googletag.defineOutOfPageSlot('/1234567/Sports', 'out-of-page-ad')
.addService(googletag.pubads());
googletag.pubads().enableSingleRequest();
googletag.enableServices();
});
</script>
</head>
<body>
<div id="out-of-page-ad">
<script>
googletag.cmd.push(function() {
googletag.display('out-of-page-ad');
});
</script>
</div>
</body>
</html>
Ankeranzeigen
Ankeranzeigen erscheinen entweder ganz oben oder ganz unten auf dem Bildschirm und bleiben die ganze Zeit sichtbar wenn der Nutzer scrollt. Wie im Enum “OutOfPageFormat” ersichtlich war, gibt es zwei Arten von Ankeranzeigen:
- Obere Ankeranzeigen, die den Wert “TOP_ANCHOR” besitzen.
- Untere Ankeranzeigen, die den Wert “BOTTOM_ANCHOR” besitzen.
Bei beiden Formaten muss man berücksichtigen, dass die Anzeigen erst erscheinen, wenn der Nutzer zum Scrollen beginnt. Zudem können Ankeranzeigen nicht nur auf Mobile erscheinen, sondern auch auf Desktop. Entsprechend sollte man eine Steuerung einbauen, wann genau welche Ankeranzeige ausgeliefert werden soll. Wie bei Web Interstitial brauchen Ankeranzeigen kein div-Element, da eines automatisch erstellt wird. Nachfolgend ein einfaches Beispiel mit den Google Publisher Tags, um obere und untere Ankeranzeigen – abhängig vom Viewport des Nutzers – auszuliefern.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ankeranzeigen</title>
<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<script>
window.googletag = window.googletag || {cmd: []};
var anchorSlot;
var docClientWith = document.documentElement.clientWidth;
googletag.cmd.push(function() {
if (docClientWith <= 1000) {
anchorSlot = googletag.defineOutOfPageSlot(
'/1234567/Sports', googletag.enums.OutOfPageFormat.TOP_ANCHOR);
} else {
anchorSlot = googletag.defineOutOfPageSlot(
'/1234567/Sports', googletag.enums.OutOfPageFormat.BOTTOM_ANCHOR);
}
if (anchorSlot) {
anchorSlot
.addService(googletag.pubads());
}
googletag.enableServices();
googletag.display(anchorSlot);
});
</script>
</head>
<body>
<div id="page" style="height: 900vh;">
<h1>Ankeranzeigen</h1>
</div>
</body>
</html>
Anzeige mit Prämie
Bei einer Anzeige mit Prämie können die Website-Nutzer entscheiden, ob sie die Anzeige ansehen möchten. Falls ja, dann bekommen sie eine Prämie dafür. Die Prämien, die der Publisher dabei erteilt, können unterschiedlich sein. Eine Gaming-App kann z.B. Punkte in einem Spiel als Prämie vergeben, eine Nachrichtenseite kann als Prämie z.B. einen kostenlosen Zugriff auf Premium-Artikel anbieten. Für das Ausspielen von Anzeigen mit Prämie müssen jedoch einige Bedingungen erfüllt sein. Die wichtigste ist, dass diese Ads nur auf Websites, die für Mobilgeräte optimiert sind, ausgeliefert werden. Hilfreich ist dabei wenn die Viewport-Meta-Angabe vorzufinden ist:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Aus Sicht der Google Publisher Tags braucht man für Anzeigen mit Prämie kein div-Element zu definieren, da dieses automatisch erstellt wird. Wichtig bei der Implementierung von Anzeigen mit Prämie sind bestimmte Events aus der GPT-Bibliothek. Folgende 3 Event sind wichtig:
- rewardedSlotReady: Dieses Event wird ausgelöst, wenn die Ad verfügbar und bereit für die Einblendung ist. Darüber sollte dann das Nutzer-Feld mit der Aufforderung/Möglichkeit eingeblendet werden, eine Anzeige anschauen zu können.
- rewardedSlotGranted: Sobald der Nutzer die Prämie erhält wird dieses Event ausgelöst. Dieses eignet sich für eine Mitteilung an den Nutzer.
- rewardedSlotClosed: Dieses Ereignis feuert, wenn der Nutzer die Anzeige schließt (unabhängig davon, ob Prämie gewährt worden ist oder nicht).
Schauen wir uns mit diesen Informationen ein einfaches Beispiel an. Zunächst einmal muss der Ad Slot definiert werden wie gewohnt:
const rewardedSlot = googletag.defineOutOfPageSlot('/123456789/Rewarded', googletag.enums.OutOfPageFormat.REWARDED)
.addService(googletag.pubads());
googletag.enableServices();
googletag.display(rewardedSlot);
Im Anschluss können wir schon den ersten Event-Listener registrieren. Wenn das Event “rewardedSlotReady” ausgelöst wurde, soll die Anzeige mit Prämie angezeigt werden. Um das zu erreichen, stellt uns das ausgelöste Event eine Methode namens “makeRewardedVisible” zur Verfügung, welches wir direkt auf dem Event ausführen können. Diese Methode soll aber nur ausgeführt werden, wenn der Nutzer zugestimmt hat. In unserem einfachen Beispiel machen wir das, indem wir die confirm-Methode aufrufen. Nur wenn der Nutzer zustimmt, wird die Ad angezeigt, ansonsten wird der Slot über die destroySlots-Methode “zerstört”.
googletag.pubads().addEventListener('rewardedSlotReady',
function(event) {
if (confirm('Anzeige mit Prämie ansehen?')) {
event.makeRewardedVisible();
} else {
googletag.destroySlots([rewardedSlot]);
}
});
Wenn der Nutzer zugestimmt hat, dann erscheint das entsprechende Ad. Treffen anschließend alle Bedingungen zu für den Erhalt der Prämie zu (z.B. muss der Nutzer ein Video min. 3 Sekunden angesehen haben, etc.), können dann über das Event “rewardedSlotGranted” weitere Aktionen angestoßen werden. Dieses Event gibt uns ein Objekt namens “payload” zurück. Das Objekt enthält Informationen zur Prämie. Die Informationen beinhalten zwei Properties – “amount”, also die Anzahl der Prämie und “type”, den Typ der Prämie. Die Prämie kann darüber dem Nutzer direkt angezeigt werden. In unserem einfachen Beispiel erfolgt das über die alert-Methode:
googletag.pubads().addEventListener('rewardedSlotGranted',
function(event) {
alert('Prämie erhalten! ' + JSON.stringify(event.payload));
});
Und zum Schluss – wenn der Nutzer die Anzeige schließt – kann der Slot zerstört werden:
googletag.pubads().addEventListener('rewardedSlotClosed',
function(event) {
googletag.destroySlots([rewardedSlot]);
});
Sobald die Methode “makeRewardedVisible” aufgerufen wird, erstellt GPT ein ins-Element am unteren Ende des HTML-Dokuments. Innerhalb des ins-Elements befindet sich der Ad Slot als div und innerhalb des div wiederum das iFrame mit der Anzeige. Sobald der Nutzer die Anzeige mit Prämie schließt, wird das ins-Element wieder entfernt.
Bitte beachte, dass es sich hierbei um ein sehr einfaches Beispiel handelt. Wie bei allen Out-of-Page-Anzeigen sollte auch hier immer geprüft werden ob eine Anzeige mit Prämie zur Verfügung steht (z.B. mittles einfacher if-Bedingung), bevor die Ad ausgespielt wird.
