Banners adaptativos

Los banners adaptativos son la nueva generación de anuncios adaptables y permiten optimizar 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 de las medidas de anchura y de altura 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.

Requisitos previos

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 opaca 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 para Unity de anuncios de Google para móviles. En cuanto a la mediación, debes usar la última versión de los adaptadores de mediación.
  • Los tamaños de banner adaptativos están pensados para funcionar mejor cuando se utiliza la anchura completa 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 tres métodos para especificar el tamaño de anuncio de los banners adaptativos: AdSize.GetLandscapeAnchoredAdaptiveBannerAdSizeWithWidth (orientación horizontal), AdSize.GetPortraitAnchoredAdaptiveBannerAdSizeWithWidth (orientación vertical) y AdSize.GetCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth (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.
  • En el caso de los banners de anchura completa, puedes usar la marca AdSize.FullWidth en lugar de proporcionar una anchura concreta.

Guía rápida

Sigue estos pasos para implementar un banner ancla adaptativo sencillo:

  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. Dado que las API de Unity, como Screen.width, devuelven el total de píxeles, tendrás que dividir el resultado por la escala del dispositivo (que se puede obtener con MobileAds.Utils.GetDeviceScale()).
    2. Usa la marca AdSize.FullWidth con los banners de anchura completa.
    3. Utiliza los métodos estáticos correspondientes a la clase de tamaño de anuncio, como AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(width), para obtener un objeto adaptativo AdSize en la orientación que hayas elegido.
  2. Crea un objeto BannerView con el ID del bloque de anuncios, el tamaño adaptativo y la posición pertinente para tu anuncio.
  3. Crea un objeto de solicitud de anuncio y carga el banner mediante el método LoadAd() en la vista de anuncio que hayas preparado, tal como lo harías con una solicitud de banner normal.

Ejemplo de código

Más abajo se muestra una secuencia de comandos de ejemplo que permite cargar y volver a cargar un banner adaptativo para ajustarlo a la anchura de la pantalla, y que tiene en cuenta la zona segura:

using UnityEngine;
using System;
using GoogleMobileAds.Api;

public class NewMonoBehaviour : MonoBehaviour
{
    private BannerView bannerView;

    // Use this for initialization
    void Start()
    {
        RequestBanner();
    }

    public void OnGUI()
    {
        GUI.skin.label.fontSize = 60;
        Rect textOutputRect = new Rect(
          0.15f * Screen.width,
          0.25f * Screen.height,
          0.7f * Screen.width,
          0.3f * Screen.height);
        GUI.Label(textOutputRect, "Adaptive Banner Example");
    }

    private void RequestBanner()
    {
        // These ad units are configured to always serve test ads.
        #if UNITY_EDITOR
            string adUnitId = "unused";
        #elif UNITY_ANDROID
            string adUnitId = "ca-app-pub-3212738706492790/6113697308";
        #elif UNITY_IPHONE
            string adUnitId = "ca-app-pub-3212738706492790/5381898163";
        #else
            string adUnitId = "unexpected_platform";
        #endif

        // Clean up banner ad before creating a new one.
        if (this.bannerView != null)
        {
            this.bannerView.Destroy();
        }

        AdSize adaptiveSize =
                AdSize.GetCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(AdSize.FullWidth);

        this.bannerView = new BannerView(adUnitId, adaptiveSize, AdPosition.Bottom);

        // Register for ad events.
        this.bannerView.OnAdLoaded += this.HandleAdLoaded;
        this.bannerView.OnAdFailedToLoad += this.HandleAdFailedToLoad;
        this.bannerView.OnAdOpening += this.HandleAdOpened;
        this.bannerView.OnAdClosed += this.HandleAdClosed;
        this.bannerView.OnAdLeavingApplication += this.HandleAdLeftApplication;

        AdRequest adRequest = new AdRequest.Builder()
            .AddTestDevice(AdRequest.TestDeviceSimulator)
            .AddTestDevice("0123456789ABCDEF0123456789ABCDEF")
            .Build();

        // Load a banner ad.
        this.bannerView.LoadAd(adRequest);
    }

    #region Banner callback handlers

    public void HandleAdLoaded(object sender, EventArgs args)
    {
        MonoBehaviour.print("HandleAdLoaded event received");
        MonoBehaviour.print(String.Format("Ad Height: {0}, width: {1}",
            this.bannerView.GetHeightInPixels(),
            this.bannerView.GetWidthInPixels()));
    }

    public void HandleAdFailedToLoad(object sender, AdFailedToLoadEventArgs args)
    {
        MonoBehaviour.print(
                "HandleFailedToReceiveAd event received with message: " + args.Message);
    }

    public void HandleAdOpened(object sender, EventArgs args)
    {
        MonoBehaviour.print("HandleAdOpened event received");
    }

    public void HandleAdClosed(object sender, EventArgs args)
    {
        MonoBehaviour.print("HandleAdClosed event received");
    }

    public void HandleAdLeftApplication(object sender, EventArgs args)
    {
        MonoBehaviour.print("HandleAdLeftApplication event received");
    }

    #endregion
}

En esta secuencia, se utiliza la función AdSize.GetCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth 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. Para cargar previamente un banner anclado en una orientación determinada, utiliza la función correspondiente de AdSize.GetPortraitAnchoredAdaptiveBannerAdSizeWithWidth y AdSize.GetLandscapeAnchoredAdaptiveBannerAdSizeWithWidth.