Banners adaptativos inline

Os banners adaptativos são a próxima geração de anúncios responsivos. Eles maximizam a performance otimizando o tamanho do anúncio para cada dispositivo. Com melhorias nos banners de tamanho fixo, que só tinham suporte a alturas fixas, os banners adaptativos permitem que os desenvolvedores especifiquem a largura do anúncio e a usem para determinar o tamanho ideal para o anúncio.

Para escolher o melhor tamanho de anúncio, os banners adaptativos inline usam o máximo em vez de alturas fixas. Isso gera oportunidades para melhorar a performance.

Quando usar banners adaptativos inline

Os banners adaptativos inline são maiores e mais altos em comparação com os fixos. Eles têm altura variável e podem ter a mesma altura da tela do dispositivo.

Eles precisam ser colocados em conteúdo de rolagem, por exemplo:

Pré-requisitos

Antes de começar

Ao implementar banners adaptativos no seu app, observe estes pontos:

  • Verifique se você está usando a versão mais recente do SDK dos anúncios para dispositivos móveis do Google e, se estiver usando a mediação, as versões mais recentes dos adaptadores de mediação.

  • Os tamanhos de banner adaptativo inline funcionam melhor quando usam a largura total disponível. Na maioria dos casos, essa será a largura total da tela do dispositivo em uso. Certifique-se de levar em consideração as áreas seguras aplicáveis.

  • Talvez seja necessário atualizar ou criar novos itens de linha para trabalhar com tamanhos adaptáveis. Saiba mais.

  • Os métodos para descobrir o tamanho do anúncio

    • AdSize.getCurrentOrientationInlineAdaptiveBannerAdSize(int width)
    • AdSize.getLandscapeInlineAdaptiveBannerAdSize(int width)
    • AdSize.getPortraitInlineAdaptiveBannerAdSize(int width)
    • AdSize.getInlineAdaptiveBannerAdSize(int width, int maxHeight)

  • Ao usar as APIs de banner adaptativo inline, o SDK dos anúncios para dispositivos móveis do Google retorna um AdSize com a largura especificada e uma sinalização inline. A altura é zero ou maxHeight, dependendo da API que você está usando. A altura real do anúncio é disponibilizada quando ele é retornado.

  • Um banner adaptativo inline foi projetado para ser colocado em conteúdo rolável. O banner pode ter a mesma altura da tela do dispositivo ou ser limitado por uma altura máxima, dependendo da API.

Implementação

Siga as etapas abaixo para implementar um banner adaptativo inline simples.

  1. Use um tamanho de anúncio de banner adaptativo inline. O tamanho definido será usado para solicitar o banner adaptativo. Para ter acesso ao tamanho do anúncio adaptável, faça o seguinte:
    1. Use a largura do dispositivo em pixels com independência de densidade ou defina sua própria largura, se você não quiser usar a largura total da tela. Você pode usar MediaQuery.of(context) para saber a largura da tela.
    2. Use os métodos estáticos adequados na classe de tamanho do anúncio, por exemplo, AdSize.getCurrentOrientationInlineAdaptiveBannerAdSize(int width) para receber um objeto AdSize adaptável inline para a orientação atual.
    3. Para limitar a altura do banner, use o método estático AdSize.getInlineAdaptiveBannerAdSize(int width, int maxHeight).
  2. Crie um objeto AdManagerBannerAd com o ID do bloco de anúncios, o tamanho do anúncio adaptável e um objeto de solicitação de anúncio.
  3. Carregue o anúncio.
  4. No callback onAdLoaded, use AdManagerBannerAd.getPlatformAdSize() para conferir o tamanho atualizado do anúncio da plataforma e atualizar a altura do contêiner AdWidget.

Exemplo de código

Confira um exemplo de widget que carrega um banner adaptativo inline para se ajustar à largura da tela, contabilizando os encartes:

import 'package:flutter/material.dart';
import 'package:google_mobile_ads/google_mobile_ads.dart';

/// This example demonstrates inline adaptive banner ads.
///
/// Loads and shows an inline adaptive banner ad in a scrolling view,
/// and reloads the ad when the orientation changes.
class InlineAdaptiveExample extends StatefulWidget {
  @override
  _InlineAdaptiveExampleState createState() => _InlineAdaptiveExampleState();
}

class _InlineAdaptiveExampleState extends State<InlineAdaptiveExample> {
  static const _insets = 16.0;
  AdManagerBannerAd? _inlineAdaptiveAd;
  bool _isLoaded = false;
  AdSize? _adSize;
  late Orientation _currentOrientation;

  double get _adWidth => MediaQuery.of(context).size.width - (2 * _insets);

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    _currentOrientation = MediaQuery.of(context).orientation;
    _loadAd();
  }

  void _loadAd() async {
    await _inlineAdaptiveAd?.dispose();
    setState(() {
      _inlineAdaptiveAd = null;
      _isLoaded = false;
    });

    // Get an inline adaptive size for the current orientation.
    AdSize size = AdSize.getCurrentOrientationInlineAdaptiveBannerAdSize(
        _adWidth.truncate());

    _inlineAdaptiveAd = AdManagerBannerAd(
      // TODO: replace with your own ad unit.
      adUnitId: '<your-ad-unit>',
      size: size,
      request: AdManagerAdRequest(),
      listener: AdManagerBannerAdListener(
        onAdLoaded: (Ad ad) async {
          print('Inline adaptive banner loaded: ${ad.responseInfo}');

          // After the ad is loaded, get the platform ad size and use it to
          // update the height of the container. This is necessary because the
          // height can change after the ad is loaded.
          AdManagerBannerAd bannerAd = (ad as AdManagerBannerAd);
          final AdSize? size = await bannerAd.getPlatformAdSize();
          if (size == null) {
            print('Error: getPlatformAdSize() returned null for $bannerAd');
            return;
          }

          setState(() {
            _inlineAdaptiveAd = bannerAd;
            _isLoaded = true;
            _adSize = size;
          });
        },
        onAdFailedToLoad: (Ad ad, LoadAdError error) {
          print('Inline adaptive banner failedToLoad: $error');
          ad.dispose();
        },
      ),
    );
    await _inlineAdaptiveAd!.load();
  }

  /// Gets a widget containing the ad, if one is loaded.
  ///
  /// Returns an empty container if no ad is loaded, or the orientation
  /// has changed. Also loads a new ad if the orientation changes.
  Widget _getAdWidget() {
    return OrientationBuilder(
      builder: (context, orientation) {
        if (_currentOrientation == orientation &&
            _inlineAdaptiveAd != null &&
            _isLoaded &&
            _adSize != null) {
          return Align(
              child: Container(
            width: _adWidth,
            height: _adSize!.height.toDouble(),
            child: AdWidget(
              ad: _inlineAdaptiveAd!,
            ),
          ));
        }
        // Reload the ad if the orientation changes.
        if (_currentOrientation != orientation) {
          _currentOrientation = orientation;
          _loadAd();
        }
        return Container();
      },
    );
  }

  @override
  Widget build(BuildContext context) => Scaffold(
      appBar: AppBar(
        title: Text('Inline adaptive banner example'),
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: _insets),
          child: ListView.separated(
            itemCount: 20,
            separatorBuilder: (BuildContext context, int index) {
              return Container(
                height: 40,
              );
            },
            itemBuilder: (BuildContext context, int index) {
              if (index == 10) {
                return _getAdWidget();
              }
              return Text(
                'Placeholder text',
                style: TextStyle(fontSize: 24),
              );
            },
          ),
        ),
      ));

  @override
  void dispose() {
    super.dispose();
    _inlineAdaptiveAd?.dispose();
  }
}