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:


Banner de 320x50

Banner inteligente

Banner adaptativo

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 los recortes de la pantalla 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 los recortes de la pantalla.

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

  • 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  dp.

Guía rápida

Sigue estos pasos para implementar un banner ancla adaptativo sencillo:

  1. Crea un objeto an AdView 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 AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(context, width) , para obtener un objeto AdSize adaptativo en la orientación que hayas elegido.
    3. Ajusta el tamaño de anuncio en la vista de anuncio del banner mediante el objeto AdView.setAdSize().

    Más abajo, se incluye un ejemplo completo.

  3. Crea un objeto de solicitud de anuncio y carga tu banner mediante el método loadAd() en 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 describe un ejemplo de una actividad que cargará un banner adaptativo capaz de ajustarse a la anchura de la pantalla:

Java

    import android.content.res.Configuration;
    import android.os.Bundle;
    import android.support.v7.app.AppCompatActivity;
    import android.util.DisplayMetrics;
    import android.view.Display;
    import android.widget.FrameLayout;

    import com.google.android.gms.ads.AdRequest;
    import com.google.android.gms.ads.AdSize;
    import com.google.android.gms.ads.AdView;
    
    import com.google.android.gms.ads.MobileAds;
    /** Main Activity. Inflates main activity xml and child fragments. */
    public class MyActivity extends AppCompatActivity {

      private FrameLayout adContainerView;
      private AdView adView;

      @Override
      protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_my);

        // Initialize the Mobile Ads SDK.
        MobileAds.initialize(this, new OnInitializationCompleteListener() {
            @Override
            public void onInitializationComplete(InitializationStatus initializationStatus) { }
        });

        adContainerView = findViewById(R.id.ad_view_container);
        // Step 1 - Create an AdView and set the ad unit ID on it.
        adView = new AdView(this);
        adView.setAdUnitId(getString(R.string.adaptive_banner_ad_unit_id));
        adContainerView.addView(adView);
        loadBanner();
      }

      private void loadBanner() {
        // Create an ad request. Check your logcat output for the hashed device ID
        // to get test ads on a physical device, e.g.,
        // "Use AdRequest.Builder.addTestDevice("ABCDE0123") to get test ads on this
        // device."
        AdRequest adRequest =
            new AdRequest.Builder().addTestDevice(AdRequest.DEVICE_ID_EMULATOR)
                .build();

        AdSize adSize = getAdSize();
        // Step 4 - Set the adaptive ad size on the ad view.
        adView.setAdSize(adSize);
        

        // Step 5 - Start loading the ad in the background.
        adView.loadAd(adRequest);
      }

      private AdSize getAdSize() {
        // Step 2 - Determine the screen width (less decorations) to use for the ad width.
        Display display = getWindowManager().getDefaultDisplay();
        DisplayMetrics outMetrics = new DisplayMetrics();
        display.getMetrics(outMetrics);

        float widthPixels = outMetrics.widthPixels;
        float density = outMetrics.density;

        int adWidth = (int) (widthPixels / density);

        // Step 3 - Get adaptive ad size and return for setting on the ad view.
        return AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(this, adWidth);
      }
    }
    

Kotlin

    import android.os.Bundle
    import android.util.DisplayMetrics
    import androidx.appcompat.app.AppCompatActivity
    import com.google.android.gms.ads.AdRequest
    import com.google.android.gms.ads.AdSize
    import com.google.android.gms.ads.AdView
    import com.google.android.gms.ads.MobileAds
    import kotlinx.android.synthetic.main.activity_my.*

    /** Main Activity. Inflates main activity xml and child fragments.  */
    class MyActivity : AppCompatActivity() {
      private lateinit var adView: AdView

      // Determine the screen width (less decorations) to use for the ad width.
      // If the ad hasn't been laid out, default to the full screen width.
      private val adSize: AdSize
        get() {
          val display = windowManager.defaultDisplay
          val outMetrics = DisplayMetrics()
          display.getMetrics(outMetrics)

          val density = outMetrics.density

          var adWidthPixels = ad_view_container.width.toFloat()
          if (adWidthPixels == 0f) {
            adWidthPixels = outMetrics.widthPixels.toFloat()
          }

          val adWidth = (adWidthPixels / density).toInt()
          return AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(this, adWidth)
        }

      override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_my)

        // Initialize the Mobile Ads SDK.
        MobileAds.initialize(this) { }

        adView = AdView(this)
        ad_view_container.addView(adView)
        loadBanner()
      }

      private fun loadBanner() {
        adView.adUnitId = ad unit id

        adView.adSize = adSize

        // Create an ad request. Check your logcat output for the hashed device ID to
        // get test ads on a physical device, e.g.,
        // "Use AdRequest.Builder.addTestDevice("ABCDE0123") to get test ads on this device."
        val adRequest = AdRequest
            .Builder()
            .addTestDevice(AdRequest.DEVICE_ID_EMULATOR).build()

        // Start loading the ad in the background.
        adView.loadAd(adRequest)
      }

      companion object {
        // This is an ad unit ID for a test ad. Replace with your own banner ad unit ID.
        private val AD_UNIT_ID = "ca-app-pub-3940256099942544~3347511713"
      }
    }
    

En este ejemplo, se utiliza la función AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize 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 AdSize.getPortraitAnchoredAdaptiveBannerAdSize y AdSize.getLandscapeAnchoredAdaptiveBannerAdSize.

Ejemplo de banner adaptativo en GitHub

Java Kotlin