Banners adaptables fijos

Los banners adaptables son la nueva generación de anuncios responsivos, ya que maximizan el rendimiento mediante la optimización del tamaño del anuncio en cada dispositivo. Las mejoras en los banners inteligentes, que solo admiten alturas fijas, 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. Como resultado, los anuncios en forma de banner ocupan una parte más coherente de la pantalla en todos los dispositivos y ofrecen 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 el diseño en un dispositivo determinado, podrás estar seguro de que el tamaño del anuncio no cambiará. Sin embargo, el tamaño de la creatividad del banner puede cambiar según el dispositivo. Por lo tanto, te recomendamos que te asegures de que tu diseño pueda adaptarse a variaciones en la altura del anuncio. En casos excepcionales, es posible que no se rellene el tamaño adaptable completo y que una creatividad de tamaño estándar se centre en este espacio publicitario.

Cuándo usar banners adaptables

Los banners adaptables están diseñados para reemplazar de forma directa el tamaño de banner estándar de la industria de 320 x 50 y el formato de banner inteligente 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. Para estos 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 pantalla disponible. Además, en comparación con un banner inteligente, un banner adaptable es una mejor opción por los siguientes motivos:

  • Utiliza un ancho proporcionado en lugar del ancho de pantalla completa, lo que te permite tener en cuenta los cortes de pantalla.

  • 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 del dispositivo.

Notas de la implementación

Cuando implementes banners adaptables en tu app, ten en cuenta los siguientes puntos:

  • Debes conocer el ancho de la vista en la que se ubicará el anuncio, y esto se debe tener en cuenta el ancho del dispositivo y los cortes de pantalla que correspondan.
  • Cuando se publiquen tamaños de anuncios más pequeños que no ocupen el espacio publicitario, asegúrate de que el fondo de vista de anuncio sea opaco para cumplir con las políticas deAdMob .

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

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

  • El SDK de anuncios de Google para dispositivos móviles muestra una altura de anuncio optimizada para el ancho determinado en un 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 asegurarte de que el tamaño del anuncio no cambiará.

  • La altura del banner fijo nunca debe superar el 15% de la altura del dispositivo y nunca debe ser inferior a 50dp.

Inicio rápido

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

  1. Crea el objeto an AdView y configura el ID de tu unidad 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 de anuncio adaptable, asegúrese de hacer lo siguiente:

    1. Usa el ancho del dispositivo o configura uno propio si no quieres usar el ancho completo de la pantalla.
    2. Usa los métodos estáticos adecuados en la clase de tamaño del anuncio, como AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(context, width) a fin de obtener un objetoAdSize adaptable para la orientación elegida.
    3. Establece el tamaño del anuncio en la vista de anuncio en forma de banner. Para ello, haz lo siguientecon 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étodo loadAd() en la vista de anuncio preparada, tal como lo harías con una solicitud de banner normal.

Código de muestra

El siguiente es un ejemplo de una actividad que cargará un banner adaptable para que se adapte 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 anclada para la orientación actual de la interfaz. Para precargar un banner fijo en una orientación determinada, usa la función relevante de AdSize.getPortraitAnchoredAdaptiveBannerAdSize y AdSize.getLandscapeAnchoredAdaptiveBannerAdSize.

Ejemplo completo en GitHub

Descargar Java Descargar Kotlin