Banner

Selecciona la plataforma: Android iOS Unity Flutter

Los anuncios de banner ocupan un lugar 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 determinado.

En esta guía, se explica cómo comenzar a usar los anuncios de banner adaptable fijos. Los banners adaptables fijos optimizan el tamaño del anuncio para cada dispositivo con un ancho de anuncio que especificas.

Los anuncios de banner adaptable fijos tienen una relación de aspecto fija en lugar de un tamaño fijo. La relación de aspecto es similar a 320 x 50. Una vez que especifiques el ancho completo disponible, el SDK de anuncios de Google para dispositivos móviles devolverá un anuncio con la altura óptima para ese ancho. La altura óptima del anuncio permanece constante en las diferentes solicitudes de anuncios, y el contenido que rodea al anuncio permanece en su lugar cuando se actualiza.

Realiza siempre pruebas con anuncios de prueba

Cuando compiles y pruebes tus apps, asegúrate de usar anuncios de prueba en vez de anuncios activos en fase de producción. De lo contrario, podría suspenderse tu cuenta.

La forma más sencilla de cargar anuncios de prueba es utilizar nuestro ID de unidad de anuncios de prueba dedicado para banners:

Android

ca-app-pub-3940256099942544/9214589741

iOS

ca-app-pub-3940256099942544/2435281174

Las unidades de anuncios de prueba están configuradas para devolver anuncios de prueba en cada solicitud, y puedes usarlas libremente en tus propias apps mientras codificas, pruebas y depuras. Solo asegúrate de reemplazarlos por tus propios IDs de unidades de anuncios antes de publicar tu app.

Obtén el tamaño del anuncio

Para solicitar un anuncio de banner con el tamaño correcto, sigue estos pasos:

  1. Obtén el ancho de la pantalla del dispositivo en píxeles independientes de la densidad (dp) con MediaQuery.of(context). Si no quieres usar el ancho completo de la pantalla, puedes establecer tu propio ancho.

  2. Usa el método estático adecuado en la clase AdSize para obtener un objeto AdSize. Por ejemplo, usa AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(int width) para obtener el tamaño del anuncio para la orientación actual.

// Get an AnchoredAdaptiveBannerAdSize before loading the ad.
final size = await AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(
    MediaQuery.sizeOf(context).width.truncate());

Carga un anuncio

En el siguiente ejemplo, se crea una instancia de un anuncio de banner:

class BannerExampleState extends State<BannerExample>{
  BannerAd? _bannerAd;
  bool _isLoaded = false;

  // TODO: replace this test ad unit with your own ad unit.
  final adUnitId = Platform.isAndroid
    ? 'ca-app-pub-3940256099942544/9214589741'
    : 'ca-app-pub-3940256099942544/2435281174';

  /// Loads a banner ad.
  void loadAd() async {
    // Get an AnchoredAdaptiveBannerAdSize before loading the ad.
    final size = await AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(
        MediaQuery.sizeOf(context).width.truncate());

    _bannerAd = BannerAd(
      adUnitId: adUnitId,
      request: const AdRequest(),
      size: size,
      listener: BannerAdListener(
        // Called when an ad is successfully received.
        onAdLoaded: (ad) {
          debugPrint('$ad loaded.');
          setState(() {
            _isLoaded = true;
          });
        },
        // Called when an ad request failed.
        onAdFailedToLoad: (ad, err) {
          debugPrint('BannerAd failed to load: $error');
          // Dispose the ad here to free resources.
          ad.dispose();
        },
      ),
    )..load();
  }
}

Con BannerAdListener, puedes detectar eventos del ciclo de vida, como cuando se carga un anuncio. En este ejemplo, se implementa cada método y se registra un mensaje en la consola:

class BannerExampleState extends State<BannerExample> {
  BannerAd? _bannerAd;
  bool _isLoaded = false;

  // TODO: replace this test ad unit with your own ad unit.
  final adUnitId = Platform.isAndroid
    ? 'ca-app-pub-3940256099942544/9214589741'
    : 'ca-app-pub-3940256099942544/2435281174';


  /// Loads a banner ad.
  void loadAd() async {
    // Get an AnchoredAdaptiveBannerAdSize before loading the ad.
    final size = await AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(
        MediaQuery.sizeOf(context).width.truncate());

    _bannerAd = BannerAd(
      adUnitId: adUnitId,
      request: const AdRequest(),
      size: size,
      listener: BannerAdListener(
        // Called when an ad is successfully received.
        onAdLoaded: (ad) {
          debugPrint('$ad loaded.');
          setState(() {
            _isLoaded = true;
          });
        },
        // Called when an ad request failed.
        onAdFailedToLoad: (ad, err) {
          debugPrint('BannerAd failed to load: $error');
          // Dispose the ad here to free resources.
          ad.dispose();
        },
        // Called when an ad opens an overlay that covers the screen.
        onAdOpened: (Ad ad) {},
        // Called when an ad removes an overlay that covers the screen.
        onAdClosed: (Ad ad) {},
        // Called when an impression occurs on the ad.
        onAdImpression: (Ad ad) {},
      ),
    )..load();
  }
}

Actualiza un anuncio

Si configuraste tu unidad de anuncios para que se actualice, no es necesario que solicites otro anuncio cuando no se cargue. El SDK de anuncios de Google para dispositivos móviles respeta cualquier frecuencia de actualización que hayas especificado en la IU de AdMob. Si no habilitaste la actualización, envía una nueva solicitud. Para obtener más detalles sobre la actualización de bloques de anuncios, como la configuración de una frecuencia de actualización, consulta Cómo usar la actualización automática para los anuncios de banner.

Cómo mostrar un anuncio de banner

Para mostrar un objeto BannerAd como widget, debes crear una instancia de un objeto AdWidget con un anuncio compatible después de llamar a load(). Puedes crear el widget antes de llamar a load(), pero se debe llamar a load() antes de agregarlo al árbol de widgets.

AdWidget hereda de la clase Widget de Flutter y se puede usar como cualquier otro widget. En iOS, asegúrate de colocar el widget en un widget con un ancho y un alto especificados. De lo contrario, es posible que no se muestre tu anuncio. Se puede colocar un BannerAd en un contenedor con un tamaño que coincida con el anuncio:

if (_bannerAd != null) {
  Align(
    alignment: Alignment.bottomCenter,
    child: SafeArea(
      child: SizedBox(
        width: _bannerAd!.size.width.toDouble(),
        height: _bannerAd!.size.height.toDouble(),
        child: AdWidget(ad: _bannerAd!),
      ),
    ),
  )
}

Se debe descartar un anuncio cuando ya no se necesita acceder a él. La práctica recomendada para llamar a dispose() es después de que se quite AdWidget del árbol de widgets o en la devolución de llamada BannerAdListener.onAdFailedToLoad().

Eso es todo. Tu app ahora está lista para mostrar anuncios de banner.

Limitación del desplazamiento en Android 9 y versiones anteriores

Sabemos que algunos dispositivos más antiguos o menos potentes que ejecutan Android 9 o versiones anteriores pueden tener un rendimiento no óptimo cuando muestran anuncios de banner intercalados en vistas de desplazamiento. Te recomendamos que solo uses estos tipos de banners en Android 10 o versiones posteriores. Los banners de posición fija, como los banners anclados, no se ven afectados y se pueden usar con un rendimiento óptimo en todos los niveles de la API de Android.

Ejemplo completo en GitHub

Consulta un ejemplo completo de la integración del banner que se aborda en esta página en banner_example.

Más información sobre otros tipos de banners

Familiarízate con otros tipos de banners definidos en esta sección para tu aplicación de Flutter.

Banners adaptables intercalados

Los banners adaptables intercalados tienen una altura variable y son más grandes y altos que los banners adaptables fijos. Se recomiendan los banners adaptables intercalados en lugar de los anuncios de banner adaptable fijos para las apps que colocan anuncios de banner en contenido por el que es posible desplazarse. Para obtener más detalles, consulta banners adaptables intercalados.

Banners contraíbles

Los anuncios de banner contraíbles son anuncios de banner que se presentan inicialmente como una superposición más grande, con un botón para contraer el anuncio a un tamaño más pequeño. Considera usar este banner para optimizar aún más tu rendimiento. Para obtener más detalles, consulta anuncios de banner contraíbles.