Diese Seite wurde von der Cloud Translation API übersetzt.

Beispielimplementierung

Die Ad Placement API wurde für AdSense- und AdMob-Entwickler entwickelt, die Interstitial- und Prämienanzeigen in HTML5-Spielen im Web oder in Apps verwenden. In diesem Beispiel wird gezeigt, wie Sie die Ad Placement API in ein Spiel einbinden und damit eine Interstitial-Anzeige platzieren.

Vorbereitung

Bevor Sie beginnen, benötigen Sie Folgendes:

Erstellen Sie zwei leere Dateien im selben Verzeichnis:
- index.html
- game.js
Python lokal installieren oder Webserver zum Testen der Implementierung verwenden

Beispielcode für Apps

AdMob-Publisher können Beispiel-App-Code herunterladen, um besser zu verstehen, wie die API in ein App-Spiel eingebunden werden kann.

Beispielcode für Apps herunterladen

1. Entwicklungsserver starten

Da die Ads Placement API Abhängigkeiten über dasselbe Protokoll wie die Seite lädt, auf der sie geladen wird, müssen Sie einen Webserver verwenden, um Ihre App zu testen. Sie können den integrierten Server von Python verwenden, um eine lokale Entwicklungsumgebung zu erstellen.

Öffnen Sie das Terminal.
Wechseln Sie zu dem Verzeichnis, das Ihre Datei „index.html“ enthält, und führen Sie Folgendes aus:
```
python -m http.server 8000
```
Hinweis :http.server ist nur in Python 3.x verfügbar.
Rufen Sie in einem Webbrowser localhost:8000 auf.

Sie können auch einen anderen Webserver verwenden, z. B. den Apache HTTP-Server.

2. HTML5-Spiel erstellen

Ändern Sie index.html, um ein HTML5-Canvas-Element und eine Schaltfläche zum Auslösen des Spiels zu erstellen. Fügen Sie dann das erforderliche Script-Tag hinzu, um die Datei game.js zu laden.

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>

Ändern Sie „game.js“ so, dass beim Klicken auf die Schaltfläche „Play“ ein Münzwurfspiel gestartet wird.

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();

Wenn Sie diesen Schritt abgeschlossen haben und index.html in Ihrem Browser (über Ihren Entwicklungsserver) öffnen, sollten Sie den Spielbereich und die Schaltfläche „Spielen“ sehen. Wenn Sie auf „Spielen“ klicken, sollte das Münzwurfspiel starten.

3. Ad Placement API importieren

Fügen Sie als Nächstes die Ad Placement API in Ihr Spiel ein, indem Sie ein Script-Tag in index.html vor dem Tag für game.js einfügen.

Das Script-Tag kann eine Reihe von Parametern enthalten. Wir verwenden die folgenden Parameter, um den AdSense-Property-Code anzugeben und den Testmodus zu aktivieren:

data-ad-client=<AdSense property code> Ihr AdSense-Property-Code. Dies ist immer erforderlich, auch für Spiele, die in Apps ausgeführt werden.
data-adbreak-test="on" Aktiviert den Testmodus. Entfernen Sie diese für Spiele, sobald sie für Spieler bereitgestellt werden.

AdSense-Code einrichten und Testmodus aktivieren

Die Funktionen der Ad Placement API sind im AdSense-Code enthalten. Dazu müssen Sie zuerst den AdSense-Code hinzufügen und ein kleines Skript-Snippet einfügen, das die beiden wichtigsten Funktionen initialisiert: adBreak() und adConfig().

index.html (Web)

 [...]
    <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>

Spiel einbetten (optional)

Wenn Sie ein Spiel in andere Seiten in einem iFrame einbetten möchten und das adsbygoogle-Tag auf der HTML-Seite des Spiels vorhanden ist, fügen Sie dem iFrame-Element allow='autoplay' hinzu. Dies ist eine Best Practice und für bestimmte Anzeigen erforderlich, damit sie für Ihr Spiel infrage kommen.

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

Mobile Apps unterstützen

Ein H5-Spiel kann in einem normalen Webbrowser, einer WebView oder einem benutzerdefinierten Chrome-Tab in einer App ausgeführt werden. Die Ad Placement API kann erkennen, in welcher Umgebung Ihr Spiel ausgeführt wird, und die Anzeigenanfragen entsprechend weiterleiten. Wenn Ihr Spiel in einem normalen Webbrowser ausgeführt wird, werden die Anzeigenanfragen wie normale AdSense-Anfragen behandelt. Wenn die Ad Placement API eine In-App-Umgebung erkennt, kommuniziert sie mit dem Google Mobile Ads SDK (sofern vorhanden), um AdMob-Anzeigen anzufordern und zu präsentieren.

Diese Funktion wird in Android-Apps unterstützt, die mit dem Google Mobile Ads SDK verknüpft wurden. Dazu müssen Sie die WebView, in der Ihr Spiel mit dem Google Mobile Ads SDK angezeigt wird, registrieren und dann AdMob-Anzeigenblöcke konfigurieren und als zusätzliche Parameter an das AdSense-Tag übergeben. Wenn Ihr Spiel in einer geeigneten App ausgeführt wird, werden mit der API zum Anzeigen-Placement Anzeigen in diesen Anzeigenblöcken ausgeliefert.

Um die Unterstützung für Mobilgeräte zu aktivieren, müssen Sie die folgenden zusätzlichen Tag-Parameter angeben:

data-admob-interstitial-slot=<AdMob slot ID> Eine AdMob-Anzeigenblock-ID für Interstitial-Anzeigen, die Sie zuvor konfiguriert haben.
data-admob-rewarded-slot=<AdMob slot ID> Eine AdMob-Anzeigenblock-ID für Anzeigen mit Prämie.

Ihr AdSense-Property-Code sollte immer mit dem Parameter data-ad-client übergeben werden. Außerdem muss mindestens einer der Parameter data-admob-interstitial-slot oder data-admob-rewarded-slot angegeben werden. Beide Parameter sollten angegeben werden, wenn Ihr Spiel beide Formate verwendet.

Optional können Sie auch den data-admob-ads-only=on-Tag-Parameter angeben, um festzulegen, dass in Ihrem Spiel nur Anzeigen von AdMob ausgeliefert werden sollen. In Fällen, in denen das Spiel in einer Umgebung gespielt wird, die keine AdMob-Anfragen unterstützt (z. B. Nicht-App-Umgebungen oder Apps ohne konfiguriertes Google Mobile Ads SDK), wird dann nicht auf AdSense zurückgegriffen.

Wichtig: Wenn Sie Ihr Spiel so gestalten, dass es in eine App eingebettet wird, und Sie der Inhaber der App sind oder eine Vereinbarung über die Umsatzbeteiligung mit dem Inhaber der App abschließen, gibt es nur eine Möglichkeit, das zu erreichen: Sie müssen die AdMob-Unterstützung verwenden.

Registrieren Sie zuerst die WebView, in der Ihr Spiel mit dem Google Mobile Ads SDK präsentiert wird:

MainActivity.java (App)

Die Standardeinstellungen für WebView sind nicht für Anzeigen optimiert. Verwenden Sie die WebSettings APIs, um WebView für Folgendes zu konfigurieren:

JavaScript
Zugriff auf den lokalen Speicher
Automatische Videowiedergabe

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)
  }
}

Übergeben Sie als Nächstes AdMob-Anzeigenblöcke (einen für Interstitials und einen für Anzeigen mit Prämie) so:

index.html (App)

 [...]
    <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. adConfig() aufrufen

Mit dem adConfig()-Aufruf wird die aktuelle Konfiguration des Spiels an die Ad Placement API übermittelt. Die API kann diese Informationen dann verwenden, um die Arten von Anzeigen zu filtern, die angefordert werden, damit sie für das Spiel geeignet sind (z. B. Videoanzeigen, für die Ton erforderlich ist, wenn Ton aktiviert ist).

adConfig() sollte immer aufgerufen werden, wenn sich diese Konfiguration ändert, z. B. wenn ein Nutzer das Spiel stummschaltet oder die Stummschaltung aufhebt. Rufen Sie adConfig() im Konstruktor des Spiels auf und fügen Sie dann eine Schaltfläche zum Stummschalten und Aufheben der Stummschaltung des Spiels hinzu, die einen zusätzlichen adConfig()-Aufruf auslöst.

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();
  [...]

Fügen Sie nun die Stummschaltungs-Schaltfläche in Ihre HTML-Datei ein.

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. Rufe `adBreak()` an, wenn das Spiel endet

Mit dem adBreak()-Aufruf wird ein Anzeigen-Placement definiert. Er verwendet das Objekt „placement config“, in dem alles angegeben ist, was zum Ausliefern einer Anzeige an dieser Stelle im Spiel erforderlich ist. Wenn Sie verschiedene Anzeigentypen unterstützen möchten, müssen Sie verschiedene Teilmengen der Placement-Konfiguration initialisieren.

Mit dem adBreak()-Aufruf wird ein Placement definiert, in dem eine Anzeige ausgeliefert werden kann. Es handelt sich also um eine Gelegenheit, eine Anzeige auszuliefern. Ob eine Anzeige tatsächlich ausgeliefert wird, hängt von einer Reihe von Faktoren ab:

Der Typ des von Ihnen angegebenen Anzeigen-Placements.
Wenn es vor der Platzierung dieser Anzeige geeignete Nutzerinteraktionen gab.
Gibt an, ob für den aktuellen Player eine geeignete Anzeige vorhanden ist, die:
- Sie ist für sie relevant.
- mit ihren Datenschutz- und Einwilligungseinstellungen übereinstimmt.
Die Anzahl der Anzeigen, die der Nutzer in letzter Zeit gesehen hat.
Die Steuerungseinstellungen, die du für dieses Spiel konfiguriert hast, sind entweder:
- Hinweise im Tag
- In AdSense (Hinweis: Die in AdSense verfügbaren Einstellungen werden im Laufe der Zeit weiterentwickelt)

Fügen Sie Code für eine Interstitial-Anzeige hinzu, die beim Neustart des Spiels präsentiert wird: Rufen Sie adBreak() in der Funktion play() auf. Diese wird erst ausgeführt, nachdem das Spiel einmal durchgespielt wurde.

adBreak() muss als Teil einer Nutzeraktion aufgerufen werden, z. B. durch Klicken auf die Schaltfläche „Wiedergeben“. Andernfalls kann die API keine Anzeigen anfordern und präsentieren.

Erstelle Funktionen, die vor und nach der Werbeunterbrechung aufgerufen werden sollen. Diese Funktionen verwendest du dann in der adBreak()-Platzierungskonfiguration. Die Funktionen beforeAd und afterAd werden nur aufgerufen, wenn eine geeignete Anzeige gefunden wird.

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. Anruf an `adBreak()` für eine Anzeige mit Prämie

Fügen Sie Code hinzu, damit eine Anzeige mit Prämie eingeblendet wird, wenn das Spiel endet, der Nutzer aber seinen bisherigen Punktestand wiederherstellen möchte, anstatt von vorn zu beginnen. Rufen Sie adBreak() in der Funktion lose() auf, um zu prüfen, ob eine Anzeige mit Prämie verfügbar ist. Wenn das der Fall ist, zeige dem Nutzer eine Aufforderung an, in der er gefragt wird, ob er die Prämie (in diesem Fall die Wiederbelebung) erhalten möchte. Wenn er zustimmt, sich die Anzeige anzusehen, rufe die entsprechende showAdFn() auf. Mit den adViewed- und adDismissed-Callbacks können Sie konfigurieren, was passieren soll, wenn der Nutzer sich die Anzeigen mit Prämie ansieht oder sie überspringt.

Für jede Gelegenheit, eine Anzeige mit Prämie zu präsentieren, sollte ein neuer adBreak() aufgerufen werden. So wird die Anzeige aktualisiert, wenn die vorherige Anzeige abgelaufen oder nicht verfügbar war.

showAdFn() muss im Rahmen einer direkten Nutzeraktion aufgerufen werden, um eine Anzeige anzusehen. Andernfalls wird die Anzeige möglicherweise nicht ausgeliefert.

Erstelle Funktionen, die vor und nach der Werbeunterbrechung aufgerufen werden sollen. Diese Funktionen verwendest du dann in der adBreak()-Platzierungskonfiguration. Die Funktionen beforeReward, adViewed, adDismissed, beforeAd und afterAd werden nur aufgerufen, wenn eine geeignete Anzeige gefunden wird.

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();

Fügen Sie Ihrer HTML-Datei nun die Schaltfläche „Weiter“ hinzu.

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>
[...]

Die Münzwurf-App erstellt jetzt Anzeigen-Placements für die Anzeigenauslieferung.

Ihre eigene App bietet möglicherweise zusätzliche geeignete Stellen für Anzeigen, die nicht nur am Ende des Spiels eingeblendet werden können. Der Aufruf von adBreak() sollte an diesen Stellen ähnlich wie in diesem Beispiel erfolgen.

Tests für Produktions-Apps deaktivieren

Vor der Veröffentlichung Ihrer App ist es wichtig, die Zeile data-adbreak-test="on" in index.html zu entfernen oder auszukommentieren, da dieser Code Testeinstellungen in der Produktionsumgebung aktiviert.

Beispielimplementierung Mit Sammlungen den Überblick behalten Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.

Vorbereitung

Beispielcode für Apps

1. Entwicklungsserver starten

2. HTML5-Spiel erstellen

index.html

game.js

3. Ad Placement API importieren

AdSense-Code einrichten und Testmodus aktivieren

index.html (Web)

Spiel einbetten (optional)

Mobile Apps unterstützen

MainActivity.java (App)

Java

Kotlin

index.html (App)

4. adConfig() aufrufen

game.js

index.html

5. Rufe adBreak() an, wenn das Spiel endet

game.js

6. Anruf an adBreak() für eine Anzeige mit Prämie

game.js

index.html

Tests für Produktions-Apps deaktivieren

Beispielimplementierung

5. Rufe `adBreak()` an, wenn das Spiel endet

6. Anruf an `adBreak()` für eine Anzeige mit Prämie