Wyświetlanie reklamy pełnoekranowej w grze H5

.

W tym przykładzie wyświetlana jest reklama pełnoekranowa w grze 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 wyświetlasz użytkownikom gier internetowych na podstawie reguły ręcznej. Więcej informacji o reklamach pełnoekranowych w grze znajdziesz w artykule Wyświetlanie reklamy pełnoekranowej w grze H5.

Aby wyświetlać reklamy pełnoekranowe w grze i umożliwiać interakcję z nimi, użyj tych zdarzeń GPT:

Zdarzenie Uruchamiane, gdy…
GamingInterstitialSlotReady Reklama pełnoekranowa w grze jest gotowa do wyświetlenia użytkownikowi.

Aby wyświetlić reklamę pełnoekranową, wywołaj metodę makeGameManualInterstitialVisible() w podanym obiekcie zdarzenia.
GamingInterstitialSlotClosed Użytkownik zamknął wcześniej wyświetloną reklamę pełnoekranową w grze.

Użyj tego zdarzenia, aby uruchamiać logikę niestandardową po zamknięciu reklamy pełnoekranowej w grze.

Struktury gry

Reklamy pełnoekranowe w grze mogą wyświetlać się na pełnym ekranie lub w ramce z grą, w zależności od jej struktury. Więcej informacji znajdziesz w artykule Struktury gier H5.

W przykładowej implementacji założono, że gra H5 jest renderowana bezpośrednio w oknie na szczycie, przy użyciu struktury Pełny ekran. W tym scenariuszu reklama pełnoekranowa w grze również wyświetla 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, umieść grę w elemencie iframe, jak pokazano w tym przykładzie:

<!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>

    <!-- Sample code is served here. The Google Publisher Tag loaded in this frame will only be used within the H5 game. -->
    <iframe src="https://www.example.com" title="Example game" allow="autoplay"></iframe>
  </body>
</html>

Zastosowanie

  • Aby zapewnić użytkownikom optymalną wygodę, GPT wysyła żądania reklam pełnoekranowych wyświetlanych w grach tylko na stronach, które prawidłowo obsługują ten format. Z powodu tego ograniczenia funkcja defineOutOfPageSlot() może zwracać wartość null. Sprawdź, czy tak nie jest, aby nie wykonywać niepotrzebnych czynności.

  • Żą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.

  • 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ć tagu <div>. Tego typu reklamy automatycznie tworzą i umieszczają na stronie własny kontener, gdy reklama się wypełni.

  • Reklamy pełnoekranowe w grze są używane tylko raz. Nie możesz odświeżyć boksu reklamy pełnoekranowej w grze. Zamiast tego musisz zniszczyć slot i utworzyć go ponownie, jak pokazano w implementacji przykładowej.

  • Reklamy pełnoekranowe w grach mają stały limit wyświetleń na użytkownika. Zapobiega to uruchamianiu zdarzenia gamingInterstitialSlotReady częściej niż raz co 30 sekund.

  • 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 funkcji display() 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łanie tagu display(), zanim te elementy pojawią się na stronie, może spowodować obniżenie jakości sygnałów. Zalecamy opóźnienie wywołania do momentu zdefiniowania statycznych slotów.

Przykładowa implementacja

Zobacz wersję demonstracyjną

JavaScript

Wczytuję...

TypeScript

Wczytuję...