Cómo agregar anuncios de AdMob a una app de Flutter

Qué compilarás

En este codelab, te guiaremos durante el proceso para agregar un banner de AdMob, un anuncio intersticial y un anuncio recompensado a una app que se llama Awesome Drawing Quiz, un videojuego que permite que quienes lo juegan adivinen el nombre del dibujo.

Si a medida que avanzas con este codelab encuentras algún problema (errores de código, errores gramaticales, texto poco claro), infórmalo mediante el vínculo Informa un error que se encuentra en la esquina inferior izquierda del codelab.

Qué aprenderás

  • Cómo configurar un proyecto de Firebase para una app de Flutter
  • Cómo configurar el complemento de AdMob de Firebase
  • Cómo usar anuncios intersticiales, anuncios de banner y anuncios recompensados en una app de Flutter

Requisitos

  • Android Studio 3.6 o una versión posterior
  • Xcode (para compatibilidad con iOS)

¿Cómo calificarías tu nivel de experiencia con AdMob?

Principiante Intermedio Avanzado

¿Qué te gustaría aprender en este codelab?

Desconozco el tema y me gustaría obtener una buena descripción general. Tengo algunos conocimientos sobre este tema, pero me gustaría repasarlos. Estoy buscando un código de ejemplo para usar en mi proyecto. Estoy buscando una explicación sobre un tema específico.

Cómo configurar el entorno de desarrollo de Flutter

  1. Instala el SDK de Flutter en tu equipo. Para ello, sigue las instrucciones de instalación en flutter.dev.
  2. Abre Android Studio y sigue los pasos que se indican en la página de configuración a fin de instalar los complementos de Flutter y Dart para Android Studio.

Descarga el código

Para descargar todo el código de este codelab como archivo ZIP, haz clic en el siguiente botón:

Download source code

Extrae los archivos del archivo ZIP. Esto descomprime una carpeta raíz con el nombre admob-ads-in-flutter-master.

O bien, puedes clonar el repositorio de GitHub desde la línea de comandos.

$ git clone https://github.com/googlecodelabs/admob-ads-in-flutter

El repositorio contiene dos carpetas:

  • android_studio_folder.pngstarter: Contiene el código inicial que usas para compilar este codelab.
  • android_studio_folder.png complete: Contiene el código completo para este codelab.

Importa el proyecto inicial

  1. Abre Android Studio.
  2. En la pantalla de bienvenida, selecciona Open an existing Android Studio project. a3a1fa1afc967e37.png
  3. Abre la carpeta android_studio_folder.pngstarter del código que descargaste en el paso anterior.

a879fa2385ba368f.png

  1. Es posible que veas los siguientes mensajes de error de la pestaña Dart Analysis. Este error se produce solo una vez cuando importas el proyecto existente a Android Studio porque los paquetes que se usan en el proyecto de ejemplo todavía no se descargaron.

2b8fbccf84e1e8a5.png

  1. Para corregir este error, haz clic en Get dependencies en la parte superior del panel del editor. Se descargarán los paquetes de los que depende el proyecto de ejemplo.

dc017166e44ac333.png

  1. Una vez que se complete la descarga, no deberías observar errores en la pestaña Dart Analysis. Ahora, estás listo para desarrollar tu proyecto.

Debes configurar un proyecto de Firebase para publicar anuncios de AdMob con el complemento de AdMob de Firebase.

Crea un proyecto de Firebase

  1. En Firebase console, haz clic en Agregar proyecto.
  2. Introduce Awesome Drawing Quiz como nombre del proyecto.
  3. Habilita Google Analytics para tu proyecto y haz clic en Continuar.

87590d75b00db648.png

  1. Elige la ubicación y la configuración para Analytics que se aplican a tu proyecto. Lee y acepta los términos, y haz clic en Crear proyecto.

700c64d82fedbd0b.png

  1. Después de un minuto aproximadamente, tu proyecto de Firebase estará listo.

Registra la app con Firebase

En Firebase console, selecciona el proyecto Awesome Drawing Quiz que creaste en el paso anterior.

Registra una app para Android

  1. En el centro de la página de descripción general del proyecto, haz clic en el ícono de Android para iniciar el flujo de trabajo de configuración.
  2. Introduce com.codelab.awesomedrawingquiz en el campo Nombre del paquete de Android.
  3. Introduce Awesome Drawing Quiz (Android) en el campo Sobrenombre de la app.
  4. Haz clic en Registrar app.
  5. Descarga el archivo google-services.json para usarlo más adelante.

Registra una app para iOS

  1. En el centro de la página de descripción general del proyecto, haz clic en el ícono de iOS o en el ícono Agregar app (+) para iniciar el flujo de trabajo de configuración.
  2. Introduce com.codelab.awesomedrawingquiz en el campo ID del paquete de iOS.
  3. Introduce Awesome Drawing Quiz (iOS) en el campo Sobrenombre de la app.
  4. Haz clic en Registrar app.
  5. Descarga el archivo GoogleService-Info.plist para usarlo más adelante.

Cómo agregar un archivo de configuración de Firebase

Con las siguientes instrucciones, te explicamos cómo configurar Firebase para iOS y Android.

Configuración para Android

  1. Abre el proyecto starter en Android Studio. Para ello, consulta la sección Importa el proyecto inicial en el paso Configura el entorno de desarrollo en este codelab.
  2. Mueve el archivo google-services.json al directorio android/app del proyecto de Flutter Awesome Drawing Quiz.

bd0729c424b0c79d.png

  1. En el archivo de Gradle (android/build.gradle), en el nivel raíz (nivel de proyecto), agrega reglas a fin de incluir el complemento de Gradle para Servicios de Google. Verifica que tengas el repositorio de Maven de Google.

android/build.gradle

buildscript {

    repositories {
      // Check that you have the following line (if not, add it):
      google()  // Google's Maven repository
    }

    ...

    dependencies {
      ...

      // TODO: Add Google Services plugin
      classpath 'com.google.gms:google-services:4.3.3'
    }
}

allprojects {
    ...

    repositories {
      // Check that you have the following line (if not, add it):
      google()  // Google's Maven repository
      ...
    }
}
  1. En el archivo de Gradle (android/app/build.gradle), en el módulo (nivel de app), aplica el complemento de Gradle para Servicios de Google.

android/app/build.gradle

...

// TODO: Apply google-services plugin
apply plugin: 'com.google.gms.google-services'

android {
  ...
}

...

Configuración para iOS

  1. Abre el proyecto starter en Android Studio. Para ello, consulta la sección Importa el proyecto inicial en el paso Configura el entorno de desarrollo en este codelab.
  2. Abre cualquier archivo en el directorio ios. (Por ejemplo: ios/Runner/AppDelegate.swift)
  3. Haz clic en Open iOS module in Xcode.

b0e50d31ada7bf46.png

  1. En Xcode, arrastra el archivo GoogleService-Info.plist al directorio Runner para importar el archivo de configuración al proyecto de Xcode.

1f552ff12b67008.png

Como Flutter es un SDK multiplataforma, debes agregar una app y bloques de anuncios para iOS y Android en AdMob.

Antes de comenzar, te recomendamos que te familiarices con los siguientes glosarios de AdMob.

Bloque de anuncios

El bloque de anuncios es un conjunto de anuncios que se muestra como el resultado de un fragmento del código de anuncio de AdMob. Puedes crear y personalizar un bloque de anuncios en tu cuenta de AdMob.

Cada bloque de anuncios tiene un identificador único, que se denomina ID del bloque de anuncios. Cuando implementes un bloque de anuncios nuevo en tu app, harás referencia al ID del bloque de anuncios para indicarle a las redes de publicidad dónde enviar los anuncios cuando se soliciten.

Anuncio de banner

Los anuncios de banners ocupan un espacio en el diseño de una app, ya sea en la parte superior o inferior de la pantalla del dispositivo. Permanecen en la pantalla mientras los usuarios interactúan con la app y se pueden actualizar automáticamente después de un período de tiempo determinado.

Anuncio intersticial

Los anuncios intersticiales son anuncios en pantalla completa que cubren la interfaz de su app host. Por lo general, se muestran en puntos naturales de transición en el flujo de una app, como entre actividades o durante la pausa entre niveles de un juego.

Anuncio recompensado

Los anuncios recompensados son aquellos con los que los usuarios pueden interactuar a cambio de recompensas en la app.

Configuración para Android

En esta sección, te explicamos cómo agregar a AdMob una app para Android y bloques de anuncios.

Agrega una app para Android

Sigue estas instrucciones a fin de agregar a AdMob en una app para Android:

  1. En la consola de AdMob, haz clic en Agregar aplicación desde el menú de Aplicaciones.
  2. Cuando se te pregunte ¿Publicaste tu app en Google Play o App Store?, haz clic en NO.
  3. Introduce Awesome Drawing Quiz en el campo Nombre de la app y selecciona Android como plataforma.

152e1694fd0ce870.png

  1. No es obligatorio habilitar las métricas del usuario para completar este codelab. No obstante, te recomendamos que lo hagas porque habilitar las métricas del usuario brinda datos de Analytics con un comportamiento detallado del usuario. Haz clic en Agregar para completar el proceso.

5204925f5c652b41.png

  1. Anota el nuevo ID de la app (ca-app-pub-xxxxxxxxxxxxxxxx~yyyyyyyyyy). Deberás agregarlo al código fuente del proyecto de ejemplo para publicar anuncios.

Crea bloques de anuncios

Para comenzar a agregar bloques de anuncios a AdMob, haz lo siguiente:

  1. Selecciona Awesome Drawing Quiz (Android) en el menú de Apps de la consola de AdMob.
  2. Haz clic en el menú de Bloques de anuncios.

En el menú de Bloques de anuncios, sigue las instrucciones para crear un anuncio de banner, un anuncio intersticial y un bloque de anuncios recompensados.

Banner

  1. Haz clic en el botón Agregar bloque de anuncios.
  2. Selecciona Banner como formato.
  3. Introduce android-adq-banner en el campo Nombre del bloque de anuncios.
  4. Haz clic en Crear un bloque de anuncios para completar el proceso.

Intersticial

  1. Haz clic en el botón Agregar bloque de anuncios.
  2. Selecciona Intersticial como formato.
  3. Introduce android-adq-interstitial en el campo Nombre del bloque de anuncios.
  4. Haz clic en Crear un bloque de anuncios para completar el proceso.

Recompensado

  1. Haz clic en el botón Agregar bloque de anuncios.
  2. Selecciona Recompensado como formato.
  3. Introduce android-adq-rewarded en el campo Nombre del bloque de anuncios.
  4. Deja la opción predeterminada para Configuración de recompensa.
  5. Haz clic en Crear un bloque de anuncios para completar el proceso.

Configuración para iOS

En esta sección, te explicamos cómo agregar a AdMob una app para iOS y bloques de anuncios.

Agrega una app para iOS

Sigue estas instrucciones a fin de agregar a AdMob una app para iOS:

  1. En la consola de AdMob, haz clic en Agregar aplicación desde el menú de Aplicaciones.
  2. Cuando se te pregunte ¿Publicaste tu app en Google Play o App Store?, haz clic en NO.
  3. Introduce Awesome Drawing Quiz en el campo Nombre de la app y selecciona iOS como plataforma.

a8fa48af652021d8.png

  1. No es obligatorio habilitar las métricas del usuario para completar este codelab. No obstante, te recomendamos que lo hagas porque habilitar las métricas del usuario brinda datos de Analytics con un comportamiento detallado del usuario. Haz clic en Agregar para completar el proceso.

5204925f5c652b41.png

  1. Anota el nuevo ID de la app (ca-app-pub-xxxxxxxxxxxxxxxx~yyyyyyyyyy). Deberás agregarlo al código fuente del proyecto de ejemplo para publicar anuncios.

Crea bloques de anuncios

Para comenzar a agregar bloques de anuncios, haz lo siguiente:

  1. Selecciona Awesome Drawing Quiz (iOS) en el menú de Apps de la consola de AdMob.
  2. Haz clic en el menú de Bloques de anuncios.

En el menú de Bloques de anuncios, sigue las instrucciones para crear un anuncio de banner, un anuncio intersticial y un bloque de anuncios recompensados.

Banner

  1. Haz clic en el botón Agregar bloque de anuncios.
  2. Selecciona Banner como formato.
  3. Introduce ios-adq-banner en el campo Nombre del bloque de anuncios.
  4. Haz clic en Crear un bloque de anuncios para completar el proceso.

Intersticial

  1. Haz clic en el botón Agregar bloque de anuncios.
  2. Selecciona Intersticial como formato.
  3. Introduce ios-adq-interstitial en el campo Nombre del bloque de anuncios.
  4. Haz clic en Crear un bloque de anuncios para completar el proceso.

Recompensado

  1. Haz clic en el botón Agregar bloque de anuncios.
  2. Selecciona Recompensado como formato.
  3. Introduce ios-adq-rewarded en el campo Nombre del bloque de anuncios.
  4. Deja la opción predeterminada para Configuración de recompensa.
  5. Haz clic en Crear un bloque de anuncios para completar el proceso.

Usa la app de AdMob y los bloques de anuncios preconfigurados (opcional)

Si deseas seguir el codelab en lugar de crear una aplicación y los bloques de anuncios nuevos por tu cuenta, puede usar el siguiente ID de la app de AdMob y los ID de los bloques de anuncios que se prepararon para este codelab.

Android

Prueba los ID de AdMob para Android:

Elemento

ID de la app/ID del bloque de anuncios

ID de la app de AdMob

ca-app-pub-3940256099942544~4354546703

Banner

ca-app-pub-3940256099942544/8865242552

Intersticial

ca-app-pub-3940256099942544/7049598008

Recompensado

ca-app-pub-3940256099942544/8673189370

iOS

Prueba los ID de AdMob para iOS:

Elemento

ID de la app/ID del bloque de anuncios

ID de la app de AdMob

ca-app-pub-3940256099942544~2594085930

Banner

ca-app-pub-3940256099942544/4339318960

Intersticial

ca-app-pub-3940256099942544/3964253750

Recompensado

ca-app-pub-3940256099942544/7552160883

Flutter utiliza complementos para brindar acceso a una amplia variedad de servicios específicos de la plataforma. Los complementos incluyen código específico de la plataforma para acceder a servicios y API en cada plataforma.

El complemento firebase_admob permite cargar y mostrar anuncios de banner, anuncios intersticiales y anuncios recompensados mediante la API de AdMob.

Como Flutter es un SDK multiplataforma, el complemento firebase_admob se puede aplicar para iOS y Android. Por lo tanto, si agregas el complemento a tu app de Flutter, las versiones de iOS y Android de la app Awesome Drawing Quiz usan este complemento.

Agrega el complemento de AdMob de Firebase como dependencia

Para acceder a las API de AdMob desde el proyecto Awesome Drawing Quiz, agrega el complemento firebase_admob como una dependencia al archivo pubspec.yaml que se ubica en la raíz del proyecto.

pubspec.yaml

...

dependencies:
  flutter:
    sdk: flutter
  google_fonts: ^0.3.9

  # Add the following line
  firebase_admob: ^0.9.3

...

Haz clic en Packages get para instalar el complemento en el proyecto Awesome Drawing Quiz.

d9fc62bf4054cea9.png

Actualiza AndroidManifest.xml (Android)

  1. Abre el archivo android/app/src/main/AndroidManifest.xml en Android Studio.
  2. Para agregar el ID de la app de AdMob, añade una etiqueta <meta-data> e introduce com.google.android.gms.ads.APPLICATION_ID. Si el ID de la app de AdMob es ca-app-pub-3940256099942544~3347511713, debes agregar las siguientes líneas al archivo AndroidManifest.xml.

android/app/src/main/AndroidManifest.xml

<manifest>
    ...
    <application>
       ...
        <meta-data
            android:name="com.google.android.gms.ads.APPLICATION_ID"
            android:value="ca-app-pub-3940256099942544~3347511713"/>
    </application>

</manifest>

Actualiza Info.plist (iOS)

  1. Abre el archivo ios/Runner/Info.plist en Android Studio.
  2. Agrega una clave GADApplicationIdentifier con el valor de string del ID de la app de AdMob. Por ejemplo, si el ID de la app de AdMob es ca-app-pub-3940256099942544~1458002511, debes agregar las siguientes líneas al archivo Info.plist.

ios/Runner/Info.plist

...
<key>GADApplicationIdentifier</key>
<string>ca-app-pub-3940256099942544~1458002511</string>
...

Crea un archivo nuevo que se llame ad_manager.dart en el directorio lib. Luego, implementa la clase AdManager que brinda el ID de la app de AdMob y los ID de los bloques de anuncios para iOS y Android.

Asegúrate de reemplazar el ID de la app de AdMob (ca-app-pub-xxxxxx~yyyyy) y el ID del bloque de anuncios (ca-app-pub-xxxxxxx/yyyyyyyy) por los ID que creaste en el paso anterior.

lib/ad_manager.dart

import 'dart:io';

class AdManager {

  static String get appId {
    if (Platform.isAndroid) {
      return "<YOUR_ANDROID_ADMOB_APP_ID>";
    } else if (Platform.isIOS) {
      return "<YOUR_IOS_ADMOB_APP_ID>";
    } else {
      throw new UnsupportedError("Unsupported platform");
    }
  }

  static String get bannerAdUnitId {
    if (Platform.isAndroid) {
      return "<YOUR_ANDROID_BANNER_AD_UNIT_ID";
    } else if (Platform.isIOS) {
      return "<YOUR_IOS_BANNER_AD_UNIT_ID>";
    } else {
      throw new UnsupportedError("Unsupported platform");
    }
  }

  static String get interstitialAdUnitId {
    if (Platform.isAndroid) {
      return "<YOUR_ANDROID_INTERSTITIAL_AD_UNIT_ID>";
    } else if (Platform.isIOS) {
      return "<YOUR_IOS_INTERSTITIAL_AD_UNIT_ID>";
    } else {
      throw new UnsupportedError("Unsupported platform");
    }
  }

  static String get rewardedAdUnitId {
    if (Platform.isAndroid) {
      return "<YOUR_ANDROID_REWARDED_AD_UNIT_ID>";
    } else if (Platform.isIOS) {
      return "<YOUR_IOS_REWARDED_AD_UNIT_ID>";
    } else {
      throw new UnsupportedError("Unsupported platform");
    }
  }
}

Usa el siguiente fragmento de código si deseas usar el ID de la app de AdMob y los ID de los bloques de anuncios preconfigurados para este codelab.

lib/ad_manager.dart

import 'dart:io';

class AdManager {

  static String get appId {
    if (Platform.isAndroid) {
      return "ca-app-pub-3940256099942544~4354546703";
    } else if (Platform.isIOS) {
      return "ca-app-pub-3940256099942544~2594085930";
    } else {
      throw new UnsupportedError("Unsupported platform");
    }
  }

  static String get bannerAdUnitId {
    if (Platform.isAndroid) {
      return "ca-app-pub-3940256099942544/8865242552";
    } else if (Platform.isIOS) {
      return "ca-app-pub-3940256099942544/4339318960";
    } else {
      throw new UnsupportedError("Unsupported platform");
    }
  }

  static String get interstitialAdUnitId {
    if (Platform.isAndroid) {
      return "ca-app-pub-3940256099942544/7049598008";
    } else if (Platform.isIOS) {
      return "ca-app-pub-3940256099942544/3964253750";
    } else {
      throw new UnsupportedError("Unsupported platform");
    }
  }

  static String get rewardedAdUnitId {
    if (Platform.isAndroid) {
      return "ca-app-pub-3940256099942544/8673189370";
    } else if (Platform.isIOS) {
      return "ca-app-pub-3940256099942544/7552160883";
    } else {
      throw new UnsupportedError("Unsupported platform");
    }
  }
}

Antes de cargar anuncios, debes inicializar el SDK de AdMob. Abre el archivo lib/home_route.dart y modifica _initAdMob() para inicializar el SDK antes de que comience el juego.

lib/home_route.dart

// TODO: Import ad_manager.dart
import 'package:awesome_drawing_quiz/ad_manager.dart';

import 'package:awesome_drawing_quiz/app_theme.dart';

// TODO: Import firebase_admob.dart
import 'package:firebase_admob/firebase_admob.dart';

import 'package:flutter/material.dart';

...

class _HomeRouteState extends State<HomeRoute> {

  ...

  Future<void> _initAdMob() {
    // TODO: Initialize AdMob SDK
    return FirebaseAdMob.instance.initialize(appId: AdManager.appId);
  }
}

En esta sección, agregarás un anuncio de banner en la parte superior de la pantalla del juego, como se muestra a continuación.

580a296a77065928.png 6d6659121dbf382e.png

Agrega las siguientes líneas para abrir el archivo lib/game_route.dart e importar ad_manager.dart y firebase_admob.dart:

lib/game_route.dart

...

// TODO: Import ad_manager.dart
import 'package:awesome_drawing_quiz/ad_manager.dart';

// TODO: Import firebase_admob.dart
import 'package:firebase_admob/firebase_admob.dart';

class GameRoute extends StatefulWidget {
  ...
}

Luego, en la clase _GameRouteState, agrega los siguientes miembros y métodos para un anuncio de banner.

lib/game_route.dart

class _GameRouteState extends State<GameRoute> implements QuizEventListener {

  ...

  // TODO: Add _bannerAd
  BannerAd _bannerAd;

  ...

  // TODO: Implement _loadBannerAd()
  void _loadBannerAd() {
    _bannerAd
      ..load()
      ..show(anchorType: AnchorType.top);
  }

  ...
}

En el método initState(), crea un objeto BannerAd y carga el anuncio de banner. Ten en cuenta que se muestra un banner de 320 x 50 (AdSize.banner).

lib/game_route.dart

@override
void initState() {
  ...

  // TODO: Initialize _bannerAd
  _bannerAd = BannerAd(
      adUnitId: AdManager.bannerAdUnitId,
      size: AdSize.banner,
  );

  // TODO: Load a Banner Ad
  _loadBannerAd();
}

Por último, libera el recurso asociado con el objeto BannerAd mediante una llamada al método BannerAd.dispose() en el método de devolución de llamada dispose().

lib/game_route.dart

@override
void dispose() {
  // TODO: Dispose BannerAd object
  _bannerAd?.dispose();

  ...

  super.dispose();
}

Eso es todo. Ejecuta el proyecto para ver un anuncio de banner que se muestra en la parte superior de la pantalla del juego.

d82f07411be93d37.png f221e4821191cf99.png

En esta sección, se muestra un anuncio intersticial una vez que finaliza el juego (5 niveles en total).

Primero, agrega los siguientes miembros y métodos para el anuncio intersticial en la clase _GameRouteState.

lib/game_route.dart

class _GameRouteState extends State<GameRoute> implements QuizEventListener {

  ...

  // TODO: Add _interstitialAd
  InterstitialAd _interstitialAd;

  // TODO: Add _isInterstitialAdReady
  bool _isInterstitialAdReady;

  ...

  // TODO: Implement _loadInterstitialAd()
  void _loadInterstitialAd() {
    _interstitialAd.load();
  }

  // TODO: Implement _onInterstitialAdEvent()
  void _onInterstitialAdEvent(MobileAdEvent event) {
    switch (event) {
      case MobileAdEvent.loaded:
        _isInterstitialAdReady = true;
        break;
      case MobileAdEvent.failedToLoad:
        _isInterstitialAdReady = false;
        print('Failed to load an interstitial ad');
        break;
      case MobileAdEvent.closed:
        _moveToHome();
        break;
      default:
      // do nothing
    }
  }

  ...
}

A continuación, inicializa _isInterstitialAdReady y _interstitialAd en el método initState(). Como _onInterstitialAdEvent está configurado como un objeto de escucha de eventos de anuncios para _interstitialAd, cada evento de anuncios desde _interstitialAd se entrega al método _onInterstitialAdEvent.

lib/game_route.dart

@override
void initState() {
  ...

  // TODO: Initialize _isInterstitialAdReady
  _isInterstitialAdReady = false;

  // TODO: Initialize _interstitialAd
  _interstitialAd = InterstitialAd(
    adUnitId: AdManager.interstitialAdUnitId,
    listener: _onInterstitialAdEvent,
  );
}

En este codelab, se muestra un anuncio intersticial después de que el usuario completa 5 niveles. Para minimizar las solicitudes de anuncios innecesarias, comenzamos a cargar un anuncio cuando el usuario alcanza el nivel 3.

En el método onNewLevel(), agrega las siguientes líneas:

lib/game_route.dart

@override
void onNewLevel(int level, Drawing drawing, String clue) {
  ...

  // TODO: Load an Interstitial Ad
  if (level >= 3 && !_isInterstitialAdReady) {
    _loadInterstitialAd();
  }
}

Cuando el juego finaliza, se muestra el cuadro de diálogo con la puntuación. Cuando el usuario cierra el diálogo, es dirigido a la pantalla principal de Awesome Drawing Quiz.

Como los anuncios intersticiales se deben mostrar entre las transiciones de pantalla, el anuncio intersticial se muestra cuando el usuario hace clic en el botón Cerrar.

Modifica el método onGameOver() de la siguiente manera:

lib/game_route.dart

@override
void onGameOver(int correctAnswers) {
  showDialog(
    context: _scaffoldKey.currentContext,
    builder: (context) {
      return AlertDialog(
        title: Text('Game over!'),
        content: Text('Score: $correctAnswers/5'),
        actions: <Widget>[
          FlatButton(
            child: Text('close'.toUpperCase()),
            onPressed: () {

              // TODO: Display an Interstitial Ad
              if (_isInterstitialAdReady) {
                _interstitialAd.show();
              }

              _moveToHome();
            },
          ),
        ],
      );
    },
  );
}

Por último, libera el recurso asociado con el objeto InterstitialAd mediante una llamada al método InterstitialAd.dispose() en el método de devolución de llamada dispose().

lib/game_route.dart

@override
void dispose() {
  ...

  // TODO: Dispose InterstitialAd object
  _interstitialAd?.dispose();

  ...

  super.dispose();
}

Eso es todo. Ejecuta el proyecto para ver un anuncio intersticial que se muestra una vez que termine el juego.

53f44b98e8a0c446.gif

En esta sección, agregarás un anuncio recompensado que le brinde al usuario una sugerencia adicional como recompensa.

Primero, agrega los miembros y métodos del anuncio recompensado en la clase _GameRouteState. Ten en cuenta que RewardedVideoAd es un objeto singleton, por lo que no necesitas tener un miembro para administrar la instancia de la clase RewardedVideoAd.

RewardedVideoAdEvent.rewarded es el evento de anuncios más importante en un anuncio recompensado. Se activa cuando el usuario es apto para recibir una recompensa (por ejemplo, cuando terminas de mirar un video). En este codelab, RewardedVideoAdEvent.rewarded llama al método QuizManager.instance.useHint() que revela un carácter más en la string de sugerencia.

Además, según el evento de anuncio, RewardedVideoAdEvent.rewarded cambia el valor de _isRewardedAdReady para actualizar la IU. Tenga en cuenta que _isRewardedAdReady vuelve a cargar el anuncio cuando el usuario lo cierra para asegurarse de que esté listo lo antes posible.

lib/game_route.dart

class _GameRouteState extends State<GameRoute> implements QuizEventListener {

  ...

  // TODO: Add _isRewardedAdReady
  bool _isRewardedAdReady;

  ...

  // TODO: Implement _loadRewardedAd()
  void _loadRewardedAd() {
    RewardedVideoAd.instance.load(
      targetingInfo: MobileAdTargetingInfo(),
      adUnitId: AdManager.rewardedAdUnitId,
    );
  }

  // TODO: Implement _onRewardedAdEvent()
  void _onRewardedAdEvent(RewardedVideoAdEvent event,
      {String rewardType, int rewardAmount}) {
    switch (event) {
      case RewardedVideoAdEvent.loaded:
        setState(() {
          _isRewardedAdReady = true;
        });
        break;
      case RewardedVideoAdEvent.closed:
        setState(() {
          _isRewardedAdReady = false;
        });
        _loadRewardedAd();
        break;
      case RewardedVideoAdEvent.failedToLoad:
        setState(() {
          _isRewardedAdReady = false;
        });
        print('Failed to load a rewarded ad');
        break;
      case RewardedVideoAdEvent.rewarded:
        QuizManager.instance.useHint();
        break;
      default:
      // do nothing
    }
  }

  ...
}

Luego, inicializa _isRewardedAdReady y configura _onRewardedAdEvent como un objeto de escucha de eventos de anuncios. Después, llama a _loadRewardedAd() para solicitar un anuncio recompensado.

lib/game_route.dart

@override
void initState() {
  ...

  // TODO: Initialize _isRewardedAdReady
  _isRewardedAdReady = false;

  // TODO: Set Rewarded Ad event listener
  RewardedVideoAd.instance.listener = _onRewardedAdEvent;

  // TODO: Load a Rewarded Ad
  _loadRewardedAd();
}

Luego, permite que los usuarios miren un anuncio recompensado con un clic en el botón de acción flotante. El botón se muestra solo si el usuario no utilizó una sugerencia en el nivel actual y se carga un anuncio recompensado.

Modifica el método _buildFloatingActionButton() de la siguiente manera, para que se muestre el botón de acción flotante. Ten en cuenta que mostrar null oculta el botón de la pantalla.

lib/game_route.dart

Widget _buildFloatingActionButton() {
  // TODO: Return a FloatingActionButton if a Rewarded Ad is available
  return (!QuizManager.instance.isHintUsed && _isRewardedAdReady)
      ? FloatingActionButton.extended(
          onPressed: () {
            showDialog(
              context: context,
              builder: (context) {
                return AlertDialog(
                  title: Text('Need a hint?'),
                  content: Text('Watch an Ad to get a hint!'),
                  actions: <Widget>[
                    FlatButton(
                      child: Text('cancel'.toUpperCase()),
                      onPressed: () {
                        Navigator.pop(context);
                      },
                    ),
                    FlatButton(
                      child: Text('ok'.toUpperCase()),
                      onPressed: () {
                        Navigator.pop(context);
                        RewardedVideoAd.instance.show();
                      },
                    ),
                  ],
                );
              },
            );
          },
          label: Text('Hint'),
          icon: Icon(Icons.card_giftcard),
        )
      : null;
}

Por último, quita el objeto de escucha de eventos de anuncios recompensados en el método de devolución de llamada dispose().

lib/game_route.dart

@override
void dispose() {
  ...

  // TODO: Remove Rewarded Ad event listener
  RewardedVideoAd.instance.listener = null;

  ...

  super.dispose();
}

Eso es todo. Ejecuta el proyecto y mira un anuncio recompensado para obtener una sugerencia adicional.

2a79a3db6b44dae9.gif

9db81af632cb2b15.png¡Encontraste algo especial!

Completaste el codelab. Puedes encontrar el código completo para este codelab en la carpeta android_studio_folder.pngcomplete.

Para obtener más información, prueba los otros codelabs de Flutter.