Los anuncios de banner ocupan un lugar dentro del diseño de la aplicación, 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 cierto período.
En esta guía, se muestra cómo integrar anuncios de banner de AdMob en un App de Flutter. Además de los fragmentos de código y las instrucciones, también incluye información sobre el tamaño adecuado de los banners.
Probar siempre con anuncios de prueba
Cuando compiles y pruebes tus apps, asegúrate de usar anuncios de prueba en lugar de anuncios activos y en producción. De lo contrario, podría suspenderse tu cuenta.
La forma más sencilla de cargar anuncios de prueba es usar nuestro ID exclusivo de unidad de anuncios de prueba para banners:
Android
ca-app-pub-3940256099942544/6300978111
iOS
ca-app-pub-3940256099942544/2934735716
Las unidades de anuncios de prueba están configuradas para mostrar anuncios de prueba para cada solicitud. puedes usarlas en tus apps mientras codificas, pruebas y depuras. Solo asegúrate de reemplazarlos con tus propios IDs de unidades de anuncios antes de publicar tu .
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/6300978111' : 'ca-app-pub-3940256099942544/2934735716'; /// Loads a banner ad. void loadAd() { _bannerAd = BannerAd( adUnitId: adUnitId, request: const AdRequest(), size: AdSize.banner, 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(); } }
Tamaños de banner
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);
Eventos de anuncios en forma de banner
Mediante el uso de BannerAdListener
, puedes escuchar eventos de ciclo de vida, como
como cuando se carga un anuncio. En este ejemplo, se implementa cada método y se registra un mensaje
a 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/6300978111' : 'ca-app-pub-3940256099942544/2934735716'; /// Loads a banner ad. void loadAd() { _bannerAd = BannerAd( adUnitId: adUnitId, request: const AdRequest(), size: AdSize.banner, 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(); } }
Muestra un anuncio banner
Para mostrar un BannerAd
como widget, debes crear una instancia de AdWidget
.
con un anuncio compatible después de llamar a load()
. Puedes crear el widget antes
Llamando a load()
, pero se debe llamar a load()
antes de agregarlo al widget
de imágenes.
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 valor especificado
ancho y alto. De lo contrario, es posible que tu anuncio no se muestre. Un BannerAd
Pueden colocarse 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
de cuándo llamar a dispose()
es después de que se quita AdWidget
de la
árbol de widgets o en BannerAdListener.onAdFailedToLoad()
devolución de llamada.
Eso es todo. 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 es posible que antes tenga un rendimiento deficiente Cuando se muestran anuncios de banner intercalados en vistas con desplazamiento. Solo recomendamos mediante estos tipos de banners en Android 10 o versiones posteriores. banners de posición fija, como ya que los banners fijos no se ven afectados y se pueden usar con un rendimiento óptimo en todos los niveles de API de Android.