Se usó la API de Cloud Translation para traducir esta página.

Ejemplo de implementación

La API de Ad Placement está diseñada para brindar asistencia a los desarrolladores de AdSense y AdMob que usan anuncios intersticiales y recompensados en juegos HTML5 en la Web o en apps. En este ejemplo, se muestra cómo integrar la API de Ad Placement a un juego y usarla para colocar un anuncio intersticial.

Requisitos previos

Antes de comenzar, necesitarás lo siguiente:

Crea dos archivos vacíos en el mismo directorio:
- index.html
- juego.js
Instala Python de forma local o usa un servidor web para probar tu implementación

Código de muestra de la app

Los publicadores de AdMob pueden descargar ejemplos de código de la app para comprender mejor cómo se puede integrar la API en un juego de app.

Descargar código de muestra de la app

1. Inicia un servidor de desarrollo

Debido a que la API de posición de anuncios carga dependencias a través del mismo protocolo que la página en la que se carga, debes usar un servidor web para probar tu aplicación. Puedes usar el servidor integrado de Python para crear un entorno de desarrollo local.

Abre la terminal.
Vaya al directorio que contiene su archivo index.html y, luego, ejecute el siguiente comando:
```
python -m http.server 8000
```
Nota: http.server solo está disponible en Python 3.x.
En un navegador web, ve a localhost:8000

También puedes usar cualquier otro servidor web, como el servidor HTTP Apache.

2. Crear un juego HTML5

Modifica index.html a fin de crear un elemento Canvas de HTML5 y un botón para activar el juego. Luego, agrega la etiqueta de secuencia de comandos necesaria para cargar el archivo 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>
    <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>

Modifica game.js para que juegue a lanzar monedas al hacer clic en el botón "Jugar".

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

Después de completar este paso, cuando abras index.html en tu navegador (a través de tu servidor de desarrollo), deberías poder ver el lienzo del juego y el botón"Jugar". Si haces clic en Reproducir, debería comenzar el juego de lanzamiento de monedas.

3. Importar la API de Ad Placement

A continuación, agrega la API de Ad Placement a tu juego. Para ello, inserta una etiqueta de secuencia de comandos en index.html, antes de la etiqueta de game.js.

La etiqueta de secuencia de comandos puede tomar varios parámetros. Usaremos los siguientes parámetros para especificar el código de propiedad de AdSense y habilitar el modo de prueba:

data-ad-client=<AdSense property code> Es el código de su propiedad de AdSense. Esto siempre es obligatorio incluso para los juegos que se ejecutarán en apps.
data-adbreak-test="on"Habilita el modo de prueba. Quita esta opción para los juegos una vez que se entregan a los jugadores.

Configura el código de AdSense y activa el modo de prueba

La funcionalidad de la API de Ad Placement se incluye en el código de AdSense. Para activarla, primero debes agregar el código de AdSense y, luego, incluir un pequeño fragmento de secuencia de comandos que inicializa sus dos funciones clave: adBreak() y adConfig().

index.html (Web)

 [...]
    <canvas id="gameContainer" height="300px" width="300px"></canvas>
    <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>

Cómo incorporar tu juego (opcional)

Si quieres incorporar un juego en otras páginas dentro de un iframe y la etiqueta adsbygoogle está en la página HTML del juego, asegúrate de agregar allow='autoplay' al elemento iframe. Esta es una práctica recomendada y es necesaria para que algunos anuncios sean aptos para su juego.

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

Compatibilidad con aplicaciones para dispositivos móviles

Un juego H5 se puede ejecutar en un navegador web normal o en una pestaña WebView o personalizada de Chrome dentro de una app. La API de Ad Placement puede detectar en qué entorno se ejecuta el juego y dirigir las solicitudes de anuncios de manera adecuada. Si su juego se ejecuta en un navegador web normal, las solicitudes de anuncios se tratan como solicitudes normales de AdSense. Si la API de Ad Placement detecta un entorno integrado en la aplicación, se comunica con el SDK de GMA, si está presente, para solicitar y mostrar anuncios de AdMob.

Actualmente, esta función es compatible con apps para Android que se vincularon con el SDK de GMA de AdMob. Para habilitarlo, debes registrar el WebView, que mostrará tu juego con el SDK de GMA, y luego configurar los bloques de anuncios de AdMob y pasarlos como parámetros adicionales a la etiqueta de AdSense. Cuando tu juego se ejecute dentro de una app adecuada, la API de Ad Placement usará estos bloques de anuncios para mostrar anuncios.

Para habilitar la compatibilidad con dispositivos móviles, debes especificar los siguientes parámetros de etiqueta adicionales:

data-admob-interstitial-slot=<AdMob slot ID> Es un ID de bloque de anuncios intersticiales de AdMob que configuró anteriormente.
data-admob-rewarded-slot=<AdMob slot ID> Un ID de bloque de anuncios recompensados de AdMob

El código de propiedad de AdSense siempre debe pasarse con el parámetro data-ad-client y se debe especificar al menos uno de data-admob-interstitial-slot o data-admob-rewarded-slot. Si tu juego usa ambos formatos, debes especificar ambos parámetros.

De manera opcional, también puedes especificar el parámetro de etiqueta data-admob-ads-only=on para indicar que tu juego debe mostrar anuncios solo de AdMob y no recurrir a AdSense en los casos en que el juego se juegue en un entorno que no admita solicitudes de AdMob (p.ej., apps o entornos que no pertenezcan a la app sin el SDK de GMA de AdMob configurado).

Importante: Cuando diseñas tu juego para que se incorpore en una app de la que seas propietario, o si celebras un acuerdo de porcentaje de ingresos con el propietario de la app, la única manera de hacerlo de manera que cumpla con las políticas y tenga un alto rendimiento es mediante esta asistencia de AdMob.

Primero, registra el WebView que mostrará tu juego con el SDK de GMA:

MainActivity.java (app)

...
public void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    webView = findViewById(R.id.webview_minigame);

    WebSettings settings = webView.getSettings();
    settings.setJavaScriptEnabled(true);

    h5AdsWebViewClient = new H5AdsWebViewClient(this, webView);
    webView.setWebViewClient(h5AdsWebViewClient);

    h5AdsWebViewClient.setDelegateWebViewClient(pubWebViewClient);

A continuación, pasa los bloques de anuncios de AdMob (uno para anuncios intersticiales y otro para anuncios recompensados) de la siguiente manera:

index.html (aplicación)

 [...]
    <canvas id="gameContainer" height="300px" width="300px"></canvas>
    <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. Realizar una llamada a adConfig()

La llamada adConfig() comunica la configuración actual del juego a la API de Ad Placement. Luego, la API puede usar esta información para filtrar los tipos de anuncios que solicita a fin de que sean adecuados para el juego (como los anuncios de video que requieren sonido, si el sonido está habilitado).

Se debe realizar una llamada a adConfig() cada vez que cambie esta configuración, como cuando un usuario silencia o activa el sonido del juego. Realiza una llamada a adConfig() en el constructor del juego y, luego, agrega un botón para silenciar y activar el sonido del juego que realiza una llamada adicional a adConfig().

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

Ahora, agrega el botón para silenciar a tu archivo HTML.

index.html

[...]
    <canvas id="gameContainer" height="300px" width="300px"></canvas>
    <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. Hacer una llamada a `adBreak()` cuando termine el juego

La llamada adBreak() define una posición de anuncio y toma el objeto denominado configuración de posición que especifica todo lo que se necesita para mostrar un anuncio en este punto del juego. La compatibilidad con diferentes tipos de anuncios requerirá que inicialices diferentes subconjuntos de la configuración de posición.

La llamada adBreak() define una posición en la que un anuncio podría mostrarse o, en otras palabras, una oportunidad para mostrar un anuncio. El hecho de que un anuncio se muestre dependerá de varios factores:

Es el tipo de posición del anuncio que declaró.
Si hubo interacciones del usuario adecuadas antes de esta posición del anuncio
Si existe un anuncio adecuado para el jugador actual, sucede lo siguiente:
- Es relevante para ellos.
- Es coherente con la configuración de privacidad y consentimiento de sus datos.
Indica la cantidad de anuncios que el usuario vio recientemente.
La configuración de control que estableciste para este juego es una de las que se indican a continuación:
- Pistas en la etiqueta
- En AdSense (Nota: Los controles disponibles en AdSense evolucionarán con el tiempo)

Agrega código para que se muestre un anuncio intersticial cuando se reinicie el juego: realiza una llamada a adBreak() dentro de la función play(), que se ejecuta solo después de que el juego se jugó una vez.

Se debe llamar a adBreak() como parte de una acción del usuario, como hacer clic en el botón &Play; de lo contrario, la API no podrá solicitar ni mostrar anuncios.

Crea funciones que se llamen antes y después de la pausa publicitaria, que luego usarás en la configuración de posición adBreak(). Es importante tener en cuenta que las funciones beforeAd y afterAd solo se llamarán si se encuentra un anuncio adecuado.

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

La app de lanzamiento de monedas ahora crea posiciones de anuncios para que se muestren los anuncios.

Es posible que tu propia app tenga lugares adicionales adecuados para los anuncios, excepto cuando termine el juego. Llamar a adBreak() en esos lugares debería ser similar a este ejemplo.

Desactiva las pruebas para apps de producción

Antes de lanzar la app, es importante quitar o comentar la línea data-adbreak-test="on" en index.html, ya que este código activa la configuración de prueba en producción.

Ejemplo de implementación

Requisitos previos

Código de muestra de la app

1. Inicia un servidor de desarrollo

2. Crear un juego HTML5

index.html

juego.js

3. Importar la API de Ad Placement

Configura el código de AdSense y activa el modo de prueba

index.html (Web)

Cómo incorporar tu juego (opcional)

Compatibilidad con aplicaciones para dispositivos móviles

MainActivity.java (app)

index.html (aplicación)

4. Realizar una llamada a adConfig()

juego.js

index.html

5. Hacer una llamada a adBreak() cuando termine el juego

juego.js

Desactiva las pruebas para apps de producción

5. Hacer una llamada a `adBreak()` cuando termine el juego