1. Introducción
Qué compilarás
En este codelab, te guiaremos para agregar anuncios banner, intersticiales y recompensados a una app llamada Awesome Drawing Quiz, un juego en el que los participantes deben adivinar el nombre de un dibujo.
|
|
Si experimentas algún problema (como errores de código o gramaticales, o el uso de lenguaje poco claro) mientras trabajas en este codelab, notifícalo a través del vínculo Informar un error, disponible en la esquina inferior izquierda del codelab.
Qué aprenderás
- Cómo configurar el complemento de Google Mobile Ads para AdMob
- Cómo implementar anuncios banner, intersticiales y recompensados en una app creada con Flutter
Otros requisitos
- Android Studio 4.1 o una versión posterior
- Xcode 12 o una versión posterior (para el desarrollo de iOS)
¿Cómo calificarías tu nivel de experiencia con AdMob?
¿Cómo calificarías tu nivel de experiencia con Flutter?
2. Configura tu entorno de desarrollo de Flutter
Para completar este lab, necesitas dos software: el SDK de Flutter y un editor.
Puedes ejecutar el codelab con cualquiera de estos dispositivos o modalidades:
- Un dispositivo físico Android o iOS conectado a tu computadora y configurado en el Modo de desarrollador
- El simulador de iOS (requiere instalar las herramientas de Xcode)
- Android Emulator (requiere configuración en Android Studio)
- Un navegador (se requiere Chrome para la depuración)
- Como una app para computadoras con Windows, Linux o macOS (Debes desarrollar la app en la plataforma donde tengas pensado implementarla. Por ejemplo, si deseas desarrollar una app de escritorio para Windows, debes hacerlo en ese sistema operativo para obtener acceso a la cadena de compilación adecuada. Encuentra detalles sobre los requisitos específicos de cada sistema operativo en docs.flutter.dev/desktop)
Descarga el código
Tras descargar el archivo ZIP, extrae su contenido. Se creará una carpeta llamada admob-ads-in-flutter-master.
Como alternativa, puedes clonar el repositorio de GitHub con la siguiente línea de comandos:
$ git clone https://github.com/googlecodelabs/admob-ads-in-flutter
El repositorio incluye dos carpetas:
starter: Código inicial que compilarás en este codelab- complete: Código completo para este codelab
3. Configura la app y las unidades de anuncios de AdMob
Como Flutter es un SDK multiplataforma, debes agregar una app y unidades de anuncios para Android y para iOS en AdMob.
Configuración para Android
Para la configuración para Android, debes agregar una app para Android y crear unidades de anuncios.
Agrega una app para Android
- En la consola de AdMob, haz clic en AGREGAR APLICACIÓN, en el menú Aplicaciones.
- Cuando se te pregunte si publicaste tu app en Google Play o el App Store, haz clic en NO.
- Ingresa
Awesome Drawing Quizen el campo del nombre de la app y selecciona Android como la plataforma.
- No es necesario habilitar las métricas del usuario para completar este codelab. Sin embargo, recomendamos hacerlo porque permite comprender el comportamiento de los usuarios en más detalle. Haz clic en AGREGAR (ADD) para completar el proceso.
Crea unidades de anuncios
Para comenzar a agregar unidades de anuncios a AdMob, sigue estos pasos:
- Selecciona Awesome Drawing Quiz en el menú Aplicaciones de la consola de AdMob.
- Haz clic en el menú Unidades de anuncios.
Banner
|
|
Anuncio intersticial
|
|
Anuncio recompensado
|
|
Las unidades de anuncios nuevas suelen demorar algunas horas en comenzar a publicar anuncios.
Si deseas evaluar el comportamiento de los anuncios de inmediato, utiliza el ID de app y los IDs de unidades de anuncios de prueba que se mencionan en las tablas correspondientes para Android y para iOS.
Configuración para iOS
Para la configuración para iOS, debes agregar una app para iOS y crear unidades de anuncios.
Agrega una app para iOS
- En la consola de AdMob, haz clic en AGREGAR APLICACIÓN, en el menú Aplicaciones.
- Cuando se te pregunte si publicaste tu app en Google Play o el App Store, haz clic en NO.
- Ingresa
Awesome Drawing Quizen el campo del nombre de la app y selecciona iOS como la plataforma.
- No es necesario habilitar las métricas del usuario para completar este codelab. Sin embargo, recomendamos hacerlo porque permite comprender el comportamiento de los usuarios en más detalle. Haz clic en AGREGAR (ADD) para completar el proceso.
Crea unidades de anuncios
Para agregar unidades de anuncios, sigue estos pasos:
- Selecciona la app de Awesome Drawing Quiz en el menú Aplicaciones de la consola de AdMob.
- Haz clic en el menú Unidades de anuncios.
Banner
|
|
Anuncio intersticial
|
|
Anuncio recompensado
|
|
Las unidades de anuncios nuevas suelen demorar algunas horas en comenzar a publicar anuncios.
Si deseas evaluar el comportamiento de los anuncios de inmediato, utiliza el ID de app y los IDs de unidades de anuncios de prueba que se mencionan en la siguiente tabla.
Opcional: Utiliza la app y las unidades de anuncios de AdMob de prueba
Si deseas seguir el codelab en lugar de crear una app y unidades de anuncios nuevas por tu cuenta, utiliza el ID de app y los IDs de unidades de anuncios de AdMob de prueba que se mencionan en las siguientes tablas.
ID de app/IDs de unidades de anuncios para Android
Elemento | ID de app/IDs de unidades de anuncios |
ID de la app de AdMob |
|
Banner |
|
Anuncio intersticial |
|
Anuncio recompensado |
|
ID de app/IDs de unidades de anuncios para iOS
Elemento | ID de app/IDs de unidades de anuncios |
ID de la app de AdMob |
|
Banner |
|
Anuncio intersticial |
|
Anuncio recompensado |
|
Consulta la documentación para desarrolladores Anuncios de prueba para Android y Anuncios de prueba para iOS para obtener más información al respecto.
4. Agrega el complemento de Google Mobile Ads para Flutter
Flutter utiliza complementos para proporcionar acceso a una amplia variedad de servicios específicos según la plataforma. Los complementos te permiten acceder a los servicios y las APIs de cada plataforma.
El complemento google_mobile_ads admite la carga y visualización de anuncios banner, intersticiales, recompensados y nativos a través de la API de AdMob.
Como Flutter es un SDK multiplataforma, el complemento google_mobile_ads se puede aplicar a Android y a iOS. Por lo tanto, si agregas el complemento a tu app creada con Flutter, se utilizará en las versiones para Android y para iOS de la app de anuncios intercalados de AdMob.
Agrega el complemento de Google Mobile Ads como dependencia
Para acceder a las APIs de AdMob desde el proyecto de anuncios intercalados de AdMob, agrega google_mobile_ads como dependencia del archivo pubspec.yaml ubicado en la raíz del proyecto.
pubspec.yaml
...
environment:
# TODO: Update the minimum sdk version to 2.12.0 to support null safety.
sdk: ">=2.17.0 <3.0.0"
dependencies:
flutter:
sdk: flutter
google_fonts: ^3.0.1
# TODO: Add google_mobile_ads as a dependency
google_mobile_ads: ^1.2.0
...
Haz clic en Pub get para instalar el complemento en el proyecto de Awesome Drawing Quiz.
Actualiza el archivo AndroidManifest.xml (Android)
- Abre el archivo
android/app/src/main/AndroidManifest.xmlen Android Studio. - Agrega el ID de la app de AdMob. Para ello incluye una etiqueta
<meta-data>con el nombrecom.google.android.gms.ads.APPLICATION_ID. Por ejemplo, si el ID de tu app de AdMob esca-app-pub-3940256099942544~3347511713, debes agregar las siguientes líneas al archivoAndroidManifest.xml.
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 el archivo Info.plist (iOS)
- Abre el archivo
ios/Runner/Info.plisten Android Studio. - Agrega una clave
GADApplicationIdentifiercon el valor de cadena del ID de tu app de AdMob. Por ejemplo, si el ID de tu app de AdMob esca-app-pub-3940256099942544~1458002511, debes agregar las siguientes líneas al archivoInfo.plist.
ios/Runner/Info.plist
...
<key>GADApplicationIdentifier</key>
<string>ca-app-pub-3940256099942544~1458002511</string>
...
5. Agrega una clase auxiliar para los anuncios
Crea un nuevo archivo llamado ad_helper.dart en el directorio lib. Luego implementa la clase AdHelper, que proporciona el ID de app y los IDs de unidades de anuncios de AdMob para Android y para iOS.
Asegúrate de reemplazar el ID de app (ca-app-pub-xxxxxx~yyyyy) y el ID de unidad de anuncios (ca-app-pub-xxxxxxx/yyyyyyyy) de AdMob por los IDs que creaste en el paso anterior.
lib/ad_helper.dart
import 'dart:io';
class AdHelper {
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 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 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 UnsupportedError('Unsupported platform');
}
}
}
Utiliza el siguiente fragmento de código si deseas usar el ID de app y los IDs de unidades de anuncios de AdMob de prueba.
lib/ad_helper.dart
import 'dart:io';
class AdHelper {
static String get bannerAdUnitId {
if (Platform.isAndroid) {
return 'ca-app-pub-3940256099942544/6300978111';
} else if (Platform.isIOS) {
return 'ca-app-pub-3940256099942544/2934735716';
} else {
throw new UnsupportedError('Unsupported platform');
}
}
static String get interstitialAdUnitId {
if (Platform.isAndroid) {
return "ca-app-pub-3940256099942544/1033173712";
} else if (Platform.isIOS) {
return "ca-app-pub-3940256099942544/4411468910";
} else {
throw new UnsupportedError("Unsupported platform");
}
}
static String get rewardedAdUnitId {
if (Platform.isAndroid) {
return "ca-app-pub-3940256099942544/5224354917";
} else if (Platform.isIOS) {
return "ca-app-pub-3940256099942544/1712485313";
} else {
throw new UnsupportedError("Unsupported platform");
}
}
}
6. Inicializa el SDK de anuncios de Google para dispositivos móviles
Antes de cargar los anuncios, debes inicializar el SDK de anuncios de Google para dispositivos móviles. Abre el archivo lib/home_route.dart y modifica _initGoogleMobileAds() para inicializar el SDK antes de que se cargue la página principal.
Ten presente que debes cambiar el tipo de datos que se muestra en el método _initGoogleMobileAds() de Future<dynamic> a Future<InitializationStatus> para obtener el resultado de la inicialización del SDK después de que se complete.
home_route.dart
// TODO: Import google_mobile_ads.dart
import 'package:google_mobile_ads/google_mobile_ads.dart';
import 'package:flutter/material.dart';
...
class HomeRoute extends StatelessWidget {
...
Future<InitializationStatus> _initGoogleMobileAds() {
// TODO: Initialize Google Mobile Ads SDK
return MobileAds.instance.initialize();
}
}
7. Agrega un anuncio banner
En esta sección, aprenderás a mostrar un anuncio banner en la parte superior de la pantalla del juego, tal como se ilustra en la siguiente captura de pantalla.
- Abre el archivo
lib/game_route.darty, luego, importaad_manager.dart. - Importa
ad_helper.dartygoogle_mobile_ads.dartagregando las siguientes líneas:
lib/game_route.dart
...
// TODO: Import ad_helper.dart
import 'package:awesome_drawing_quiz/ad_helper.dart';
// TODO: Import google_mobile_ads.dart
import 'package:google_mobile_ads/google_mobile_ads.dart';
class GameRoute extends StatefulWidget {
...
}
- En la clase
_GameRouteState, agrega los siguientes miembros de un anuncio banner.
lib/game_route.dart
class _GameRouteState extends State<GameRoute> implements QuizEventListener {
...
// TODO: Add _bannerAd
BannerAd? _bannerAd;
...
}
- En el método
initState(), crea y carga un anuncio banner (BannerAd) para el tamaño de 320 × 50 (AdSize.banner). Ten presente que se configurará un objeto de escucha de eventos de anuncios para actualizar la IU (setState()) cuando se cargue un anuncio.
lib/game_route.dart
@override
void initState() {
...
// TODO: Load a banner ad
BannerAd(
adUnitId: AdHelper.bannerAdUnitId,
request: AdRequest(),
size: AdSize.banner,
listener: BannerAdListener(
onAdLoaded: (ad) {
setState(() {
_bannerAd = ad as BannerAd;
});
},
onAdFailedToLoad: (ad, err) {
print('Failed to load a banner ad: ${err.message}');
ad.dispose();
},
),
).load();
}
- Modifica el método
build()para mostrar un anuncio banner cuando haya uno disponible.
lib/game_route.dart
@override
Widget build(BuildContext context) {
return Scaffold(
...
body: SafeArea(
child: Stack(
children: [
Center(
...
),
// TODO: Display a banner when ready
if (_bannerAd != null)
Align(
alignment: Alignment.topCenter,
child: Container(
width: _bannerAd!.size.width.toDouble(),
height: _bannerAd!.size.height.toDouble(),
child: AdWidget(ad: _bannerAd!),
),
),
],
),
),
...
);
}
- Libera el recurso asociado con el objeto
BannerAd. Para ello, llama al métodoBannerAd.dispose()en el método de devolución de llamadadispose().
lib/game_route.dart
@override
void dispose() {
// TODO: Dispose a BannerAd object
_bannerAd?.dispose();
...
super.dispose();
}
Eso es todo. Ejecuta el proyecto y comienza un nuevo juego. Después de que se cargue un anuncio, verás un banner en la parte superior de la pantalla.
8. Agrega un anuncio intersticial
En esta sección, aprenderás a mostrar un anuncio intersticial una vez finalizado el juego (5 niveles en total).
- Abre el archivo
lib/game_route.dart. - En la clase
_GameRouteState, agrega los siguientes miembros y métodos de un anuncio intersticial.
Ten presente que se configurará un objeto de escucha de eventos de anuncios para comprobar si el anuncio está listo (onAdLoaded() y onAdFailedToLoad()) y mostrar la pantalla principal de la app cuando se cierre dicho anuncio (onAdDismissedFullScreenContent()).
lib/game_route.dart
class _GameRouteState extends State<GameRoute> implements QuizEventListener {
...
// TODO: Add _interstitialAd
InterstitialAd? _interstitialAd;
// TODO: Implement _loadInterstitialAd()
void _loadInterstitialAd() {
InterstitialAd.load(
adUnitId: AdHelper.interstitialAdUnitId,
request: AdRequest(),
adLoadCallback: InterstitialAdLoadCallback(
onAdLoaded: (ad) {
ad.fullScreenContentCallback = FullScreenContentCallback(
onAdDismissedFullScreenContent: (ad) {
_moveToHome();
},
);
setState(() {
_interstitialAd = ad;
});
},
onAdFailedToLoad: (err) {
print('Failed to load an interstitial ad: ${err.message}');
},
),
);
}
...
}
- En este codelab, se muestra un anuncio intersticial después de que un usuario completa los 5 niveles. Para minimizar las solicitudes de anuncios innecesarias, debes solicitar uno cuando el usuario llegue al 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 && _interstitialAd == null) {
_loadInterstitialAd();
}
}
- Cuando finaliza el juego, se muestra un diálogo con la puntuación. Cuando el usuario cierra ese diálogo, se lo redirige a la pantalla principal de Awesome Drawing Quiz.
Como los anuncios intersticiales deben mostrarse en la transición de una pantalla a otra, publicaremos uno cuando el usuario haga clic en el botón CERRAR.
Modifica el método onGameOver() como se indica a continuación.
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: [
FlatButton(
child: Text('close'.toUpperCase()),
onPressed: () {
// TODO: Display an Interstitial Ad
if (_interstitialAd != null) {
_interstitialAd?.show();
} else {
_moveToHome();
}
},
),
],
);
},
);
}
- Libera el recurso asociado con el objeto
InterstitialAd. Para ello, llama al métodoInterstitialAd.dispose()en el método de devolución de llamadadispose().
lib/game_route.dart
@override
void dispose() {
...
// TODO: Dispose an InterstitialAd object
_interstitialAd?.dispose();
...
super.dispose();
}
Eso es todo. Ejecuta el proyecto y completa el juego. Si se carga a un anuncio intersticial, lo verás cuando hagas clic en el botón CERRAR (CLOSE) del diálogo de puntuación.
9. Agrega un anuncio recompensado
En esta sección, aprenderás a agregar un anuncio recompensado, que da al usuario una pista adicional como recompensa.
- Abre el archivo
lib/game_route.dart. - En la clase
_GameRouteState, agrega los miembros de un anuncio recompensado y, luego, implementa el método_loadRewardedAd(). Ten presente que se cargará otro anuncio recompensado si se cierra el primero (onAdDismissedFullScreenContent) para almacenarlo en caché lo antes posible.
lib/game_route.dart
class _GameRouteState extends State<GameRoute> implements QuizEventListener {
...
// TODO: Add _rewardedAd
RewardedAd? _rewardedAd;
// TODO: Implement _loadRewardedAd()
void _loadRewardedAd() {
RewardedAd.load(
adUnitId: AdHelper.rewardedAdUnitId,
request: AdRequest(),
rewardedAdLoadCallback: RewardedAdLoadCallback(
onAdLoaded: (ad) {
ad.fullScreenContentCallback = FullScreenContentCallback(
onAdDismissedFullScreenContent: (ad) {
setState(() {
ad.dispose();
_rewardedAd = null;
});
_loadRewardedAd();
},
);
setState(() {
_rewardedAd = ad;
});
},
onAdFailedToLoad: (err) {
print('Failed to load a rewarded ad: ${err.message}');
},
),
);
}
...
}
- Llama a
_loadRewardedAd()del métodoinitState()para solicitar un anuncio recompensado cuando se inicie el juego.
lib/game_route.dart
class _GameRouteState extends State<GameRoute> implements QuizEventListener {
...
@override
void initState() {
...
// COMPLETE: Load a Rewarded Ad
_loadRewardedAd();
}
...
}
- Permite a los usuarios mirar un anuncio recompensado tras hacer clic en el botón de acción flotante. El botón solo se muestra cuando se carga un anuncio recompensado si el usuario aún no utilizó la pista en el nivel actual.
Modifica el método _buildFloatingActionButton() como se indica a continuación para mostrar el botón de acción flotante. Ten presente que, si se muestra el valor null, se ocultará el botón de la pantalla.
Ten en cuenta que onUserEarnedReward es el evento más importante en un anuncio recompensado. Se activa cuando un usuario cumple con los requisitos para recibir una recompensa (por ejemplo, cuando termina de ver un video).
En este codelab, el método QuizManager.instance.useHint() se llama desde la devolución de llamada, lo que revela un carácter más en la cadena de pistas. La app vuelve a cargar un anuncio recompensado en la devolución de llamada onAdClosed para garantizar que el anuncio esté listo lo antes posible.
lib/game_route.dart
Widget? _buildFloatingActionButton() {
// TODO: Return a FloatingActionButton if a rewarded ad is available
return (!QuizManager.instance.isHintUsed && _rewardedAd != null)
? 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: [
TextButton(
child: Text('cancel'.toUpperCase()),
onPressed: () {
Navigator.pop(context);
},
),
TextButton(
child: Text('ok'.toUpperCase()),
onPressed: () {
Navigator.pop(context);
_rewardedAd?.show(
onUserEarnedReward: (_, reward) {
QuizManager.instance.useHint();
},
);
},
),
],
);
},
);
},
label: Text('Hint'),
icon: Icon(Icons.card_giftcard),
)
: null;
}
- Libera el recurso asociado con el objeto
RewardedAd. Para ello, llama al métodoRewardedAd.dispose()en el método de devolución de llamadadispose().
lib/game_route.dart
@override
void dispose() {
...
// TODO: Dispose a RewardedAd object
_rewardedAd?.dispose();
...
super.dispose();
}
Eso es todo. Ejecuta el proyecto y ponte a jugar. Cuando se haya cargado un anuncio recompensado, verás un botón de pista en la parte inferior de la pantalla. Haz clic en el botón Pista (Hint) para obtener una pista adicional.
10. ¡Listo!
Completaste el codelab. Puedes encontrar el código completo de este codelab en la carpeta complete.
Consulta el codelab Cómo agregar anuncios banner o intercalados nativos de AdMob a una app creada con Flutter para aprender a implementar dichos formatos.
Para obtener más información, prueba los otros codelabs de Flutter.