Banners adaptativos de altura máxima

Los banners adaptativos son la nueva generación de anuncios adaptables, ya que optimizan el tamaño de los anuncios según el dispositivo para maximizar el rendimiento. A diferencia de los banners de tamaño fijo, que solo admiten alturas fijas, los banners adaptativos permiten a los desarrolladores especificar la anchura de los anuncios y, de esa forma, determinar el tamaño óptimo de cada uno según la situación.

Para elegir el tamaño de anuncio más adecuado, los banners adaptativos de altura máxima utilizan valores máximos en lugar de alturas fijas. Esto se traduce en oportunidades para mejorar el rendimiento.

Cuándo usar banners adaptativos de altura máxima

Los banners adaptativos de altura máxima son más altos y anchos que los banners ancla adaptativos. Tienen una altura variable y pueden ser tan altos como la pantalla del dispositivo.

Están pensados para colocarse en contenido por el que los usuarios puedan desplazarse; por ejemplo:

Requisito previo

Antes de empezar

A la hora de implementar banners adaptativos en tu aplicación, ten en cuenta lo siguiente:

  • Debes utilizar la versión más reciente del SDK de anuncios de Google para móviles y, si usas la mediación, las últimas versiones de los adaptadores correspondientes.

  • Los tamaños de banners adaptativos de altura máxima están pensados para funcionar mejor cuando se utiliza toda la anchura disponible. En la mayoría de los casos, esta medida se corresponderá con la anchura completa de la pantalla del dispositivo que se esté usando. Recuerda tener en cuenta las zonas seguras pertinentes.

  • Los métodos para obtener el tamaño de anuncio son los siguientes:

    • AdSize.getCurrentOrientationInlineAdaptiveBannerAdSize(int width)
    • AdSize.getLandscapeInlineAdaptiveBannerAdSize(int width)
    • AdSize.getPortraitInlineAdaptiveBannerAdSize(int width)
    • AdSize.getInlineAdaptiveBannerAdSize(int width, int maxHeight)
  • Al usar las APIs de banners adaptativos de altura máxima, el SDK de anuncios de Google para móviles devuelve un objeto AdSize con la anchura especificada y una marca que indica que irá insertado. La altura es cero o maxHeight, según la API que uses. La altura real del anuncio no se conoce hasta que este se recibe.

  • Los banners adaptativos de altura máxima están diseñados para colocarse en contenido desplazable. Según la API que se use, el banner puede ser tan alto como la pantalla del dispositivo o estar limitado por una altura máxima.

Implementación

Sigue estos pasos para implementar un banner adaptativo de altura máxima sencillo:

  1. Elige un tamaño de anuncio de banner adaptativo de altura máxima. Ese tamaño se utilizará para solicitar el banner adaptativo. Para ello, debes hacer lo siguiente:
    1. Utiliza la anchura del dispositivo que se está usando en píxeles independientes de la densidad, o define una propia si no quieres utilizar la anchura completa de la pantalla. Puedes usar MediaQuery.of(context) para obtener la anchura de la pantalla.
    2. Usa los métodos estáticos correspondientes a la clase de tamaño de anuncio, como AdSize.getCurrentOrientationInlineAdaptiveBannerAdSize(int width), para obtener un objeto AdSize adaptativo de altura máxima en la orientación que hayas elegido.
    3. Si quieres limitar la altura del banner, puedes usar el método estático AdSize.getInlineAdaptiveBannerAdSize(int width, int maxHeight).
  2. Crea un objeto BannerAd con el ID del bloque de anuncios, el tamaño del anuncio adaptativo y un objeto de solicitud de anuncio.
  3. Carga el anuncio.
  4. En la retrollamada onAdLoaded, usa BannerAd.getPlatformAdSize() para obtener el tamaño actualizado del anuncio de la plataforma y cambia la altura del contenedor AdWidget.

Ejemplo de código

A continuación se muestra un widget de ejemplo que carga un banner adaptativo de altura máxima para que se ajuste a la anchura de la pantalla teniendo en cuenta los bajorrelieves:

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();
  }
}