Añade anuncios a tu juego o aplicación móvil de Flutter

Muchos desarrolladores utilizan la publicidad para monetizar sus aplicaciones y juegos móviles. Esto permite que su aplicación se descargue de forma gratuita, lo que mejora la popularidad de la aplicación.

Para añadir anuncios a tu proyecto de Flutter, utiliza AdMob, la plataforma de publicidad móvil de Google. Esta receta demuestra cómo usar el google_mobile_ads paquete para añadir un anuncio de banner a tu aplicación o juego.

1. Ve a AdMob y crea una cuenta. Esto podría llevar algún tiempo porque necesitas proporcionar información bancaria, firmar contratos, etc.

2. Con la cuenta de AdMob lista, crea dos Apps en AdMob: una para Android y otra para iOS.

3. Abre la sección Configuración de la aplicación.

4. Obtén los IDs de aplicación de AdMob tanto para la aplicación Android como para la aplicación iOS. Se parecen a ca-app-pub-1234567890123456~1234567890. Ten en cuenta la tilde (~) entre los dos números.

   

Actualiza tus configuraciones de Android e iOS para incluir tus IDs de aplicación.

Añade tu ID de aplicación de AdMob a tu aplicación Android.

1. Abre el archivo android/app/src/main/AndroidManifest.xml de la aplicación.

2. Añade una nueva etiqueta <meta-data>.

3. Establece el elemento android:name con un valor de com.google.android.gms.ads.APPLICATION_ID.

4. Establece el elemento android:value con el valor de tu propio ID de aplicación de AdMob que obtuviste en el paso anterior. Inclúyelo entre comillas como se muestra:

   xml

   <manifest>
       <application>
           ...
   ​
           <!-- Sample AdMob app ID: ca-app-pub-3940256099942544~3347511713 -->
           <meta-data
               android:name="com.google.android.gms.ads.APPLICATION_ID"
               android:value="ca-app-pub-xxxxxxxxxxxxxxxx~yyyyyyyyyy"/>
       </application>
   </manifest>
   

   content_copy

Añade tu ID de aplicación de AdMob a tu aplicación iOS.

1. Abre el archivo ios/Runner/Info.plist de tu aplicación.

2. Encierra GADApplicationIdentifier con una etiqueta key.

3. Encierra tu ID de aplicación de AdMob con una etiqueta string. Creaste este ID de aplicación de AdMob en el paso 1.

   xml

   <key>GADApplicationIdentifier</key>
   <string>ca-app-pub-################~##########</string>
   

   content_copy

Para añadir el plugin google_mobile_ads como una dependencia, ejecuta flutter pub add:

$ flutter pub add google_mobile_ads

Debes inicializar el SDK de Mobile Ads antes de cargar anuncios.

1. Llama a MobileAds.instance.initialize() para inicializar el SDK de Mobile Ads.

   dart

   void main() async {
     WidgetsFlutterBinding.ensureInitialized();
     unawaited(MobileAds.instance.initialize());
   ​
     runApp(const MyApp());
   }
   

   content_copy

Ejecuta el paso de inicialización al inicio, como se muestra arriba, para que el SDK de AdMob tenga suficiente tiempo para inicializarse antes de que sea necesario.

Para mostrar un anuncio, debes solicitarlo a AdMob.

Para cargar un anuncio de banner, construye una instancia de BannerAd y llama a load() en ella.

/// Loads a banner ad.
void _loadAd() {
  final bannerAd = BannerAd(
    size: widget.adSize,
    adUnitId: widget.adUnitId,
    request: const AdRequest(),
    listener: BannerAdListener(
      // Called when an ad is successfully received.
      onAdLoaded: (ad) {
        if (!mounted) {
          ad.dispose();
          return;
        }
        setState(() {
          _bannerAd = ad as BannerAd;
        });
      },
      // Called when an ad request failed.
      onAdFailedToLoad: (ad, error) {
        debugPrint('BannerAd failed to load: $error');
        ad.dispose();
      },
    ),
  );
​
  // Start loading.
  bannerAd.load();
}

Para ver un ejemplo completo, echa un vistazo al último paso de esta receta.

Una vez que tengas una instancia cargada de BannerAd, utiliza AdWidget para mostrarla.

AdWidget(ad: _bannerAd)

Es una buena idea envolver el Widget en un SafeArea (para que ninguna parte del anuncio se vea obstruida por los recortes de pantalla del dispositivo) y en un SizedBox (para que tenga su tamaño constante especificado antes y después de la carga).

@override
Widget build(BuildContext context) {
  return SafeArea(
    child: SizedBox(
      width: widget.adSize.width.toDouble(),
      height: widget.adSize.height.toDouble(),
      child: _bannerAd == null
          // Nothing to render yet.
          ? const SizedBox()
          // The actual ad.
          : AdWidget(ad: _bannerAd!),
    ),
  );
}

Debes destruir (dispose) un anuncio cuando ya no necesites acceder a él. La mejor práctica para llamar a dispose() es después de que el AdWidget sea eliminado del árbol de Widgets o en la devolución de llamada BannerAdListener.onAdFailedToLoad().

_bannerAd?.dispose();

Para mostrar algo más que anuncios de prueba, debes registrar bloques de anuncios.

1. Abre AdMob.

2. Crea un bloque de anuncios (Ad unit) para cada una de las aplicaciones de AdMob.

   

   Esto solicita el formato del bloque de anuncios. AdMob proporciona muchos formatos además de los anuncios de banner: intersticiales, anuncios bonificados, anuncios de apertura de aplicación, etc. La API para ellos es similar y está documentada en la documentación de AdMob y a través de ejemplos oficiales.

3. Elige anuncios de banner.

4. Obtén los IDs de bloques de anuncios tanto para la aplicación Android como para la aplicación iOS. Puedes encontrarlos en la sección Bloques de anuncios. Se ven como algo como ca-app-pub-1234567890123456/1234567890. El formato se asemeja al del ID de aplicación pero con una barra diagonal (/) entre los dos números. Esto distingue un ID de bloque de anuncios de un ID de aplicación.

   

5. Añade estos IDs de bloques de anuncios al constructor de BannerAd, dependiendo de la plataforma de la aplicación de destino.

   dart

   final String adUnitId = Platform.isAndroid
       // Use this ad unit on Android...
       ? 'ca-app-pub-3940256099942544/6300978111'
       // ... or this one on iOS.
       : 'ca-app-pub-3940256099942544/2934735716';
   

   content_copy

Para mostrar los anuncios en una aplicación o juego publicado (a diferencia de los escenarios de depuración o prueba), tu aplicación debe cumplir con requisitos adicionales:

1. Tu aplicación debe ser revisada y aprobada antes de que pueda servir anuncios por completo. Sigue las directrices de preparación de aplicaciones de AdMob. Por ejemplo, tu aplicación debe estar listada en al menos una de las tiendas admitidas, como Google Play Store o Apple App Store.

2. Debes crear un archivo app-ads.txt y publicarlo en tu sitio web de desarrollador.

Para obtener más información sobre la monetización de aplicaciones y juegos, visita los sitios oficiales de AdMob y Ad Manager.

El siguiente código implementa un simple Widget stateful que carga un anuncio de banner y lo muestra.

import 'dart:io';
​
import 'package:flutter/widgets.dart';
import 'package:google_mobile_ads/google_mobile_ads.dart';
​
class MyBannerAdWidget extends StatefulWidget {
  /// The requested size of the banner. Defaults to [AdSize.banner].
  final AdSize adSize;
​
  /// The AdMob ad unit to show.
  ///
  /// TODO: replace this test ad unit with your own ad unit
  final String adUnitId = Platform.isAndroid
      // Use this ad unit on Android...
      ? 'ca-app-pub-3940256099942544/6300978111'
      // ... or this one on iOS.
      : 'ca-app-pub-3940256099942544/2934735716';
​
  MyBannerAdWidget({super.key, this.adSize = AdSize.banner});
​
  @override
  State<MyBannerAdWidget> createState() => _MyBannerAdWidgetState();
}
​
class _MyBannerAdWidgetState extends State<MyBannerAdWidget> {
  /// The banner ad to show. This is `null` until the ad is actually loaded.
  BannerAd? _bannerAd;
​
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: SizedBox(
        width: widget.adSize.width.toDouble(),
        height: widget.adSize.height.toDouble(),
        child: _bannerAd == null
            // Nothing to render yet.
            ? const SizedBox()
            // The actual ad.
            : AdWidget(ad: _bannerAd!),
      ),
    );
  }
​
  @override
  void initState() {
    super.initState();
    _loadAd();
  }
​
  @override
  void dispose() {
    _bannerAd?.dispose();
    super.dispose();
  }
​
  /// Loads a banner ad.
  void _loadAd() {
    final bannerAd = BannerAd(
      size: widget.adSize,
      adUnitId: widget.adUnitId,
      request: const AdRequest(),
      listener: BannerAdListener(
        // Called when an ad is successfully received.
        onAdLoaded: (ad) {
          if (!mounted) {
            ad.dispose();
            return;
          }
          setState(() {
            _bannerAd = ad as BannerAd;
          });
        },
        // Called when an ad request failed.
        onAdFailedToLoad: (ad, error) {
          debugPrint('BannerAd failed to load: $error');
          ad.dispose();
        },
      ),
    );
​
    // Start loading.
    bannerAd.load();
  }
}