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 de tiempo determinado.
En esta guía, se explica cómo comenzar a usar los anuncios de banner adaptables fijos. Los banners adaptables fijos optimizan el tamaño del anuncio para cada dispositivo según el ancho que especificas.
Los anuncios de banner adaptables 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.
Haz siempre una comprobación con anuncios de prueba
Al compilar y verificar tus apps, asegúrate de usar anuncios de prueba en vez de anuncios activos en fase de producción. De lo contrario, tu cuenta podría suspenderse.
La forma más sencilla de cargar anuncios de prueba es usar nuestro ID de unidad de anuncios de prueba exclusivo para los banners:
/21775744923/example/adaptive-banner
Las unidades de anuncios de prueba están configuradas para devolver anuncios de prueba en cada solicitud, y puedes usarlas en tus propias apps durante las tareas de programación, prueba y depuración. Solo asegúrate de reemplazarlas por tus propios IDs de unidades de anuncios antes de publicar la app.
Obtén el tamaño del anuncio
Para solicitar un anuncio de banner con el tamaño correcto, sigue estos pasos:
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 de pantalla completa, puedes establecer uno personalizado.Usa el método estático adecuado en la clase
AdSizepara obtener un objetoAdSize. Por ejemplo, usaAdSize.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 carga un anuncio de banner:
void _loadAd() async {
// Get an AnchoredAdaptiveBannerAdSize before loading the ad.
final size = await AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(
MediaQuery.sizeOf(context).width.truncate(),
);
if (size == null) {
// Unable to get width of anchored banner.
return;
}
BannerAd(
adUnitId: _adUnitId,
request: const AdRequest(),
size: size,
listener: BannerAdListener(
onAdLoaded: (ad) {
// Called when an ad is successfully received.
debugPrint("Ad was loaded.");
setState(() {
_bannerAd = ad as BannerAd;
});
},
onAdFailedToLoad: (ad, err) {
// Called when an ad request failed.
debugPrint("Ad failed to load with error: $err");
ad.dispose();
},
),
).load();
}
Eventos de anuncios de banner
Con 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:
onAdOpened: (Ad ad) {
// Called when an ad opens an overlay that covers the screen.
debugPrint("Ad was opened.");
},
onAdClosed: (Ad ad) {
// Called when an ad removes an overlay that covers the screen.
debugPrint("Ad was closed.");
},
onAdImpression: (Ad ad) {
// Called when an impression occurs on the ad.
debugPrint("Ad recorded an impression.");
},
onAdClicked: (Ad ad) {
// Called when an a click event occurs on the ad.
debugPrint("Ad was clicked.");
},
onAdWillDismissScreen: (Ad ad) {
// iOS only. Called before dismissing a full screen view.
debugPrint("Ad will be dismissed.");
},
Actualiza un anuncio
Si configuraste tu unidad de anuncios para que se actualice, no es necesario que solicites otro anuncio cuando uno no se carga. El SDK de anuncios de Google para dispositivos móviles respeta cualquier frecuencia de actualización que hayas especificado en la IU de Ad Manager. Si no habilitaste la actualización, envía una nueva solicitud. Para obtener más detalles sobre la actualización de unidades de anuncios (por ejemplo, la forma de establecer una frecuencia de actualización), consulta Frecuencia de actualización de los anuncios en apps para dispositivos móviles.
Muestra un anuncio de banner
Para mostrar un objeto AdManagerBannerAd 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 la llamada a load() debe ocurrir 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 no se muestre el anuncio. Se puede colocar un AdManagerBannerAd 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 hacerlo después de que se quite AdWidget del árbol de widgets o en la devolución de llamada AdManagerBannerAdListener.onAdFailedToLoad().
Eso es todo. Tu app ya 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 posiblemente no tengan un rendimiento ó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 fijos, no se ven afectados y se pueden usar con un rendimiento óptimo en todos los niveles de la API de Android.
Obtén 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. Para las apps que colocan anuncios de banner en contenido que se puede desplazar, se recomiendan los banners adaptables intercalados, en lugar de los banners adaptables fijos. Para obtener más detalles, consulta Banners adaptables intercalados.
Banners contraíbles
Los anuncios de banner contraíbles 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 estos banners para optimizar aún más el rendimiento. Para obtener más detalles, consulta Anuncios de banner contraíbles.