Los anuncios de banner ocupan un lugar dentro del diseño de la 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 AdMob en una app creada con Flutter. Además de los fragmentos de código y las instrucciones, también se incluye información para ajustar el tamaño de los banners correctamente.
Siempre prueba con anuncios de prueba
Cuando compiles y pruebes tus apps, asegúrate de usar anuncios de prueba en lugar de anuncios publicados en producción. De lo contrario, podría suspenderse tu cuenta.
La forma más fácil de cargar anuncios de prueba es usar nuestro ID de unidad de anuncios de prueba exclusivo para los 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, 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 la app.
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 |
|---|---|---|
| 320x50 | Banner estándar | banner
|
| 320 x 100 | Banner grande | largeBanner
|
| 320x250 | Rectángulo mediano | mediumRectangle
|
| 468 x 60 | Banner en tamaño completo | fullBanner
|
| 728 x 90 | Tabla de clasificación | leaderboard
|
| Ancho proporcionado × alto adaptable | Banner adaptable | No disponible |
Para definir un tamaño de banner personalizado, configura tu AdSize preferido:
final AdSize adSize = AdSize(300, 50);
Eventos de anuncios en forma de banner
Con el uso de BannerAdListener, 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> {
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 una BannerAd 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 se hereda de la clase Widget de Flutter y se puede usar como cualquier otro widget. En iOS, asegúrate de colocar el widget en uno con un ancho y una altura especificados. De lo contrario, es posible que su anuncio no se publique. Un BannerAd se puede colocar 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!),
),
),
)
}
...
Los anuncios se deben desechar cuando ya no se necesita acceso a ellos. La práctica recomendada para llamar a dispose() es después de que se quita AdWidget del árbol de widgets o en la devolución de llamada BannerAdListener.onAdFailedToLoad().
Listo. Tu app ya está lista para mostrar anuncios de banner.
Android 9 及更低版本上的滚动限制
我们知道，在一些搭载 Android 9 或更低版本的旧款设备或功能不太强大的设备上，在滚动视图中显示内嵌横幅广告时，性能可能会不太理想。我们建议仅在 Android 10 或更高版本上使用这些类型的横幅广告。固定位置横幅广告（如锚定横幅广告）不会受到影响，可在所有 Android API 级别中以最佳性能使用。