In diesem Artikel finden Sie Hinweise und Beispiele dazu, wie Sie eine Interstitial-Anzeige für H5-Spiele mithilfe der Google Publisher-Tag-Bibliothek präsentieren. Interstitials für Spiele sind GPT-verwaltete, ganzseitige Anzeigen, die über einen manuellen Trigger in Spielen, die auf Webseiten ausgeführt werden, für Nutzer sichtbar werden.
Die folgenden GPT-Ereignisse werden verwendet, um Interstitial-Anzeigen für Spiele auszuliefern und mit ihnen zu interagieren:
| Ereignis | Ausgelöst, wenn... |
|---|---|
|
|
Eine Interstitial-Anzeigenfläche für Spiele ist zur Schaltung bereit. Rufen Sie zum Schalten der Interstitial-Anzeige für das angegebene Ereignisobjekt die Methode |
|
|
Eine Interstitial-Anzeigenfläche für Spiele, die ausgeliefert wurde, ist jetzt geschlossen. Wird verwendet, um benutzerdefinierte Logik auszuführen, wenn das Interstitial für Spiele geschlossen wird. |
Das Interstitial für Spiele kann als Vollbild oder innerhalb des Spiel-Frames gerendert werden, je nachdem, wie das Spiel dargestellt wird. Weitere Informationen zu Anzeigenstrukturen für H5-Spiele
Im folgenden Beispielcode wird davon ausgegangen, dass das H5-Spiel direkt im selben oberen Frame wie die Seite platziert wird (mit der „Fullscreen“-Struktur). In diesem Fall wird die Interstitial-Anzeige für Spiele auch im Vollbildmodus gerendert.
Derselbe Code funktioniert jedoch auch, wenn er innerhalb eines untergeordneten Frames platziert wird (mithilfe der "iFrame/WebView"-Struktur). Um die Interstitial-Anzeige für Spiele auf die Canvas von H5-Spielen zu beschränken, muss das Spiel in einem iFrame platziert werden.
Beispiel
<!doctype html>
<html>
<head>
<!-- The Google Publisher Tag here, if any, will only be responsible for serving ads outside of the H5 game. -->
<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="Example game" allow="autoplay">
<!-- Sample code is served here. The Google Publisher Tag loaded in this frame will only be used within the H5 game. -->
</iframe>
</body>
</html>
Hinweise zur Verwendung
- Um eine optimale Nutzererfahrung zu gewährleisten, fordert GPT Interstitial-Anzeigen für Spiele nur auf Seiten an, die das Format unterstützen. Daher kann
defineOutOfPageSlot()den Wert „null“ zurückgeben. Fordern Sie Interstitial-Anzeigen für Spiele nur auf Seiten oder in Umgebungen an, in denen ein Interstitial präsentiert werden soll. Interstitial-Anzeigen für Spiele können auf Computern, Tablets und Mobilgeräten ausgeliefert werden. - Die Interstitial-Anzeige wird eingeblendet, wenn Sie
makeGameManualInterstitialVisibleim EreignisGameManualInterstitialSlotReadyaufrufen. - 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
- Publisher dürfen keine Interstitials für H5-Spiele für Inventar außerhalb von Spielen verwenden. Durch die Implementierung dieses Formats stimmen Publisher dieser Bedingung automatisch zu. Außerdem müssen die Google-Richtlinien für Publisher und die Richtlinien für Google Ad Manager-Partner eingehalten werden.
- Google behält sich das Recht vor, Publisher jederzeit zuzulassen oder abzulehnen. Publisher, die gegen die Richtlinien verstoßen, werden aus der Zulassungsliste entfernt.
- Für Interstitial-Anzeigen für Spiele wird eine eigene Anzeigenfläche generiert. Anders als bei anderen Anzeigentypen muss bei Interstitial-Anzeigen für Spiele kein <div>-Element definiert werden. Mit diesen Anzeigen wird automatisch ein eigener Container erstellt und auf der Seite eingefügt, wenn eine Anzeige eingeblendet 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 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 genauso eingerichtet sein wie standardmäßige Web-Interstitials.
Vorgehensweise
- Tagging
- Erstellen Sie mit
googletag.defineOutOfPageSlot()eine GPT-Anzeigefläche und legen Sie das Out-of-Page-Format aufgoogletag.defineOutOfPageSlot()fest.
Weitere Informationen finden Sie im GPT-Entwicklerleitfaden für H5-Gaming-Interstitials. - Nachdem die Anzeigenfläche definiert wurde, fügen Sie einen Event-Listener hinzu, der auf das Ereignis
gameManualInterstitialSlotReadywartet. Rufen Sie im Callback des Ereignislisteners die MethodemakeGameManualInterstitialVisible()für das angegebene Ereignisobjekt auf, um die Anzeige zu präsentieren. - Nachdem Sie alle anderen statischen Anzeigenflächen deklariert haben, wird durch einen Aufruf von
googletag.displayeine Anfrage zum Ausliefern der Interstitial-Anzeigenfläche für Spiele ausgelöst.
- Erstellen Sie mit
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>
Trafficking
- Erstellen Sie einen neuen Anzeigenblock oder verwenden Sie einen vorhandenen. Wählen Sie als Größe des Anzeigenblocks 320 × 480, 300 × 250 und 336 × 280 aus.
- Erstellen Sie Werbebuchungen. Wählen Sie die entsprechenden Einstellungen für die Werbebuchung aus:
| Werbebuchungseinstellungen | ||||
|---|---|---|---|---|
| Anwendungsfall | Anzeigentyp | Werbebuchungstyp | Erwartete Creatives | Targeting > Inventar |
| Displayanzeigen mit Reservierung schalten | Display |
|
320 x 480, 300 x 250 oder 336 x 280 |
Der im vorherigen Schritt erstellte oder ausgewählte Anzeigenblock |
| Anzeigenbereitstellung für nicht reservierte Anzeigen | Display |
|
||
| Reservierungsvideoanzeigen ausliefern (z. B. ein VAST-Tag oder eine MP4-Datei) | Video oder Audio |
|
300 × 250 v oder 320 × 480 v | |
| Backfill-Anzeigen / Anzeigen mit offener Auktion schalten | Display | Ad Exchange | Alle angeforderten Größen | |
