Banner

Los anuncios de banner ocupan un lugar dentro del 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 muestra cómo integrar anuncios de banner de Ad Manager en una app de Flutter. Además de instrucciones y fragmentos de código, también se incluye información sobre cómo ajustar el tamaño de los banners correctamente.

Probar siempre con anuncios de prueba

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

La manera más fácil de cargar anuncios de prueba es usar nuestro ID de unidad de anuncios de prueba exclusivo para banners:

  • /6499/example/banner

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

Carga un anuncio

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

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

  // TODO: replace this test ad unit with your own ad unit.
  final adUnitId = '/6499/example/banner';

  /// Loads a banner ad.
  void loadAd() {
    _bannerAd = AdManagerBannerAd(
      adUnitId: adUnitId,
      request: const AdManagerAdRequest(),
      size: AdSize.banner,
      listener: AdManagerBannerAdListener(
        // 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('AdManagerBannerAd failed to load: $error');
          // Dispose the ad here to free resources.
          ad.dispose();
        },
      ),
    )..load();
  }
}

En la siguiente tabla, se indican los tamaños de banner estándar.

Tamaño en dp (Ancho x Alto) Descripción Constante de AdSize
320 x 50 Banner estándar banner
320 x 100 Banner grande largeBanner
320 × 250 Rectángulo mediano mediumRectangle
468 x 60 Banner de tamaño completo fullBanner
728 x 90 Tabla de clasificación leaderboard
Ancho × alto adaptable proporcionado Banner adaptable N/A

Para definir un tamaño de banner personalizado, establece tu AdSize preferido:

final AdSize adSize = AdSize(300, 50);

Mediante el uso de AdManagerBannerAdListener, puedes escuchar eventos de 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> {
  AdManagerBannerAd? _bannerAd;
  bool _isLoaded = false;

  // TODO: replace this test ad unit with your own ad unit.
  final adUnitId = '/6499/example/banner';


  /// Loads a banner ad.
  void loadAd() {
    _bannerAd = AdManagerBannerAd(
      adUnitId: adUnitId,
      request: const AdManagerAdRequest(),
      size: AdSize.banner,
      listener: AdManagerBannerAdListener(
        // 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('AdManagerBannerAd 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();
  }
}

Muestra un anuncio banner

Para mostrar un AdManagerBannerAd como widget, debes crear una instancia de 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 colocarlo en uno con un ancho y una altura especificados. De lo contrario, es posible que tu anuncio no se muestre. Se puede colocar un AdManagerBannerAd en un contenedor con un tamaño que coincida con el del 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!),
      ),
    ),
  )
}
...

Los anuncios deben desecharse cuando ya no se necesite acceder a ellos. La práctica recomendada para llamar a dispose() es después de quitar AdWidget del árbol de widgets o en la devolución de llamada de AdManagerBannerAdListener.onAdFailedToLoad().

Listo. Tu app ya está lista para mostrar anuncios de banner.

Limitación de 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 deficiente a la hora de mostrar anuncios de banner intercalados en las vistas con desplazamiento. Recomendamos usar solo estos tipos de banners en Android 10 o versiones posteriores. Los banners de posición fija, como los fijos, no se ven afectados y se pueden usar con un rendimiento óptimo en todos los niveles de API de Android.