Banners adaptativos

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 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 utilizan relaciones de aspecto fijas en lugar de alturas fijas. De esta forma, los anuncios de banner ocupan un espacio más adecuado en los diferentes tamaños de pantalla de los dispositivos y, además, permiten que los anuncios consigan mejores resultados.

A la hora de utilizar banners adaptativos, debes tener en cuenta que siempre devolverán el mismo tamaño para un dispositivo y una anchura determinados; 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 máximo no se rellene por completo; si esto ocurre, se mostrará centrada una creatividad de tamaño estándar.

Cuándo utilizar banners adaptativos

Los banners adaptativos se han ideado como un reemplazo práctico de los banners de 320x50 estándar del sector, así como del formato de banner inteligente al que sustituyen.

En estos tamaños suelen utilizarse los 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 estas capturas de pantalla:

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

  • Se ajustan a la anchura que se especifique en lugar de adaptarse siempre a toda la anchura de la pantalla, lo que te permite tener en cuenta las zonas seguras de los dispositivos.

  • 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 de implementación

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

  • Utiliza la última versión del SDK de anuncios de Google para móviles, así como la última versión de los adaptadores de mediación.
  • 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 corresponde con la anchura completa de la pantalla del dispositivo en cuestión. Recuerda que debes tener en cuenta las zonas seguras.

  • El SDK de anuncios de Google para móviles devuelve una altura de anuncio optimizada para la anchura especificada en el objeto GADAdSize.

  • Hay tres métodos para obtener el tamaño de anuncio de los banners adaptativos: uno para la orientación horizontal, otro para la orientación vertical y otro para la orientación que se esté utilizando en ese momento. Para consultar más información al respecto, lee toda la documentación de las API que aparece más abajo.

  • El tamaño que se devuelve para una anchura determinada en un dispositivo concreto siempre será el mismo. Por tanto, una vez que hayas probado el diseño del anuncio en un dispositivo, su tamaño no cambiará.

  • La altura de los banners anclados nunca supera el 15 % de la altura de los dispositivos ni es inferior a 50  puntos.

Guía rápida

Sigue estos pasos para implementar un banner ancla adaptativo sencillo:

  1. Crea un objeto Un objeto GADBannerView y establece el ID de bloque de anuncios.

  2. Elige el tamaño de anuncio de banner adaptativo que se utilizará para solicitar el banner. Para escogerlo, debes hacer lo siguiente:

    1. Utiliza la anchura del dispositivo que se está usando o define una propia si no quieres utilizar toda la anchura de la pantalla.
    2. Usa los métodos estáticos correspondientes a la clase de tamaño de anuncio, como GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(CGFloat width) , para obtener un objeto GADAdSize adaptativo en la orientación que hayas elegido.
    3. Ajusta el tamaño de anuncio en la vista de anuncio del banner configurando la propiedad adSize en GADBannerView.

    Más abajo, se incluye un ejemplo completo.

  3. Crea un objeto de solicitud de anuncio y carga tu banner mediante el método loadRequesten la vista de anuncio que has preparado, tal como lo harías con una solicitud de banner normal.

Código de muestra

A continuación, se muestra un ejemplo de controlador de vista que cargará y volverá a cargar un banner adaptativo para cualquier versión de iOS, teniendo en cuenta la zona segura y la orientación de la vista:

Swift

    class ViewController: UIViewController {

      @IBOutlet weak var bannerView: GADBannerView!

      override func viewDidLoad() {
        super.viewDidLoad()

        // Step 1 - Create Un objeto GADBannerView (in code or interface builder) and set the
        // ad unit ID on it.
        bannerView.adUnitID = "ca-app-pub-3940256099942544/2435281174"
        bannerView.rootViewController = self
      }

      override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)
        // Note loadBannerAd is called in viewDidAppear as this is the first time that
        // the safe area is known. If safe area is not a concern (e.g., your app is
        // locked in portrait mode), the banner can be loaded in viewWillAppear.
        loadBannerAd()
      }

      override func viewWillTransition(to size: CGSize,
                              with coordinator: UIViewControllerTransitionCoordinator) {
        super.viewWillTransition(to:size, with:coordinator)
        coordinator.animate(alongsideTransition: { _ in
          self.loadBannerAd()
        })
      }

      func loadBannerAd() {
        // Step 2 - Determine the view width to use for the ad width.
        let frame = { () -> CGRect in
          // Here safe area is taken into account, hence the view frame is used
          // after the view has been laid out.
          if #available(iOS 11.0, *) {
            return view.frame.inset(by: view.safeAreaInsets)
          } else {
            return view.frame
          }
        }()
        let viewWidth = frame.size.width

        // Step 3 - Get Adaptive GADAdSize and set the ad view.
        // Here the current interface orientation is used. If the ad is being preloaded
        // for a future orientation change or different orientation, the function for the
        // relevant orientation should be used.
        bannerView.adSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(viewWidth)

        // Step 4 - Create an ad request and load the adaptive banner ad.
        bannerView.load(GADRequest())
      }
    }
    

Objective‑C

    @implementation ViewController

    - (void)viewDidLoad {
      [super viewDidLoad];

      // Step 1 - Create Un objeto GADBannerView (in code or interface builder) and set the
      // ad unit ID on it.
      self.bannerView.adUnitID = @"ca-app-pub-3940256099942544/2435281174";
      self.bannerView.rootViewController = self;
    }

    - (void)viewDidAppear:(BOOL)animated {
      [super viewDidAppear:animated];
      // Note loadBannerAd is called in viewDidAppear as this is the first time that
      // the safe area is known. If safe area is not a concern (e.g., your app is
      // locked in portrait mode), the banner can be loaded in viewWillAppear.
      [self loadBannerAd];
    }

    - (void)viewWillTransitionToSize:(CGSize)size
        withTransitionCoordinator:(id)coordinator {
      [super viewWillTransitionToSize:size withTransitionCoordinator:coordinator];
      [coordinator animateAlongsideTransition:^(id
          _Nonnull context) {
            [self loadBannerAd];
      } completion:nil];
    }

    - (void)loadBannerAd {
      // Step 2 - Determine the view width to use for the ad width.
      CGRect frame = self.view.frame;
      // Here safe area is taken into account, hence the view frame is used after
      // the view has been laid out.
      if (@available(iOS 11.0, *)) {
        frame = UIEdgeInsetsInsetRect(self.view.frame, self.view.safeAreaInsets);
      }
      CGFloat viewWidth = frame.size.width;

      // Step 3 - Get Adaptive GADAdSize and set the ad view.
      // Here the current interface orientation is used. If the ad is being
      // preloaded for a future orientation change or different orientation, the
      // function for the relevant orientation should be used.
      self.bannerView.adSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(viewWidth);

      // Step 4 - Create an ad request and load the adaptive banner ad.
      GADRequest *request = [GADRequest request];
      [self.bannerView loadRequest:request];
    }

    @end
    

En este ejemplo, se utiliza la función GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(CGFloat width) para obtener el tamaño de un banner anclado según la orientación de la interfaz. Para cargar previamente un banner anclado en una orientación determinada, utiliza la función correspondiente de GADPortraitAnchoredAdaptiveBannerAdSizeWithWidth(CGFloat width) y GADLandscapeAnchoredAdaptiveBannerAdSizeWithWidth(CGFloat width).