W tym artykule znajdziesz uwagi i przykłady, które pokazują, jak wyświetlać ręczną reklamę pełnoekranową w grze za pomocą biblioteki tagów wydawcy Google (GPT). Ręczne reklamy pełnoekranowe w grze to zarządzane przez tag GPT reklamy na całą stronę, które są wyświetlane użytkownikom za pomocą reguły ręcznej.
Do wyświetlania reklam pełnoekranowych i interakcji z nimi służą te zdarzenia GPT:
| Wydarzenie | Uruchamiane, gdy... |
|---|---|
|
|
Boks reklamy pełnoekranowej konfigurowanej ręcznie do wyświetlenia w grze jest gotowy do wyświetlenia. Aby wyświetlić reklamę pełnoekranową, wywołaj metodę |
Ręczna reklama pełnoekranowa w grze może wyświetlać się na pełnym ekranie lub w ramce z grą, w zależności od sposobu wyświetlania gry. Dowiedz się więcej o strukturach reklam w grach H5.
W przykładowym kodzie poniżej założono, że gra H5 jest umieszczona bezpośrednio w tej samej ramce najwyższego poziomu co strona (za pomocą struktury „pełny ekran”). W takim przypadku ręczna reklama pełnoekranowa również wyświetli się w trybie pełnoekranowym.
Ten sam kod działa też wtedy, gdy jest umieszczony w ramce podrzędnej (za pomocą struktury „iFrame/WebView”). Aby ograniczyć ręczną reklamę pełnoekranową do obszaru roboczego gry H5, gra musi znajdować się w elemencie iframe.
Przykład
<!doctype html>
<html>
<head>
<!-- Tag wydawcy Google (jeśli istnieje) będzie odpowiedzialny za wyświetlanie reklam tylko poza grą H5. -->
<title>Strona tej przykładowej gry H5</title>
<!-- Tutaj Twoje treści w sekcji <head> -->
</head>
<body>
<span id="example-text">Przykładowa gra H5</span>
<iframe src="https://www.example-game.com" title="Przykładowa gra" allow="autoplay">
<!-- Tutaj podajemy przykładowy kod. Tag wydawcy Google wczytany w tej ramce będzie używany tylko w grze H5. -->
</iframe>
</body>
</html>
Zastosowanie
- Aby zapewnić optymalną wygodę użytkownikom, GPT wysyła żądania ręcznych reklam pełnoekranowych wyświetlanych w grach tylko na stronach, które prawidłowo obsługują ten format. Z tego powodu
defineOutOfPageSlot()może zwracać wartość null. Sprawdź, czy tak nie jest, aby nie wykonywać niepotrzebnych czynności. - Żądaj ręcznych reklam pełnoekranowych w grach tylko na stronach lub w środowiskach, w których chcesz wyświetlać takie reklamy. Reklamy pełnoekranowe w grach mogą wyświetlać się na komputerach, tabletach i urządzeniach mobilnych.
- Reklama pełnoekranowa pojawia się po wywołaniu
makeGameManualInterstitialVisiblew zdarzeniuGameManualInterstitialSlotReady. - Ręczne reklamy pełnoekranowe w grach mają stały limit wyświetleń na użytkownika. Zapobiega to uruchamianiu zdarzenia
gameManualInterstitialSlotReadyczęściej niż raz na 120 sekund.
Wymagania i zalecenia
- Ręczne reklamy pełnoekranowe w grach generują własny boks reklamowy. W odróżnieniu od innych typów reklam w przypadku ręcznych reklam pełnoekranowych w grach nie musisz definiować tagu
<div>. Tego typu reklamy automatycznie tworzą i umieszczają na stronie własny kontener, gdy reklama się wypełni. - Jeśli korzystasz z architektury z pojedynczym żądaniem (SRA) na stronie z wieloma boksami, nie wywołuj funkcji
display(), dopóki nie zostaną utworzone statyczne elementy div boksów reklamowych. Zgodnie ze sprawdzonymi metodami dotyczącymi reklam pierwsze wywołanie funkcjidisplay()wysyła żądanie do każdego boksu reklamowego zdefiniowanego przed tym punktem. Chociaż boksy ręcznych reklam pełnoekranowych w grach nie wymagają wstępnie zdefiniowanego tagu<div>, statyczne boksy reklamowe go wymagają. Wywołaniedisplay(), zanim te elementy pojawią się na stronie, może spowodować obniżenie jakości sygnałów, dlatego zalecamy opóźnienie początkowego wywołania do momentu zdefiniowania boksów statycznych. - Trafikowanie ręcznych reklam pełnoekranowych wymaga tej samej konfiguracji jednostki reklamowej i elementu zamówienia co w przypadku standardowych reklam pełnoekranowych w przeglądarce.
Przykład
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Przykład reklamy pełnoekranowej opublikowanej ręcznie w grze</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 () {
// Zdefiniuj boks ręcznej reklamy pełnoekranowej w grze.
defineGameManualInterstitialSlot();
// Zdefiniuj statyczne boksy reklamowe.
staticSlot = googletag.defineSlot(
'/6355419/Podróże/Europa', [100, 100], 'static-ad-1')
.addService(googletag.pubads());
// Włącz architekturę SRA i usługi.
googletag.pubads().enableSingleRequest();
googletag.enableServices();
});
function defineGameManualInterstitialSlot() {
gameManualInterstitialSlot = googletag.defineOutOfPageSlot(
'/6355419/Podróże/Europa/Francja/Paryż',
googletag.enums.OutOfPageFormat.GAME_MANUAL_INTERSTITIAL);
// Boks zwraca wartość null, jeśli strona lub urządzenie nie obsługuje reklam pełnoekranowych.
if (gameManualInterstitialSlot) {
gameManualInterstitialSlot.addService(googletag.pubads());
printStatus('Czekam na gotowość reklamy pełnoekranowej...');
// Dodaj detektor zdarzeń, aby rejestrować moduł obsługi kliknięć po wczytaniu reklamy pełnoekranowej.
// Jeśli zdarzenie się nie uruchomi, spróbuj wyczyścić pamięć lokalną i odświeżyć
// stronę.
googletag.pubads().addEventListener('gameManualInterstitialSlotReady',
(slotReadyEvent) => {
if (gameManualInterstitialSlot === slotReadyEvent.slot) {
printStatus('Reklama pełnoekranowa jest gotowa.');
const button = document.getElementById('trigger');
button.style.display = 'block';
button.addEventListener('click', () => {
slotReadyEvent.makeGameManualInterstitialVisible();
printStatus('Reklama pełnoekranowa jest aktywna.');
}, { once: true });
}
});
googletag.pubads().addEventListener('gameManualInterstitialSlotClosed',
resumeGame);
}
}
function resumeGame() {
document.getElementById('trigger').style.display = 'none';
// Boksy ręcznych reklam pełnoekranowych e grze są używane tylko raz, więc usuństary boks i utwórz nowy.
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">Ręczna reklama pełnoekranowa w grze nie jest obsługiwana na tej stronie.</span>
<p>
<button id="trigger">WYŚWIETL REKLAMĘ PEŁNOEKRANOWĄ</button>
</p>
</div>
<script>
googletag.cmd.push(function () {
// Upewnij się, że pierwsze wywołanie reklamy displayowej pojawia się po zdefiniowaniu elementów
// div statycznych boksów reklamowych.
googletag.display(staticSlot);
});
</script>
</body>
</html>
