Os anúncios de banner ocupam um lugar no layout de um app, na parte de cima ou de baixo da tela do dispositivo. Enquanto os usuários interagem com o app, eles permanecem na tela e podem ser atualizados automaticamente após um determinado período.
Este guia mostra como integrar anúncios de banner da AdMob a um app Flutter. Além de snippets de código e instruções, ele também inclui informações sobre como dimensionar banners corretamente.
Sempre faça testes com anúncios de teste
Ao criar e testar seus apps, use anúncios de teste em vez de anúncios de produção ativos. Sua conta poderá ser suspensa se isso não for feito.
A maneira mais fácil de carregar anúncios de teste é usar nosso ID de bloco de anúncios de teste dedicado para banners:
Android
ca-app-pub-3940256099942544/6300978111
iOS
ca-app-pub-3940256099942544/2934735716
Os blocos de anúncios de teste são configurados para retornar anúncios de teste para cada solicitação. Você pode usá-los nos seus próprios apps durante a programação, o teste e a depuração. Apenas lembre-se de substituí-los pelos seus próprios IDs de bloco de anúncios antes de publicar o aplicativo.
Carregar um anúncio
O exemplo a seguir instancia um anúncio 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(); } }
Tamanhos de banner
A tabela abaixo lista os tamanhos padrão de banner.
Tamanho em dp (L x A) | Descrição | Constante AdSize |
---|---|---|
320 x 50 | Banner padrão | banner
|
320 x 100 | Banner grande | largeBanner
|
320x250 | Retângulo médio | mediumRectangle
|
468 x 60 | Banner de tamanho original | fullBanner
|
728 x 90 | Ranking | leaderboard
|
Largura fornecida x Altura adaptável | Banner adaptativo | N/A |
Para definir um tamanho de banner personalizado, defina seu AdSize
preferido:
final AdSize adSize = AdSize(300, 50);
Eventos de anúncio de banner
Com o uso de BannerAdListener
, é possível detectar eventos de ciclo de vida, como
quando um anúncio é carregado. Este exemplo implementa cada método e registra uma mensagem no console:
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(); } }
Exibir um anúncio de banner
Para mostrar um BannerAd
como widget, é necessário instanciar um AdWidget
com um anúncio compatível depois de chamar load()
. É possível criar o widget antes
de chamar load()
, mas load()
precisa ser chamado antes de ser adicionado à árvore
de widgets.
O AdWidget
é herdado da classe de widgets do Flutter e pode ser usado como qualquer outro
widget. No iOS, coloque o widget em um widget com a largura e a altura especificadas. Caso contrário, seu anúncio não será exibido. Um BannerAd
pode ser colocado em um contêiner com um tamanho que corresponda ao anúncio:
... 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!), ), ), ) } ...
Um anúncio deverá ser descartado quando o acesso a ele não for mais necessário. A prática recomendada
para quando chamar dispose()
é depois que o AdWidget
é removido da
árvore de widgets ou no callback
BannerAdListener.onAdFailedToLoad()
.
Pronto! Seu app está pronto para exibir anúncios de banner.
Limitação de rolagem no Android 9 e versões anteriores
Sabemos que alguns dispositivos mais antigos ou menos potentes que executam o Android 9 ou versões anteriores podem ter uma performance abaixo do ideal ao exibir anúncios de banner inline em visualizações de rolagem. Recomendamos usar esses tipos de banner apenas no Android 10 ou em versões mais recentes. Banners de posição fixa, como banners fixos, não são afetados e podem ser usados com desempenho ideal em todos os níveis da API do Android.