Banners adaptables fijos

Los banners adaptables son la próxima generación de anuncios responsivos, que optimizan el tamaño de los anuncios para cada dispositivo y maximizan el rendimiento. Si se mejoran los banners inteligentes, que solo podían admitir alturas fijas, los banners adaptables les permiten a los desarrolladores especificar el ancho del anuncio y usarlo para determinar el tamaño óptimo del anuncio.

Para elegir el mejor tamaño de anuncio, los banners adaptables usan relaciones de aspecto fijas en lugar de alturas fijas. Esto genera anuncios de banner que ocupan una parte más coherente de la pantalla en todos los dispositivos y proporcionan oportunidades para mejorar el rendimiento.

Cuando trabajes con banners adaptables, ten en cuenta que estos siempre mostrarán un tamaño constante para un dispositivo y un ancho determinados. Una vez que hayas probado tu diseño en un dispositivo determinado, podrás asegurarte de que el tamaño del anuncio no cambiará. Sin embargo, el tamaño de la creatividad del banner puede cambiar en los diferentes dispositivos. Por lo tanto, te recomendamos que te asegures de que tu diseño pueda adaptarse a las variaciones de altura del anuncio. En casos excepcionales, es posible que el tamaño completo no se complete y, en su lugar, se centrará una creatividad de tamaño estándar en este espacio.

Cuándo usar banners adaptables

Los banners adaptables están diseñados para reemplazar de forma directa a los banners estándar de la industria de 320 x 50, así como al formato de banner inteligente al que sustituyen.

Por lo general, estos tamaños de banner se usan como banners fijos, que suelen estar bloqueados en la parte superior o inferior de la pantalla. En el caso de los banners fijos, la relación de aspecto cuando se usan banners adaptables es similar a la de un anuncio estándar de 320 x 50, como se puede ver en estas capturas de pantalla:


Banner de 320 x 50
Banner inteligente
Banner adaptable

Los banners adaptables aprovechan mejor el tamaño de la pantalla disponible. Además, en comparación con un banner inteligente, un banner adaptable es una mejor opción debido a las siguientes razones:

  • Usa un ancho proporcionado en lugar del ancho de pantalla completa, lo que te permite recortar pantallas.

  • Selecciona una altura óptima para el dispositivo específico, en lugar de tener una altura constante en dispositivos de diferentes tamaños, lo que mitiga los efectos de la fragmentación.

Notas de la implementación

Cuando implementes banners adaptables en tu app, ten en cuenta lo siguiente:

  • Debes conocer el ancho de la vista en la que se ubicará el anuncio y debe tener en cuenta el ancho del dispositivo y cualquiercorte de pantalla que se apliquen.

  • Asegúrate de que el fondo de la vista del anuncio sea opaco para satisfacer las políticas deAdMob cuando se publiquen tamaños de anuncios más pequeños que no ocupen el espacio publicitario.

  • Asegúrese de utilizar la versión más reciente del SDK de anuncios de Google para dispositivos móviles. Para la mediación, usa los adaptadores de mediación de la versión más reciente.

  • Los tamaños de banner adaptable están diseñados para funcionar mejor cuando se usa el ancho total disponible. En la mayoría de los casos, este será el ancho completo de la pantalla del dispositivo en uso. Asegúrate de tener en cuenta loscortes de pantalla y lasaplicables.

  • El SDK de anuncios de Google para dispositivos móviles muestra una altura de anuncio optimizada para el ancho determinado en una AdSize.

  • Existen tres métodos a fin de obtener un tamaño de anuncio para banners adaptables: uno para horizontal, uno para vertical y otro para la orientación actual en el momento de la ejecución. Para obtener más información, consulta la documentación completa de la API a continuación.

  • El tamaño que se muestra para un ancho determinado en un dispositivo determinado será siempre el mismo, por lo que una vez que hayas probado tu diseño en un dispositivo determinado, podrás estar seguro de que el tamaño del anuncio no cambiará.

  • La altura del banner fijo nunca supera el 15% de la altura del dispositivo y nunca menos de 50dp.

Inicio rápido

Sigue los pasos que se indican a continuación para implementar un banner fijo adaptable.

  1. Crea el objeto an AdView y establece tu ID de bloque de anuncios.

  2. Obtenga un tamaño de anuncio de banner adaptable. El tamaño que obtengas se usará para solicitar tu banner adaptable. Para obtener el tamaño del anuncio adaptable, asegúrese de lo siguiente:

    1. Obtén el ancho del dispositivo en uso o configura tu propio ancho si no deseas usar el ancho completo de la pantalla.
    2. Usa los métodos estáticos apropiados en la clase de tamaño de anuncio, por ejemplo AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(context, width) , a fin de obtener un objeto AdSize para la orientación elegida.
    3. Configura el tamaño del anuncio en la vista del anuncio de banner; para ello,usa AdView.setAdSize().

    A continuación, se incluye un ejemplo completo.

  3. Crea un objeto de solicitud de anuncio y carga tu banner con el métodoloadAd() en tu vista de anuncio preparada, tal como lo harías con una solicitud de banner normal.

Ejemplo de código

A continuación, se muestra un ejemplo de una actividad que carga un banner adaptable que se adapta al ancho de la pantalla:

Java

import android.graphics.Rect;
import android.os.Bundle;
import android.widget.FrameLayout;
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 com.google.android.gms.ads.initialization.InitializationStatus;
import com.google.android.gms.ads.initialization.OnInitializationCompleteListener;

/** Main Activity. Inflates main activity xml and child fragments. */
public class MyActivity extends AppCompatActivity {

  private static final String AD_UNIT_ID = "ca-app-pub-3940256099942544/6300978111";
  private AdView adView;
  private FrameLayout adContainerView;
  private boolean initialLayoutComplete = false;

  @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);
    adView = new AdView(this);
    adContainerView.addView(adView);
    // Since we're loading the banner based on the adContainerView size, we need
    // to wait until this view is laid out before we can get the width.
    adContainerView.getViewTreeObserver().addOnGlobalLayoutListener(
        new ViewTreeObserver.OnGlobalLayoutListener() {
          @Override
          public void onGlobalLayout() {
            if (!initialLayoutComplete) {
              initialLayoutComplete = true;
              loadBanner();
            }
          }
        });
  }

  private void loadBanner() {
    adView.setAdUnitId(AD_UNIT_ID);
    
    AdSize adSize = getAdSize();
    adView.setAdSize(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."
    AdRequest adRequest =
        new AdRequest.Builder().addTestDevice(AdRequest.DEVICE_ID_EMULATOR)
            .build();

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

  // Determine the screen width (less decorations) to use for the ad width.
  private AdSize getAdSize() {
    WindowMetrics windowMetrics = getWindowManager().getCurrentWindowMetrics();
    Rect bounds = windowMetrics.getBounds();

    float adWidthPixels = adContainerView.getWidth();

    // If the ad hasn't been laid out, default to the full screen width.
    if (adWidthPixels == 0f) {
      adWidthPixels = bounds.width();
    }

    float density = getResources().getDisplayMetrics().density;
    int adWidth = (int) (adWidthPixels / density);

    return AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(this, adWidth);
  }
}

Kotlin

import android.os.Bundle
import android.widget.FrameLayout
import androidx.appcompat.app.AppCompatActivity
import com.google.android.gms.ads.*

/** Main Activity. Inflates main activity xml and child fragments. */
class MyActivity : AppCompatActivity() {

  private lateinit var adView: AdView
  private lateinit var adContainerView: FrameLayout
  private var initialLayoutComplete = false

  // Determine the screen width (less decorations) to use for the ad width.
  private val adSize: AdSize
    get() {
      val windowMetrics = windowManager.currentWindowMetrics
      val bounds = windowMetrics.bounds

      var adWidthPixels = adContainerView.width.toFloat()

      // If the ad hasn't been laid out, default to the full screen width.
      if (adWidthPixels == 0f) {
        adWidthPixels = bounds.width().toFloat()
      }

      val density = resources.displayMetrics.density
      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) {}

    adContainerView = findViewById(R.id.ad_view_container)
    adView = AdView(this)
    adContainerView.addView(adView)
    // Since we're loading the banner based on the adContainerView size, we need
    // to wait until this view is laid out before we can get the width.
    adContainerView.viewTreeObserver.addOnGlobalLayoutListener {
      if (!initialLayoutComplete) {
        initialLayoutComplete = true
        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/6300978111"
  }
}

Aquí, se usa la función AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize a fin de obtener el tamaño de un banner en una posición fija para la orientación actual de la interfaz. Para precargar un banner fijo en una orientación determinada, usa la función correspondiente de AdSize.getPortraitAnchoredAdaptiveBannerAdSize y AdSize.getLandscapeAnchoredAdaptiveBannerAdSize.

Ejemplo completo en GitHub

Descargar Java Descarga Kotlin