Ta strona została przetłumaczona przez Cloud Translation API.

Przykład implementacji

Interfejs Ad Placement API jest przeznaczony dla deweloperów korzystających z AdSense i AdMob, którzy używają reklam pełnoekranowych i z nagrodą w grach HTML5 w internecie lub w aplikacjach. Ten przykład pokazuje, jak zintegrować interfejs Ad Placement API z grą i użyć go do umieszczenia reklamy pełnoekranowej.

Wymagania wstępne

Zanim zaczniesz, musisz mieć:

Utwórz 2 puste pliki w tym samym katalogu:
- index.html
- game.js
Zainstaluj Pythona lokalnie lub użyj serwera WWW, aby przetestować implementację.

Przykładowy kod aplikacji

Wydawcy AdMob mogą pobrać przykładowy kod aplikacji, aby lepiej zrozumieć, jak zintegrować interfejs API z grą w aplikacji.

Pobieranie przykładowego kodu aplikacji

1. Uruchamianie serwera programistycznego

Interfejs Ads Placement API wczytuje zależności za pomocą tego samego protokołu co strona, na której jest wczytywany, więc do testowania aplikacji musisz użyć serwera internetowego. Możesz użyć wbudowanego serwera Pythona, aby utworzyć lokalne środowisko deweloperskie.

Otwórz terminal.
Przejdź do katalogu zawierającego plik index.html, a następnie uruchom to polecenie:
```
python -m http.server 8000
```
Uwaga: moduł http.server jest dostępny tylko w Pythonie 3.x.
W przeglądarce otwórz stronę localhost:8000

Możesz też użyć dowolnego innego serwera WWW, np. serwera HTTP Apache.

2. Tworzenie gry HTML5

Zmodyfikuj index.html, aby utworzyć element canvas HTML5 i przycisk do uruchamiania rozgrywki. Następnie dodaj niezbędny tag skryptu, aby załadować plik game.js.

index.html

<!doctype html>
<html lang="en">
  <head>
    <title>Ad Placement API HTML5 demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <canvas id="gameContainer" height="300px" width="300px"></canvas>
    <br>
    <button id="playButton">Play</button>
    <button style="display:none" id="headsButton">Heads</button>
    <button style="display:none" id="tailsButton">Tails</button>

    <script src="game.js"></script>
  </body>
</html>

Zmodyfikuj plik game.js, aby po kliknięciu przycisku „Zagraj” uruchamiać grę w rzut monetą.

game.js

// Create a coin flip game
class Game {
  constructor() {
    // Define variables
    this.score = 0;
    this.choice = '';

    this.canvas = document.getElementById('gameContainer').getContext('2d');
    this.canvas.font = '24px Arial';

    this.playButton = document.getElementById('playButton');
    this.headsButton = document.getElementById('headsButton');
    this.tailsButton = document.getElementById('tailsButton');

    // On click listeners for the game's buttons.
    this.playButton.addEventListener('click', () => {
      this.erase();
      this.play();
    });

    this.headsButton.addEventListener('click', () => {
      this.choice = 'Heads';
      this.flipCoin();
    });

    this.tailsButton.addEventListener('click', () => {
      this.choice = 'Tails';
      this.flipCoin();
    });

    this.erase();
  }

  // Start the game
  play() {
    this.score = 0;
    this.canvas.fillText('Score: ' + this.score, 8, 26);
    this.canvas.fillText('Heads or Tails?', 66, 150);
    this.playButton.style.display = 'none';
    this.headsButton.style.display = 'inline-block';
    this.tailsButton.style.display = 'inline-block';
  }

  // Flip the coin
  flipCoin() {
    this.headsButton.disabled = true;
    this.tailsButton.disabled = true;
    this.erase();
    this.canvas.fillText('Score: ' + this.score, 8, 26);
    this.canvas.fillText('Flipping coin . . .', 60, 150);

    setTimeout(() => { this.coinLanded() }, 2000);
  }

  // Logic for when the coin lands
  coinLanded() {
    this.headsButton.disabled = false;
    this.tailsButton.disabled = false;
    let sideUp;
    if(Math.random() < 0.5) {
      sideUp = 'Heads';
    } else {
      sideUp = 'Tails';
    }

    if (sideUp === this.choice ) {
      this.win(sideUp);
    } else {
      this.lose(sideUp);
    }
  }

  // Guess the flip correctly
  win(sideUp) {
    this.erase();
    this.score += 1;
    this.canvas.fillText('Score: ' + this.score, 8, 26);
    this.canvas.fillText('It was ' + sideUp + '!', 66, 150);
    this.canvas.fillText('Guess again', 70, 200);
  }

  // Guess the flip incorrectly
  lose(sideUp) {
    this.erase();
    this.canvas.fillText('Sorry, it was ' + sideUp, 50, 100);
    this.canvas.fillText('Your score was ' + this.score, 50, 150);
    this.canvas.fillText('Want to play again?', 45, 200);

    this.playButton.style.display = 'inline-block';
    this.headsButton.style.display = 'none';
    this.tailsButton.style.display = 'none';
  }

  // Erase the canvas
  erase() {
    this.canvas.fillStyle = '#ADD8E6';
    this.canvas.fillRect(0, 0, 300, 300);
    this.canvas.fillStyle = '#000000';
  }
}

const game = new Game();

Po wykonaniu tego kroku, gdy otworzysz index.html w przeglądarce (za pomocą serwera deweloperskiego), powinna być widoczna płótno gry i przycisk „Graj”. Jeśli klikniesz Zagraj, gra w rzut monetą powinna się rozpocząć.

3. Importowanie interfejsu Ad Placement API

Następnie dodaj do gry interfejs Ad Placement API, wstawiając tag skryptu w sekcji index.html przed tagiem game.js.

Tag skryptu może przyjmować wiele parametrów. Aby określić kod usługi AdSense i włączyć tryb testowania, użyjemy tych parametrów:

data-ad-client=<AdSense property code> Kod usługi AdSense. Jest to zawsze wymagane, nawet w przypadku gier, które będą działać w aplikacjach.
data-adbreak-test="on" Włącza tryb testowy. Usuń to w przypadku gier, gdy są one udostępniane graczom.

Konfigurowanie kodu AdSense i włączanie trybu testowania

Funkcja interfejsu Ad Placement API jest zawarta w kodzie AdSense. Aby ją włączyć, musisz najpierw dodać kod AdSense i uwzględnić mały fragment skryptu, który inicjuje 2 główne funkcje: adBreak() i adConfig().

index.html (w przeglądarce)

 [...]
    <canvas id="gameContainer" height="300px" width="300px"></canvas>
    <br>
    <button id="playButton">Play</button>
    <button style="display:none" id="headsButton">Heads</button>
    <button style="display:none" id="tailsButton">Tails</button>

    <script async
      data-adbreak-test="on"
      src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-123456789"
      crossorigin="anonymous">
    </script>
    <script>
      window.adsbygoogle = window.adsbygoogle || [];
      const adBreak = adConfig = function(o) {adsbygoogle.push(o);}
    </script>
    <script src="game.js"></script>
  </body>
</html>

Umieszczanie gry (opcjonalnie)

Jeśli chcesz umieścić grę na innych stronach w elemencie iframe, a tag adsbygoogle znajduje się na stronie HTML gry, dodaj tag allow='autoplay' do elementu iframe. Jest to sprawdzona metoda, która jest niezbędna, aby niektóre reklamy kwalifikowały się do wyświetlania w Twojej grze.

<head>
  <!-- The adsbygoogle tag is not here -->
</head>
<body>
  <iframe src="https://www.my-game.com" title="My game" allow="autoplay">
    <!-- The game is loaded here and contains the adsbygoogle tag -->
  </iframe>
</body>

Obsługa aplikacji mobilnych

Gra H5 może działać w zwykłej przeglądarce internetowej, WebView lub w niestandardowej karcie Chrome w aplikacji. Interfejs Ad Placement API może wykryć, w jakim środowisku działa gra, i odpowiednio kierować żądania reklamy. Jeśli gra działa w zwykłej przeglądarce, żądania reklamy są traktowane jak zwykłe żądania AdSense. Jeśli interfejs Ad Placement API wykryje środowisko w aplikacji, komunikuje się z pakietem SDK do reklam mobilnych Google (jeśli jest obecny), aby wysyłać żądania reklam AdMob i je wyświetlać.

Ta funkcja jest obsługiwana w przypadku aplikacji na Androida, które zostały połączone z pakietem SDK do reklam mobilnych Google. Aby ją włączyć, musisz zarejestrować WebView, w którym będzie wyświetlana Twoja gra, za pomocą pakietu SDK do reklam mobilnych Google, a następnie skonfigurować jednostki reklamowe AdMob i przekazać je jako dodatkowe parametry do tagu AdSense. Gdy gra jest uruchamiana w odpowiedniej aplikacji, interfejs Ad Placement API używa tych jednostek reklamowych do wyświetlania reklam.

Aby włączyć obsługę urządzeń mobilnych, musisz podać te dodatkowe parametry tagu:

data-admob-interstitial-slot=<AdMob slot ID> Identyfikator pełnoekranowej jednostki reklamowej AdMob, który został wcześniej skonfigurowany.
data-admob-rewarded-slot=<AdMob slot ID> Identyfikator jednostki reklamowej z nagrodą AdMob.

Kod usługi AdSense należy zawsze przekazywać za pomocą parametru data-ad-client, a co najmniej 1 z parametrów data-admob-interstitial-slot lub data-admob-rewarded-slot musi być określony. Jeśli gra korzysta z obu formatów, należy określić oba parametry.

Opcjonalnie możesz też określić parametr tagu data-admob-ads-only=on, aby wskazać, że gra powinna wyświetlać reklamy tylko z AdMob i nie powinna wracać do AdSense w przypadkach, gdy jest odtwarzana w środowisku, które nie obsługuje żądań AdMob (np. w środowiskach innych niż aplikacje lub w aplikacjach bez skonfigurowanego pakietu SDK do reklam mobilnych Google).

Ważne: jeśli Twoja gra ma zostać umieszczona w aplikacji, której jesteś właścicielem lub z której właścicielem masz zawartą umowę o podziale przychodów, jedynym sposobem na skuteczne i zgodne z zasadami wykonanie tego zadania jest skorzystanie z obsługi AdMob.

Najpierw zarejestruj WebView, w którym będzie wyświetlana Twoja gra, za pomocą pakietu SDK do reklam mobilnych Google:

MainActivity.java (aplikacja)

Domyślne ustawienia WebView nie są zoptymalizowane pod kątem reklam. Użyj interfejsów APIWebSettings, aby skonfigurować WebView w przypadku:

JavaScript
Dostęp do pamięci lokalnej
Automatyczne odtwarzanie filmów

Java

import android.webkit.CookieManager;
import android.webkit.WebView;

public class MainActivity extends AppCompatActivity {
  private WebView webView;

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    webView = findViewById(R.id.webview);

    // Let the web view accept third-party cookies.
    CookieManager.getInstance().setAcceptThirdPartyCookies(webView, true);
    // Let the web view use JavaScript.
    webView.getSettings().setJavaScriptEnabled(true);
    // Let the web view access local storage.
    webView.getSettings().setDomStorageEnabled(true);
    // Let HTML videos play automatically.
    webView.getSettings().setMediaPlaybackRequiresUserGesture(false);

    // Set the H5AdsWebViewClient.
    h5AdsWebViewClient = new H5AdsWebViewClient(this, webView);
    webView.setWebViewClient(h5AdsWebViewClient);
    h5AdsWebViewClient.setDelegateWebViewClient(pubWebViewClient);

    // Register the web view.
    MobileAds.registerWebView(webView);
  }
}

Kotlin

import android.webkit.CookieManager
import android.webkit.WebView

class MainActivity : AppCompatActivity() {
  lateinit var webView: WebView

  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)
    webView = findViewById(R.id.webview)

    // Let the web view accept third-party cookies.
    CookieManager.getInstance().setAcceptThirdPartyCookies(webView, true)
    // Let the web view use JavaScript.
    webView.settings.javaScriptEnabled = true
    // Let the web view access local storage.
    webView.settings.domStorageEnabled = true
    // Let HTML videos play automatically.
    webView.settings.mediaPlaybackRequiresUserGesture = false

    // Set the H5AdsWebViewClient.
    val h5AdsWebViewClient = H5AdsWebViewClient(this, webView)
    webView.webViewClient = h5AdsWebViewClient
    h5AdsWebViewClient.delegateWebViewClient = pubWebViewClient

    // Register the web view.
    MobileAds.registerWebView(webView)
  }
}

Następnie przekaż jednostki reklamowe AdMob (jedną dla reklam pełnoekranowych i jedną dla reklam z nagrodą) w ten sposób:

index.html (aplikacja)

 [...]
    <canvas id="gameContainer" height="300px" width="300px"></canvas>
    <br>
    <button id="playButton">Play</button>
    <button style="display:none" id="headsButton">Heads</button>
    <button style="display:none" id="tailsButton">Tails</button>
    <script async
      data-admob-interstitial-slot="ca-app-pub-0987654321/1234567890"
      data-admob-rewarded-slot="ca-app-pub-0987654321/0987654321"
      src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-123456789"
      crossorigin="anonymous">
    </script>
    <script>
      window.adsbygoogle = window.adsbygoogle || [];
      const adBreak = adConfig = function(o) {adsbygoogle.push(o);}
    </script>
    <script src="game.js"></script>
  </body>
</html>

4. Wywołanie funkcji adConfig()

Wywołanie adConfig() przekazuje bieżącą konfigurację gry do interfejsu AdPlacement API. Interfejs API może następnie użyć tych informacji do filtrowania typów reklam, o które wysyła żądania, aby były one odpowiednie dla gry (np. reklam wideo wymagających dźwięku, jeśli dźwięk jest włączony).

Połączenie powinno być wykonywane adConfig() za każdym razem, gdy ta konfiguracja się zmienia, np. gdy użytkownik wycisza lub wyłącza wyciszenie gry. Wywołaj funkcję adConfig() w konstruktorze gry, a następnie dodaj przycisk wyciszania i wyłączania wyciszenia, który wywołuje dodatkową funkcję adConfig().

game.js

class Game {
  constructor() {
    // Define variables
    this.score = 0;
    this.choice = '';
    this.muted = false;

    this.canvas = document.getElementById('gameContainer').getContext('2d');
    this.canvas.font = '24px Arial';

    this.playButton = document.getElementById('playButton');
    this.headsButton = document.getElementById('headsButton');
    this.tailsButton = document.getElementById('tailsButton');
    this.muteButton = document.getElementById('muteButton');

    adConfig({
      sound: 'on',
    });

    // On click listeners for the game's buttons.
    this.playButton.addEventListener('click', () => {
      this.erase();
      this.play();
    });

    this.headsButton.addEventListener('click', () => {
      this.choice = 'Heads';
      this.flipCoin();
    });

    this.tailsButton.addEventListener('click', () => {
      this.choice = 'Tails';
      this.flipCoin();
    });

    this.muteButton.addEventListener('click', () => {
      var soundString = this.muted ? 'on' : 'off';
      this.muteButton.innerHTML = this.muted ? 'Mute sound' : 'Un-mute sound';
      this.muted = !this.muted;
      adConfig({
        sound: soundString,
      });
    });

    this.erase();
  [...]

Teraz dodaj przycisk wyciszania do pliku HTML.

index.html

[...]
    <canvas id="gameContainer" height="300px" width="300px"></canvas>
    <br>
    <button id="playButton">Play</button>
    <button style="display:none" id="headsButton">Heads</button>
    <button style="display:none" id="tailsButton">Tails</button>
    <button id="muteButton">Mute sound</button>

    <script async
      data-adbreak-test="on"
      src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-123456789"
      crossorigin="anonymous">
    </script>
[...]

5. Zadzwoń do `adBreak()` po zakończeniu gry

Wywołanie adBreak() określa miejsce wyświetlania reklamy i pobiera obiekt o nazwie placement config, który zawiera wszystkie informacje wymagane do wyświetlenia reklamy w tym miejscu w grze. Obsługa różnych typów reklam wymaga zainicjowania różnych podzbiorów konfiguracji miejsca docelowego.

Wywołanie adBreak() określa miejsce docelowe, w którym może się wyświetlać reklama, czyli możliwość wyświetlenia reklamy. To, czy reklama się wyświetli, zależy od wielu czynników:

Zadeklarowany typ miejsca docelowego reklamy.
jeśli przed umieszczeniem reklamy doszło do odpowiednich interakcji użytkownika.
Określa, czy dla bieżącego odtwarzacza istnieje odpowiednia reklama, która:
- są dla nich trafne,
- jest zgodne z ustawieniami prywatności i zgody użytkownika;
Liczba reklam, które użytkownik ostatnio widział.
Skonfigurowane przez Ciebie ustawienia sterowania w tej grze jako:
- wskazówki w tagu;
- W AdSense (uwaga: ustawienia dostępne w AdSense będą się zmieniać z czasem)

Dodaj kod reklamy pełnoekranowej, która ma się wyświetlać po ponownym uruchomieniu gry: wywołaj funkcję adBreak() w funkcji play(), która jest uruchamiana tylko po jednokrotnym rozegraniu gry.

adBreak() musi być wywoływana w ramach działania użytkownika, np. kliknięcia przycisku „Odtwórz”. W przeciwnym razie interfejs API nie będzie mógł wysyłać żądań reklam ani ich wyświetlać.

Utwórz funkcje, które będą wywoływane przed przerwą na reklamę i po niej, a następnie użyj ich w adBreak() konfiguracji miejsca docelowego. Pamiętaj, że funkcje beforeAd i afterAd zostaną wywołane tylko wtedy, gdy zostanie znaleziona odpowiednia reklama.

game.js

class Game {
  constructor() {
    // Define variables
    this.score = 0;
    this.choice = '';
    this.muted = false;
    this.shouldShowAdOnPlay = false;

  [...]

  // Start the game
  play() {
    if (this.shouldShowAdOnPlay) {
      this.shouldShowAdOnPlay = false;

      adBreak({
        type: 'next',  // ad shows at start of next level
        name: 'restart-game',
        beforeAd: () => { this.disableButtons(); },  // You may also want to mute the game's sound.
        afterAd: () => { this.enableButtons(); },    // resume the game flow.
      });
    }

    this.score = 0;
    this.canvas.fillText('Score: ' + this.score, 8, 26);
    this.canvas.fillText('Heads or Tails?', 66, 150);
    this.playButton.style.display = 'none'
    this.headsButton.style.display = 'inline-block'
    this.tailsButton.style.display = 'inline-block'
  }

  [...]

  // Guess the flip incorrectly
  lose(sideUp) {
    this.erase()
    this.canvas.fillText('Sorry, it was ' + sideUp, 50, 100);
    this.canvas.fillText('Your score was ' + this.score, 50, 150);
    this.canvas.fillText('Want to play again?', 45, 200);

    this.playButton.style.display = 'inline-block'
    this.headsButton.style.display = 'none'
    this.tailsButton.style.display = 'none'
    this.shouldShowAdOnPlay = true;
  }

  [...]

  // Erase the canvas
  erase() {
    this.canvas.fillStyle = '#ADD8E6';
    this.canvas.fillRect(0, 0, 300, 300);
    this.canvas.fillStyle = '#000000';
  }

  enableButtons() {
    this.playButton.disabled = false;
    this.headsButton.disabled = false;
    this.tailsButton.disabled = false;
  }

  disableButtons() {
    this.playButton.disabled = true;
    this.headsButton.disabled = true;
    this.tailsButton.disabled = true;
  }
}

const game = new Game();

6. Wywołanie `adBreak()` w przypadku reklamy z nagrodą

Dodaj kod reklamy z nagrodą, która będzie się wyświetlać po zakończeniu gry, ale użytkownik będzie chciał przywrócić swój dotychczasowy wynik zamiast zaczynać od nowa. Wywołaj funkcję adBreak() w funkcji lose(), aby sprawdzić, czy reklama z nagrodą jest dostępna. Jeśli tak, wyświetl użytkownikowi prośbę o potwierdzenie, czy chce otrzymać nagrodę (w tym przypadku możliwość wznowienia gry). Gdy użytkownik zgodzi się obejrzeć reklamę, wywołaj odpowiednią funkcję showAdFn(). Za pomocą wywołań zwrotnych adViewed i adDismissed możesz skonfigurować, co ma się stać, gdy użytkownik obejrzy lub pominie reklamy z nagrodą.

W przypadku każdej możliwości wyświetlenia reklamy z nagrodą należy wywołać nowe żądanie adBreak(). Dzięki temu reklama zostanie odświeżona, jeśli poprzednia reklama wygasła lub była niedostępna.

showAdFn() musi być wywoływana w ramach bezpośredniego działania użytkownika, aby obejrzeć reklamę. W przeciwnym razie reklama może się nie wyświetlić.

Utwórz funkcje, które będą wywoływane przed przerwą na reklamę i po niej, a następnie użyj ich w adBreak() konfiguracji miejsca docelowego. Pamiętaj, że funkcje beforeReward, adViewed, adDismissed, beforeAd i afterAd będą wywoływane tylko wtedy, gdy zostanie znaleziona odpowiednia reklama.

game.js

class Game {
  constructor() {
    // Define variables
    this.score = 0;
    this.choice = '';
    this.muted = false;
    this.shouldShowAdOnPlay = false;
    this.showRewardedAdFn = null;

    this.canvas = document.getElementById('gameContainer').getContext('2d');
    this.canvas.font = '24px Arial';

    this.playButton = document.getElementById('playButton');
    this.headsButton = document.getElementById('headsButton');
    this.tailsButton = document.getElementById('tailsButton');
    this.muteButton = document.getElementById('muteButton');
    this.continueButton = document.getElementById('continueButton');

    adConfig({
      sound: 'on',
    });

    // On click listeners for the game's buttons.
    this.playButton.addEventListener('click', () => {
      this.erase();
      this.play();
    });

    this.headsButton.addEventListener('click', () => {
      this.choice = 'Heads';
      this.flipCoin();
    });

    this.tailsButton.addEventListener('click', () => {
      this.choice = 'Tails';
      this.flipCoin();
    });

    this.muteButton.addEventListener('click', () => {
      var soundString = this.muted ? 'on' : 'off';
      this.muteButton.innerHTML = this.muted ? 'Mute sound' : 'Un-mute sound';
      this.muted = !this.muted;
      adConfig({
        sound: soundString,
      });
    });

    this.continueButton.addEventListener('click', () => {
      if (this.showRewardedAdFn) {
        this.showRewardedAdFn();
      }
    });

    this.erase();
  }

  // Start the game
  play() {
    if (this.shouldShowAdOnPlay) {
      this.shouldShowAdOnPlay = false;

      adBreak({
        type: 'next',  // ad shows at start of next level
        name: 'restart-game',
        beforeAd: () => { this.disableButtons(); },  // You may also want to mute the game's sound.
        afterAd: () => { this.enableButtons(); },    // resume the game flow.
      });
    }

    this.score = 0;
    this.canvas.fillText('Score: ' + this.score, 8, 26);
    this.canvas.fillText('Heads or Tails?', 66, 150);
    this.playButton.style.display = 'none';
    this.continueButton.style.display = 'none';
    this.headsButton.style.display = 'inline-block';
    this.tailsButton.style.display = 'inline-block';
  }

  [...]

  // Guess the flip incorrectly
  lose(sideUp) {
    this.erase()
    this.canvas.fillText('Sorry, it was ' + sideUp, 50, 100);
    this.canvas.fillText('Your score was ' + this.score, 50, 150);
    this.canvas.fillText('Want to play again?', 45, 200);

    this.playButton.style.display = 'inline-block'
    this.headsButton.style.display = 'none'
    this.tailsButton.style.display = 'none'
    this.shouldShowAdOnPlay = true;

    adBreak({
      type: 'reward',  // rewarded ad
      name: 'reward-continue',
      beforeReward: (showAdFn) => {
        this.showRewardedAdFn = () => { showAdFn(); };
        // Rewarded ad available - prompt user for a rewarded ad
        this.continueButton.style.display = 'inline-block';
      },
      beforeAd: () => { this.disableButtons(); },     // You may also want to mute the game's sound.
      adDismissed: () => {
        this.continueButton.style.display = 'none';   // Hide the reward button and continue lose flow.
      },
      adViewed: () => { this.continueGame(); },       // Reward granted - continue game at current score.
      afterAd: () => { this.enableButtons(); },       // Resume the game flow.
    });
  }

  // Continue gameplay at current score
  continueGame() {
    this.erase();
    this.canvas.fillText('Score: ' + this.score, 8, 26);
    this.canvas.fillText('Heads or Tails?', 66, 150);
    this.playButton.style.display = 'none';
    this.continueButton.style.display = 'none';
    this.headsButton.style.display = 'inline-block';
    this.tailsButton.style.display = 'inline-block';
  }
  [...]
}

const game = new Game();

Teraz dodaj przycisk kontynuacji do pliku HTML.

index.html

[...]
    <canvas id="gameContainer" height="300px" width="300px"></canvas>
    <br>
    <button id="playButton">Play</button>
    <button style="display:none" id="headsButton">Heads</button>
    <button style="display:none" id="tailsButton">Tails</button>
    <button style="display:none" id="continueButton">Watch Ad to continue?</button>
    <button id="muteButton">Mute sound</button>

    <script async
      data-adbreak-test="on"
      src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-123456789"
      crossorigin="anonymous">
    </script>
[...]

Aplikacja do rzucania monetą tworzy teraz miejsca docelowe reklam, w których będą się one wyświetlać.

W Twojej aplikacji mogą być inne odpowiednie miejsca na reklamy niż te, w których wyświetlają się one po zakończeniu gry. Wywoływanie adBreak() w tych miejscach powinno wyglądać podobnie jak w tym przykładzie.

Wyłączanie testowania aplikacji w wersji produkcyjnej

Przed opublikowaniem aplikacji usuń lub zakomentuj wiersz data-adbreak-test="on" w pliku index.html, ponieważ ten kod włącza ustawienia testowe w wersji produkcyjnej.

Przykład implementacji Zadbaj o dobrą organizację dzięki kolekcji Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.

Wymagania wstępne

Przykładowy kod aplikacji

1. Uruchamianie serwera programistycznego

2. Tworzenie gry HTML5

index.html

game.js

3. Importowanie interfejsu Ad Placement API

Konfigurowanie kodu AdSense i włączanie trybu testowania

index.html (w przeglądarce)

Umieszczanie gry (opcjonalnie)

Obsługa aplikacji mobilnych

MainActivity.java (aplikacja)

Java

Kotlin

index.html (aplikacja)

4. Wywołanie funkcji adConfig()

game.js

index.html

5. Zadzwoń do adBreak() po zakończeniu gry

game.js

6. Wywołanie adBreak() w przypadku reklamy z nagrodą

game.js

index.html

Wyłączanie testowania aplikacji w wersji produkcyjnej

Przykład implementacji

5. Zadzwoń do `adBreak()` po zakończeniu gry

6. Wywołanie `adBreak()` w przypadku reklamy z nagrodą