Banner

Selecione a plataforma: Android iOS Unity Flutter

Os anúncios de banner ocupam um espaço no layout do app, na parte superior ou inferior da tela do dispositivo. Eles permanecem na tela enquanto os usuários interagem com o app e podem ser atualizados automaticamente depois de algum tempo.

Este guia ajuda você a começar a usar anúncios de banner adaptativo fixo. Os banners adaptativos fixos otimizam o tamanho do anúncio para cada dispositivo usando uma largura especificada.

Os anúncios de banner adaptativo fixo têm proporção fixa, em vez de tamanho fixo. A proporção é semelhante a 320 x 50. Depois que você especifica a largura total disponível, o SDK dos anúncios para dispositivos móveis do Google retorna um anúncio com a altura ideal para essa largura. A altura ideal do anúncio permanece constante em diferentes solicitações de anúncio, e o conteúdo ao redor do anúncio permanece no lugar quando ele é atualizado.

Sempre teste 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/9214589741

iOS

ca-app-pub-3940256099942544/2435281174

Os blocos de anúncios de teste são configurados para retornar anúncios de teste em todas as solicitações, e você pode usá-los nos seus próprios apps durante a programação, o teste e a depuração. Substitua-os pelos seus IDs de bloco de anúncios antes de publicar o app.

Receber o tamanho do anúncio

Para solicitar um anúncio de banner com o tamanho correto, siga estas etapas:

1. Receba a largura da tela do dispositivo em pixels de densidade independente (dp) usando MediaQuery.of(context). Se você não quiser usar a largura total da tela, defina sua própria largura.

2. Use o método estático adequado na classe AdSize para receber um objeto AdSize. Por exemplo, use AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(int width) para receber o tamanho do anúncio para a orientação atual.

// Get an AnchoredAdaptiveBannerAdSize before loading the ad.
final size = await AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(
    MediaQuery.sizeOf(context).width.truncate());

Carregar um anúncio

O exemplo a seguir cria uma instância de 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/9214589741'
    : 'ca-app-pub-3940256099942544/2435281174';

  /// Loads a banner ad.
  void loadAd() async {
    // Get an AnchoredAdaptiveBannerAdSize before loading the ad.
    final size = await AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(
        MediaQuery.sizeOf(context).width.truncate());

    _bannerAd = BannerAd(
      adUnitId: adUnitId,
      request: const AdRequest(),
      size: size,
      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();
  }
}

Eventos de anúncio de banner

Com o uso de BannerAdListener, é possível detectar eventos do ciclo de vida, como o carregamento de um anúncio. 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/9214589741'
    : 'ca-app-pub-3940256099942544/2435281174';


  /// Loads a banner ad.
  void loadAd() async {
    // Get an AnchoredAdaptiveBannerAdSize before loading the ad.
    final size = await AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(
        MediaQuery.sizeOf(context).width.truncate());

    _bannerAd = BannerAd(
      adUnitId: adUnitId,
      request: const AdRequest(),
      size: size,
      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();
  }
}

Atualizar um anúncio

Se você configurou o bloco de anúncios para ser atualizado, não é necessário solicitar outro anúncio quando ele não carrega. O SDK dos anúncios para dispositivos móveis do Google respeita qualquer taxa de atualização especificada na interface da AdMob. Se você não tiver ativado a atualização, faça uma nova solicitação. Para mais detalhes sobre a atualização de blocos de anúncios, como definir uma taxa de atualização, consulte Usar a atualização automática para anúncios de banner.

Observação: ao definir uma taxa de atualização na interface da AdMob, a atualização automática só ocorre se o banner estiver visível na tela.

Mostrar um anúncio de banner

Para mostrar um BannerAd como um 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 adicioná-lo à árvore de widgets.

O AdWidget herda da classe Widget do Flutter e pode ser usado como qualquer outro widget. No iOS, coloque o widget em um widget com largura e 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 precisa ser descartado quando o acesso a ele não for mais necessário. A prática recomendada para 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 com Android 9 ou versões anteriores podem ter performance abaixo do ideal ao exibir banners inline em visualizações de rolagem. Recomendamos usar esses tipos de banners apenas no Android 10 ou versões mais recentes. Os banners de posição fixa, como os ancorados, não são afetados e podem ser usados com desempenho ideal em todos os níveis da API Android.

Exemplo completo no GitHub

Confira um exemplo completo da integração de banner abordada nesta página em banner_example.

Saiba mais sobre outros tipos de banner

Conheça outros tipos de banners definidos nesta seção para seu aplicativo Flutter.

Banners adaptativos inline

Os banners adaptativos inline têm altura variável e são maiores e mais altos do que os banners adaptativos fixos. Os banners adaptativos inline são recomendados em vez dos anúncios de banner adaptativo fixo para apps que colocam anúncios de banner em conteúdo rolável. Para mais detalhes, consulte banners adaptáveis inline.

Banners recolhíveis

Os anúncios de banner recolhíveis são apresentados inicialmente como uma sobreposição maior, com um botão para recolher o anúncio para um tamanho menor. Considere usar esse banner para otimizar ainda mais sua performance. Para mais detalhes, consulte anúncios de banner recolhíveis.