Dieser Artikel enthält Hinweise und Beispiele, die zeigen, wie eine manuelle Interstitial-Anzeige für Spiele mithilfe der Google Publisher-Tag-Bibliothek (GPT) ausgeliefert wird. Manuelle Interstitials für Spiele sind ganzseitige Anzeigen, die über GPT verwaltet und über einen manuellen Trigger für Nutzer sichtbar gemacht werden.
Die folgenden GPT-Ereignisse werden verwendet, um Interstitial-Anzeigen einzublenden und mit ihnen zu interagieren:
| Ereignis | Ausgelöst, wenn... |
|---|---|
|
|
Eine manuelle Interstitial-Anzeigenfläche für Spiele ist zur Schaltung bereit. Rufen Sie zum Schalten der Interstitial-Anzeige für das angegebene Ereignisobjekt die Methode |
Das manuelle Interstitial kann je nach Darstellung des Spiels im Vollbildmodus oder innerhalb des Spiel-Frames gerendert werden. Weitere Informationen zu Anzeigenstrukturen für H5-Spiele
Im Beispielcode unten wird davon ausgegangen, dass das H5-Spiel direkt im oberen Frame der Seite platziert wird (mithilfe der Vollbild-Struktur). In diesem Fall wird die manuelle Interstitial-Anzeige ebenfalls im Vollbildmodus gerendert.
Derselbe Code funktioniert jedoch auch, wenn er mithilfe der "iFrame/WebView"-Struktur innerhalb eines untergeordneten Frames platziert wird. Wenn Sie die manuelle Interstitial-Anzeige auf den Canvas des H5-Spiels beschränken möchten, muss das Spiel in einem iFrame platziert werden.
Beispiel
<!doctype html>
<html>
<head>
<!-- Das Google Publisher-Tag, falls vorhanden, ist hier nur für die Auslieferung von Anzeigen außerhalb des H5-Spiels verantwortlich. -->
<title>Page for this example H5 game</title>
<!-- Your <head> content here. -->
</head>
<body>
<span id="example-text">Example H5 game</span>
<iframe src="https://www.example-game.com" title="Beispielspiel" allow="autoplay">
<!-- Hier wird Beispielcode angezeigt. Das in diesem Frame geladene Google Publisher-Tag wird nur im H5-Spiel verwendet. -->
</iframe>
</body>
</html>
Hinweise zur Verwendung
- Um eine optimale Nutzererfahrung zu gewährleisten, fordert GPT nur manuelle Interstitial-Anzeigen für Spiele auf Seiten an, die das Format richtig unterstützen. Daher kann
defineOutOfPageSlot()null zurückgeben. Sie sollten diesen Fall überprüfen, um sicherzustellen, dass Sie keine unnötige Arbeit ausführen. - Fordern Sie manuelle Interstitial-Anzeigen für Spiele nur auf Seiten oder Umgebungen an, auf denen diese erscheinen sollen. Manuelle Interstitial-Anzeigen für Spiele können auf Computern, Tablets und Mobilgeräten ausgeliefert werden.
- Die Interstitial-Anzeige wird eingeblendet, wenn Sie
makeGameManualInterstitialVisibleim EreignisGameManualInterstitialSlotReadyaufrufen. - Manuelle Interstitial-Anzeigen für Spiele haben ein festes Frequency Capping. So wird verhindert, dass das Ereignis
gameManualInterstitialSlotReadyöfter als einmal alle 120 Sekunden ausgelöst wird.
Anforderungen und Empfehlungen
- Manuelle Interstitial-Anzeigen für Spiele generieren eine eigene Anzeigenfläche. Im Gegensatz zu anderen Anzeigentypen muss für manuelle Interstitial-Anzeigen für Spiele kein
<div>-Element definiert werden. Diese Anzeigen erstellen automatisch einen eigenen Container und fügen ihn in die Seite ein, wenn eine Anzeige gefüllt wird. - Wenn Sie die Einzelanfrage-Architektur auf einer Seite mit mehreren Anzeigenflächen verwenden, rufen Sie
display()erst auf, wenn statische div-Elemente für Anzeigenflächen erstellt wurden. Wie in den Best Practices für Anzeigen beschrieben, wird mit dem ersten Aufruf vondisplay()jede zuvor definierte Anzeigenfläche angefordert. Obwohl für manuelle Interstitial-Anzeigenflächen für Spiele kein vordefiniertes<div>-Element erforderlich ist, ist das bei statischen Anzeigenflächen der Fall. Wenndisplay()aufgerufen wird, bevor diese Elemente auf der Seite vorhanden sind, kann dies zu Signalen von geringerer Qualität führen. Daher wird empfohlen, den ersten Aufruf zu verzögern, bis statische Anzeigenflächen definiert wurden. - Für das Trafficking manueller Interstitials müssen Anzeigenblöcke und Werbebuchungen so eingerichtet werden wie bei standardmäßigen Web-Interstitials.
Beispiel
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Game Manual Interstitial Ad Example</title>
<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<script>
window.googletag = window.googletag || { cmd: [] };
let gameManualInterstitialSlot;
googletag.cmd.push(function () {
// Define a game manual interstitial ad slot.
defineGameManualInterstitialSlot();
// Define static ad slots.
staticSlot = googletag.defineSlot(
'/6355419/Travel/Europe', [100, 100], 'static-ad-1')
.addService(googletag.pubads());
// Enable SRA and services.
googletag.pubads().enableSingleRequest();
googletag.enableServices();
});
function defineGameManualInterstitialSlot() {
gameManualInterstitialSlot = googletag.defineOutOfPageSlot(
'/6355419/Travel/Europe/France/Paris',
googletag.enums.OutOfPageFormat.GAME_MANUAL_INTERSTITIAL);
// Slot returns null if the page or device does not support interstitials.
if (gameManualInterstitialSlot) {
gameManualInterstitialSlot.addService(googletag.pubads());
printStatus('Waiting for interstitial to be ready...');
// Add event listener to register click handler once interstitial loads.
// If this event doesn't fire, try clearing local storage and refreshing
// the page.
googletag.pubads().addEventListener('gameManualInterstitialSlotReady',
(slotReadyEvent) => {
if (gameManualInterstitialSlot === slotReadyEvent.slot) {
printStatus('Interstitial is ready.');
const button = document.getElementById('trigger');
button.style.display = 'block';
button.addEventListener('click', () => {
slotReadyEvent.makeGameManualInterstitialVisible();
printStatus('Interstitial is active.');
}, { once: true });
}
});
googletag.pubads().addEventListener('gameManualInterstitialSlotClosed',
resumeGame);
}
}
function resumeGame() {
document.getElementById('trigger').style.display = 'none';
// Game manual interstitial ad slots are one-time use, so destroy the old slot and create a new one.
googletag.destroySlots([gameManualInterstitialSlot]);
defineGameManualInterstitialSlot();
googletag.display(gameManualInterstitialSlot);
}
function printStatus(status) {
document.getElementById('status').innerText = status;
}
</script>
<style>
button {
display: none;
}
div.content {
position: fixed;
top: 50%;
}
</style>
</head>
<body>
<div id="static-ad-1" style="width: 100px; height: 100px;"></div>
<div class="content">
<span id="status">Game manual interstitial is not supported on this page.</span>
<p>
<button id="trigger">TRIGGER INTERSTITIAL</button>
</p>
</div>
<script>
googletag.cmd.push(function () {
// Ensure the first call to display comes after static ad slot
// divs are defined.
googletag.display(staticSlot);
});
</script>
</body>
</html>
