Banners adaptativos anclados

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 inteligentes, que solo admiten medidas de altura fijas, los banners adaptativos te permiten 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 utilizan relaciones de aspecto fijas en lugar de alturas fijas. Como resultado, los anuncios de banner ocupan una parte más uniforme de la pantalla en todos los dispositivos y, además, permiten mejorar el rendimiento.

A la hora de utilizar banners adaptativos, debes tener en cuenta que siempre devolverán el mismo tamaño en función del dispositivo y de las medidas de anchura que especifiques. Por lo tanto, una vez que hayas probado tu diseño en un dispositivo concreto, el tamaño del anuncio no cambiará. Sin embargo, el tamaño de la creatividad del banner sí puede variar dependiendo del dispositivo en el que se muestre. Por eso, lo más recomendable es que tu diseño admita variaciones de la altura del anuncio. En casos excepcionales, es posible que el tamaño adaptativo completo no rellene el espacio correspondiente. Si esto ocurre, en su lugar se mostrará centrada una creatividad de tamaño estándar.

Requisito previo

Cuándo utilizar banners adaptativos

Los banners adaptativos se han diseñado para reemplazar al tamaño de banner estándar del sector (320x50), así como al formato de banner inteligente.

Estos tamaños suelen utilizarse como banners anclados, que normalmente se fijan a la parte superior o inferior de la pantalla.

En el caso de estos banners anclados, la relación de aspecto de los banners adaptativos será similar a la de un anuncio estándar de 320x50, tal como se puede observar en estos tres ejemplos:


Banner de 320x50

Banner adaptativo

Banner inteligente

Además de aprovechar mejor el tamaño de pantalla disponible, los banners adaptativos son superiores a los banners inteligentes por las siguientes razones:

  • Se ajustan a la anchura que se especifica en lugar hacerlo siempre a la anchura de la pantalla completa, lo que te permite tener en cuenta las zonas seguras de los dispositivos iOS y los recortes de la pantalla de los dispositivos Android.

  • Seleccionan la altura óptima en función del dispositivo en que se publican, en vez de utilizar una altura fija en todos los dispositivos independientemente de su tamaño. De esta forma, se mitigan los efectos de fragmentación del dispositivo.

Notas sobre la implementación

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

  • Debes conocer la anchura de la vista donde se colocará el anuncio. Esta medida depende de la anchura del dispositivo y de las zonas seguras correspondientes.
  • El fondo de la vista del anuncio debe ser opaco para poder cumplir las políticas de AdMob cuando se muestren anuncios más pequeños que el espacio publicitario.
  • Debes utilizar la versión más reciente del complemento de Flutter para anuncios de Google para móviles.
  • Por su diseño, los tamaños de banner adaptativo funcionan 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.
  • Cuando uses APIs para crear objetos AdSize para banners adaptativos, el SDK de anuncios de Google para móviles asignará al banner en cuestión un valor optimizado de la altura de anuncio según la anchura que hayas especificado.
  • Hay dos métodos para especificar el tamaño de anuncio de los banners adaptativos: AdSize.getAnchoredAdaptiveBannerAdSize(Orientation orientation, int width) (para solicitar una orientación concreta) y AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(int width) (correspondiente a la orientación que se esté utilizando en un momento dado).
  • El tamaño que se devuelve correspondiente a una anchura determinada en un dispositivo concreto siempre será el mismo. Por tanto, una vez que hayas probado el diseño en un dispositivo, verás que el tamaño del anuncio no cambia.
  • La altura del banner anclado nunca superará el 15 % de la altura del dispositivo (90 píxeles independientes de la densidad) y nunca será inferior a 50 píxeles independientes de la densidad.

Guía de inicio rápido

Sigue estos pasos para implementar fácilmente un banner adaptativo anclado:

  1. Elige el tamaño de anuncio de banner adaptativo que se utilizará para solicitar el banner. Para ello, haz 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. Utiliza los métodos estáticos correspondientes a la clase de tamaño de anuncio, como AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(int width), para obtener un objeto adaptativo AdSize en la orientación que hayas elegido.
  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 como lo harías con un anuncio de banner normal y muéstralo desde un AdWidget, igual que si fuera una vista de anuncio normal.

Ejemplo de código

A continuación se muestra un widget de ejemplo que carga un banner adaptativo anclado para que se ajuste a la anchura de la pantalla:

import 'dart:io';

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

/// This example demonstrates anchored adaptive banner ads.
class AnchoredAdaptiveExample extends StatefulWidget {
  @override
  _AnchoredAdaptiveExampleState createState() =>
      _AnchoredAdaptiveExampleState();
}

class _AnchoredAdaptiveExampleState extends State<AnchoredAdaptiveExample> {
  BannerAd? _anchoredAdaptiveAd;
  bool _isLoaded = false;

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    _loadAd();
  }

  Future<void> _loadAd() async {
    // Get an AnchoredAdaptiveBannerAdSize before loading the ad.
    final AnchoredAdaptiveBannerAdSize? size =
        await AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(
            MediaQuery.of(context).size.width.truncate());

    if (size == null) {
      print('Unable to get height of anchored banner.');
      return;
    }

    _anchoredAdaptiveAd = BannerAd(
      // TODO: replace these test ad units with your own ad unit.
      adUnitId: Platform.isAndroid
          ? 'ca-app-pub-3940256099942544/6300978111'
          : 'ca-app-pub-3940256099942544/2934735716',
      size: size,
      request: AdRequest(),
      listener: BannerAdListener(
        onAdLoaded: (Ad ad) {
          print('$ad loaded: ${ad.responseInfo}');
          setState(() {
            // When the ad is loaded, get the ad size and use it to set
            // the height of the ad container.
            _anchoredAdaptiveAd = ad as BannerAd;
            _isLoaded = true;
          });
        },
        onAdFailedToLoad: (Ad ad, LoadAdError error) {
          print('Anchored adaptive banner failedToLoad: $error');
          ad.dispose();
        },
      ),
    );
    return _anchoredAdaptiveAd!.load();
  }

  @override
  Widget build(BuildContext context) => Scaffold(
        appBar: AppBar(
          title: Text('Anchored adaptive banner example'),
        ),
        body: Center(
          child: Stack(
            alignment: AlignmentDirectional.bottomCenter,
            children: <Widget>[
              ListView.separated(
                  padding: const EdgeInsets.symmetric(horizontal: 16.0),
                  itemBuilder: (context, index) {
                    return Text(
                      'Placeholder text',
                      style: TextStyle(fontSize: 24),
                    );
                  },
                  separatorBuilder: (context, index) {
                    return Container(height: 40);
                  },
                  itemCount: 20),
              if (_anchoredAdaptiveAd != null && _isLoaded)
                Container(
                  color: Colors.green,
                  width: _anchoredAdaptiveAd!.size.width.toDouble(),
                  height: _anchoredAdaptiveAd!.size.height.toDouble(),
                  child: AdWidget(ad: _anchoredAdaptiveAd!),
                )
            ],
          ),
        ),
      );

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

En esta secuencia, se utiliza la función AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize para obtener el tamaño de un banner que se encuentra en una posición anclada en la orientación que tiene la interfaz en ese momento. Si quieres realizar la carga previa de un banner anclado en una orientación determinada, utiliza AdSize.getAnchoredAdaptiveBannerAdSize(Orientation orientation, int width) y envía la orientación que quieras.