Los banners adaptables son la nueva generación de anuncios responsivos, ya que maximizan el rendimiento mediante la optimización del tamaño del anuncio en cada dispositivo. Los banners adaptables mejoran los banners inteligentes, que solo admitían alturas fijas, y te permiten especificar el ancho del anuncio y usarlo para determinar el tamaño óptimo del anuncio.
Para elegir el mejor tamaño de anuncio, los banners adaptables usan relaciones de aspecto fijas en lugar de alturas fijas. Como resultado, los anuncios en forma de banner ocupan una parte más coherente de la pantalla en todos los dispositivos y ofrecen oportunidades para mejorar el rendimiento.
Cuando trabajes con banners adaptables, ten en cuenta que siempre se mostrarán un tamaño constante para un dispositivo y un ancho determinados. Una vez que hayas probado el diseño en un dispositivo determinado, podrás estar seguro de que el tamaño del anuncio no cambiará. Sin embargo, el tamaño de la creatividad del banner puede cambiar según el dispositivo. Por lo tanto, te recomendamos que tu diseño se adapte a las variaciones en la altura del anuncio. En casos excepcionales, es posible que no se complete el tamaño adaptable completo y que una creatividad de tamaño estándar se centre en este espacio publicitario.
Requisitos previos
- Sigue las instrucciones de la guía de introducción sobre cómo importar el complemento de Flutter para anuncios móviles.
Cuándo usar banners adaptables
Los banners adaptables están diseñados para reemplazar de forma directa el tamaño del banner estándar de la industria de 320 x 50 y el formato de banner inteligente que sustituyen.
Por lo general, estos tamaños de banner se usan como banners fijos, que suelen estar bloqueados en la parte superior o inferior de la pantalla.
Para estos banners fijos, la relación de aspecto cuando se usan banners adaptables será similar a la de un anuncio estándar de 320 x 50, como se puede ver en los siguientes tres ejemplos:
 Banner de 320 x 50 |
 Banner adaptable |
 Banner inteligente |
El banner adaptable aprovecha mejor el tamaño de pantalla disponible. Además, en comparación con un banner inteligente, un banner adaptable es una mejor opción por los siguientes motivos:
Se utiliza cualquier ancho que proporciones, en lugar de forzarlo a pantalla completa, lo que te permite considerar el área segura en iOS y los cortes de pantalla en Android.
Selecciona una altura óptima para el dispositivo específico, en lugar de tener una altura constante en dispositivos de diferentes tamaños, lo que mitiga los efectos de la fragmentación del dispositivo.
Notas de la implementación
Cuando implementes banners adaptables en tu app, ten en cuenta lo siguiente:
- Debes conocer el ancho de la vista en la que se colocará el anuncio, y esto debe tener en cuenta el ancho del dispositivo y las áreas seguras o los cortes que correspondan.
- Es posible que debas actualizar o crear líneas de pedido nuevas para trabajar con tamaños adaptables. Más información.
- Cuando se publiquen tamaños de anuncios más pequeños que no ocupen el espacio publicitario, asegúrate de que el fondo de vista de anuncio sea opaco para cumplir con las políticas de AdMob.
- Asegúrate de usar la versión más reciente del complemento de Flutter de anuncios de Google para dispositivos móviles.
- Los tamaños de los banners adaptables están diseñados para funcionar mejor cuando se usa todo el ancho disponible. En la mayoría de los casos, será el ancho completo de la pantalla del dispositivo en uso. Asegúrate de tener en cuenta las áreas seguras correspondientes.
- El SDK de anuncios de Google para dispositivos móviles ajustará el tamaño del banner con una altura de anuncio optimizada para el ancho determinado cuando se usen las APIs adaptables de AdSize.
- Existen dos métodos a fin de obtener un tamaño de anuncio para adaptable:
AdSize.getAnchoredAdaptiveBannerAdSize(Orientation orientation, int width), para solicitar una orientación específica, yAdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(int width), para la orientación actual en el momento de la ejecución. - El tamaño que se muestra para un ancho determinado en un dispositivo determinado siempre será el mismo, por lo que, una vez que hayas probado tu diseño en un dispositivo determinado, podrás asegurarte de que el tamaño del anuncio no cambiará.
- La altura del banner fijo nunca será mayor que el 15% inferior de la altura del dispositivo o los 90 píxeles independientes de la densidad, y nunca será inferior a 50 píxeles independientes de la densidad.
Guía de inicio rápido
Sigue los pasos que se indican a continuación para implementar un banner adaptable fijo simple.
- Obtenga un tamaño de anuncio de banner adaptable. El tamaño que obtengas se usará para solicitar tu banner adaptable. Para obtener el tamaño del anuncio adaptable, asegúrese de lo siguiente:
- Usa el ancho del dispositivo en píxeles independientes de la densidad o establece el tuyo propio si no quieres usar el ancho completo de la pantalla.
Puedes usar
MediaQuery.of(context)para obtener el ancho de la pantalla. - Usa los métodos estáticos adecuados en la clase de tamaño de anuncio, como
AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(int width), a fin de obtener un objetoAdSizeadaptable para la orientación actual.
- Usa el ancho del dispositivo en píxeles independientes de la densidad o establece el tuyo propio si no quieres usar el ancho completo de la pantalla.
Puedes usar
- Crea un objeto
AdManagerBannerAdcon tu ID de unidad de anuncios, el tamaño del anuncio adaptable y un objeto de solicitud de anuncio. - Carga el anuncio como lo harías con un anuncio de banner normal y muéstralo desde un
AdWidgetde la misma manera que lo harías con una vista de anuncio normal.
Ejemplo de código
Este es un widget de ejemplo que carga un banner adaptable fijo para adaptarse al ancho de la pantalla:
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:google_mobile_ads/google_mobile_ads.dart';
/// This example demonstrates anchored adaptive banner ads.
class AnchoredAdaptiveExample extends StatefulWidget {
@override
_AnchoredAdaptiveExampleState createState() =>
_AnchoredAdaptiveExampleState();
}
class _AnchoredAdaptiveExampleState extends State<AnchoredAdaptiveExample> {
AdManagerBannerAd? _anchoredAdaptiveAd;
bool _isLoaded = false;
@override
void didChangeDependencies() {
super.didChangeDependencies();
_loadAd();
}
Future<void> _loadAd() async {
// Get an AnchoredAdaptiveBannerAdSize before loading the ad.
final AnchoredAdaptiveBannerAdSize? size =
await AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(
MediaQuery.of(context).size.width.truncate());
if (size == null) {
print('Unable to get height of anchored banner.');
return;
}
_anchoredAdaptiveAd = AdManagerBannerAd(
// TODO: replace with your own ad unit.
adUnitId: '<your-ad-unit>',
sizes: [size],
request: AdManagerAdRequest(),
listener: AdManagerBannerAdListener(
onAdLoaded: (Ad ad) {
print('$ad loaded: ${ad.responseInfo}');
setState(() {
// When the ad is loaded, get the ad size and use it to set
// the height of the ad container.
_anchoredAdaptiveAd = ad as AdManagerBannerAd;
_isLoaded = true;
});
},
onAdFailedToLoad: (Ad ad, LoadAdError error) {
print('Anchored adaptive banner failedToLoad: $error');
ad.dispose();
},
),
);
return _anchoredAdaptiveAd!.load();
}
@override
Widget build(BuildContext context) => Scaffold(
appBar: AppBar(
title: Text('Anchored adaptive banner example'),
),
body: Center(
child: Stack(
alignment: AlignmentDirectional.bottomCenter,
children: <Widget>[
ListView.separated(
padding: const EdgeInsets.symmetric(horizontal: 16.0),
itemBuilder: (context, index) {
return Text(
'Placeholder text',
style: TextStyle(fontSize: 24),
);
},
separatorBuilder: (context, index) {
return Container(height: 40);
},
itemCount: 20),
if (_anchoredAdaptiveAd != null && _isLoaded)
Container(
color: Colors.green,
width: _anchoredAdaptiveAd!.size.width.toDouble(),
height: _anchoredAdaptiveAd!.size.height.toDouble(),
child: AdWidget(ad: _anchoredAdaptiveAd!),
)
],
),
),
);
@override
void dispose() {
super.dispose();
_anchoredAdaptiveAd?.dispose();
}
}
Aquí, se usa la función AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize a fin de obtener el tamaño de un banner en una posición anclada para la orientación actual de la interfaz. Para precargar un banner fijo en una orientación determinada, usa AdSize.getAnchoredAdaptiveBannerAdSize(Orientation orientation, int width) y pasa la orientación deseada.