W tym artykule znajdziesz uwagi i przykłady, które pokazują, jak wyświetlać reklamę pełnoekranową w grze H5 za pomocą biblioteki tagów wydawcy Google (GPT).
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 w przypadku gier działających na stronach internetowych.
Na tej stronie
- Wymagania i zalecenia
- Wprowadzenie do tagowania
- Trafikowanie
- Seria filmów o wyświetlaniu reklam: Reklamy pełnoekranowe w grach H5 | Reklamy z nagrodą w grach H5
- Raportowanie
Wymagania i zalecenia
- Wydawcy nie mogą używać reklam pełnoekranowych w grze 5 w zasobach reklamowych innych niż gry. Stosując ten format, wydawcy automatycznie akceptują ten warunek. Należy też przestrzegać zasad Google dotyczących wydawców i wytycznych dla partnerów korzystających z Google Ad Managera.
- Google zastrzega sobie prawo do zatwierdzania i odrzucania wydawców w dowolnym momencie. Wydawcy, którzy naruszają zasady, zostaną usunięci z listy dozwolonych.
- Reklamy pełnoekranowe w grach generują własny boks reklamowy. W odróżnieniu od innych typów reklam w przypadku reklam pełnoekranowych w grze nie musisz definiować elementu <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 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łnoekranowychwymaga tej samej konfiguracji jednostki reklamowej i elementu zamówienia co w przypadku standardowych reklam pełnoekranowych w przeglądarce.
Wprowadzenie do tagowania
- Utwórz boks GPT za pomocą metody
googletag.defineOutOfPageSlot()i ustaw format OutOfPage nagoogletag.defineOutOfPageSlot().
Zapoznaj się ze wskazówkami technicznymi dla programistów dotyczącymi tagów GPT w reklamach pełnoekranowych w grze H5. - Po zdefiniowaniu boksu dodaj detektor zdarzeń, który będzie nasłuchiwać zdarzenia
gameManualInterstitialSlotReady. Aby wyświetlić reklamę, w wywołaniu zwrotnym detektora zdarzeń wywołaj metodęmakeGameManualInterstitialVisible()w podanym obiekcie zdarzenia. - Po zadeklarowaniu wszystkich innych statycznych boksów reklamowych wywołanie funkcji
googletag.displayspowoduje wysłanie żądania wypełnienia boksu reklamy pełnoekranowej w grze.
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/Travel/Europe/France/Paris',
googletag.enums.OutOfPageFormat.GAME_MANUAL_INTERSTITIAL);
// Boks zwraca wartość null, jeśli strona lub urządzenie nie obsługują 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 w 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>
Zdarzenia GPT
Do wyświetlania reklam pełnoekranowych i interakcji z nimi służą te zdarzenia GPT:
| Wydarzenie | Uruchamiane, gdy… |
|---|---|
|
|
Boks reklamy pełnoekranowej w grze jest gotowy do wyświetlenia. Aby wyświetlić reklamę pełnoekranową, wywołaj metodę |
|
|
Boks reklamy pełnoekranowej w grze, który był otwarty, został zamknięty. Służy do wykonywania logiki niestandardowej po zamknięciu reklamy pełnoekranowej w grze. |
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 poniższym przykładowym kodzie 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 reklama pełnoekranowa w grze 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ć reklamę pełnoekranową w grze 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>
Uwagi dotyczące korzystania z GPT
- Aby zapewnić optymalną wygodę użytkownikom, GPT wysyła żądania 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. Żądaj 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
makeGameManualInterstitialVisiblewzdarzeniu GameManualInterstitialSlotReady. - Reklamy pełnoekranowe w grach mają stały limit wyświetleń na użytkownika. Zapobiega to uruchamianiu zdarzenia
gameManualInterstitialSlotReadyczęściej niż raz na 30 sekund.
Trafficking
- Utwórz nową jednostkę reklamową lub użyj istniejącej. Jako rozmiar jednostki reklamowej wybierz 320 x 480, 300 x 250 lub 336 x 280.
- Utwórz elementy zamówienia. Wybierz odpowiednie ustawienia elementu zamówienia na podstawie przypadku użycia:
| Ustawienia elementu zamówienia | ||||
|---|---|---|---|---|
| Przypadek użycia | Typ reklamy | typ elementu zamówienia; | Oczekiwane kreacje | Kierowanie > Zasoby reklamowe |
| Wyświetlanie reklamy displayowej z rezerwacją | Sieć reklamowa |
|
320 x 480, 300 x 250 lub 336 x 280 |
Jednostka reklamowa utworzona lub wybrana w poprzednim kroku |
| Wyświetlanie reklamy spoza rezerwacji | Sieć reklamowa |
|
||
| Wyświetlanie zarezerwowanej reklamy wideo (np. tagu VAST lub pliku MP4) | Wideo lub audio |
|
300 x 250v lub 320 x 480v | |
| Wyświetlanie reklam zapasowych lub reklam w ramach aukcji otwartej | Sieć reklamowa | Ad Exchange | Wszystkie żądane rozmiary | |
Seria filmów o trafikowaniu: pierwsze kroki z reklamami pełnoekranowymi w grach H5
Obejrzyj filmy z tej 2-częściowej serii, aby dowiedzieć się więcej o reklamach pełnoekranowych w grach H5
| Część 1. Pełnoekranowe reklamy w grach H5 w usłudze Ad Manager |
| H5 Gaming Interstitial Ads on Ad Manager |
| Część 2. Reklamy z nagrodą w grach H5 w usłudze Ad Manager |
| Rewarded Ads for H5 Gaming on Ad Manager |