Banners adaptativos inline

Os banners adaptativos são a próxima geração de anúncios responsivos, maximizando a performance ao otimizar o tamanho do anúncio para cada dispositivo. Os banners adaptativos são uma melhoria em relação aos banners de tamanho fixo, que só aceitam alturas fixas. Com eles, os desenvolvedores podem especificar a largura do anúncio e usar isso para determinar o tamanho ideal.

Para escolher o melhor tamanho de anúncio, os banners adaptativos inline usam alturas máximas em vez de fixas. Isso resulta em oportunidades de melhoria na performance.

Quando usar banners adaptativos inline

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

Eles se destinam a 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 usar a mediação, as versões mais recentes dos adaptadores de mediação.

  • Os tamanhos de banner adaptativo inline foram projetados para funcionar melhor quando usam a largura disponível completa. Na maioria dos casos, essa será a largura total da tela do dispositivo em uso. Considere as áreas seguras aplicáveis.

  • Os métodos para receber o tamanho do anúncio são:

    • 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 flag 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. A altura do banner pode ser a mesma da tela do dispositivo ou limitada por uma altura máxima, dependendo da API.

Implementação

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

  1. Conseguir um tamanho de anúncio de banner adaptativo inline. O tamanho definido será usado para solicitar o banner adaptativo. Para usar o tamanho adaptável do anúncio, faça o seguinte:
    1. Receba a largura do dispositivo em uso em pixels independentes de densidade ou defina sua própria largura se 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 de anúncio, como AdSize.getCurrentOrientationInlineAdaptiveBannerAdSize(int width) para receber um objeto AdSize adaptável inline para a orientação atual.
    3. Se você quiser limitar a altura do banner, use o método estático AdSize.getInlineAdaptiveBannerAdSize(int width, int maxHeight).
  2. Crie um objeto BannerAd 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 BannerAd.getPlatformAdSize() para receber o tamanho atualizado do anúncio da plataforma e 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, considerando os insets:

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;
  BannerAd? _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 = BannerAd(
      // TODO: replace this test ad unit with your own ad unit.
      adUnitId: 'ca-app-pub-3940256099942544/9214589741',
      size: size,
      request: AdRequest(),
      listener: BannerAdListener(
        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.
          BannerAd bannerAd = (ad as BannerAd);
          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();
  }
}