Anuncios en forma de banner

Selecciona la plataforma: Android iOS Unity Flutter

Los anuncios de banner son anuncios rectangulares que ocupan una parte del diseño de una app. Los banners adaptables fijos son anuncios con una relación de aspecto fija que permanecen en la pantalla mientras los usuarios interactúan con la app, ya sea fijos en la parte superior o inferior de la pantalla.

En esta guía, se explica cómo cargar un anuncio de banner adaptable fijo en una app para Android.

Requisitos previos

  • Completa la guía de introducción.
  • Opcional: Para ver un ejemplo de implementación de anuncios de banner, selecciona una de las siguientes apps de ejemplo:

Realiza siempre pruebas con anuncios de prueba

Cuando compiles y pruebes tus apps, asegúrate de usar anuncios de prueba en vez de anuncios activos en fase de producción. De lo contrario, podría suspenderse tu cuenta.

La forma más sencilla de cargar anuncios de prueba es usar nuestro ID de unidad de anuncios de prueba exclusivo para banners de Android:

ca-app-pub-3940256099942544/9214589741

Se configuró especialmente para devolver anuncios de prueba en cada solicitud, y puedes usarlo en tus propias apps mientras codificas, pruebas y depuras. Solo asegúrate de reemplazarlo por tu propio ID de unidad de anuncios antes de publicar tu app.

Para obtener más información sobre cómo funcionan los anuncios de prueba del SDK de anuncios de Google para dispositivos móviles, consulta Cómo habilitar anuncios de prueba.

Define la vista del anuncio

Diseño XML

Agrega una vista a tu archivo XML de diseño para que sirva como contenedor de tu anuncio de banner adaptable anclado:

<!-- Ad view container that fills the width of the screen and adjusts its
    height to the content of the ad. -->
<FrameLayout
        android:id="@+id/ad_view_container"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_alignParentBottom="true" />

Jetpack Compose

  1. En el primer paso, incluye el módulo JetpackComposeDemo/compose-util. Este módulo incluye asistentes para componer el objeto AdView y los recursos.

  2. En el segundo paso, crea una clase BannerAd con el módulo compose-util:


// Place the ad view at the bottom of the screen.
Column(modifier = modifier.fillMaxSize(), verticalArrangement = Arrangement.Bottom) {
  Box(modifier = modifier.fillMaxWidth()) { BannerAd(adView, modifier) }
}

Configura el tamaño del anuncio

Configura AdSize en un tipo de banner adaptable fijo con un ancho especificado:

Java

// Request an anchored adaptive banner with a width of 360.
adView.setAdSize(AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(this, 360));

Kotlin

// Request an anchored adaptive banner with a width of 360.
adView.setAdSize(AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(this, 360))

Jetpack Compose


// Set the adaptive banner ad size with a given width.
val adSize = AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(LocalContext.current, 360)
adView.setAdSize(adSize)

Agrega AdView al diseño

Crea un AdView con el tamaño del anuncio para agregarlo al diseño de tu app:

Java


// Create a new ad view.
adView = new AdView(this);
adView.setAdUnitId(AD_UNIT_ID);
// Request an anchored adaptive banner with a width of 360.
adView.setAdSize(AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(this, 360));

// Replace ad container with new ad view.
adContainerView.removeAllViews();
adContainerView.addView(adView);

Kotlin


// Create a new ad view.
val adView = AdView(this)
adView.adUnitId = AD_UNIT_ID
// Request an anchored adaptive banner with a width of 360.
adView.setAdSize(AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(this, 360))
this.adView = adView

// Replace ad container with new ad view.
binding.adViewContainer.removeAllViews()
binding.adViewContainer.addView(adView)

Jetpack Compose


val adView = remember { AdView(context) }

// Setup and load the adview.
// Set the unique ID for this specific ad unit.
adView.adUnitId = BANNER_AD_UNIT_ID

// Set the adaptive banner ad size with a given width.
val adSize = AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(LocalContext.current, 360)
adView.setAdSize(adSize)

// Place the ad view at the bottom of the screen.
Column(modifier = modifier.fillMaxSize(), verticalArrangement = Arrangement.Bottom) {
  Box(modifier = modifier.fillMaxWidth()) { BannerAd(adView, modifier) }
}

Carga un anuncio

Una vez que el objeto AdView esté en su lugar, el siguiente paso es cargar un anuncio. Para ello, se usa el método loadAd() en la clase AdView. Toma un parámetro AdRequest, que contiene información del tiempo de ejecución, como la información de segmentación, sobre una sola solicitud de anuncio.

Este es un ejemplo que muestra cómo cargar un anuncio:

Java

AdManagerAdRequest adRequest = new AdManagerAdRequest.Builder().build();
adView.loadAd(adRequest);

Kotlin

val adRequest = AdRequest.Builder().build()
adView.loadAd(adRequest)

Si la operación se realiza correctamente, tu app estará lista para mostrar anuncios de banner.

Actualiza un anuncio

Si configuraste tu unidad de anuncios para que se actualice, no es necesario que solicites otro anuncio cuando no se cargue. El SDK de anuncios de Google para dispositivos móviles respeta cualquier frecuencia de actualización que hayas especificado en la IU de AdMob. Si no habilitaste la actualización, envía una nueva solicitud. Para obtener más detalles sobre la actualización de bloques de anuncios, como la configuración de una frecuencia de actualización, consulta Cómo usar la actualización automática para los anuncios de banner.

Cómo liberar un recurso del anuncio

Cuando termines de usar un anuncio de banner, puedes liberar sus recursos.

Para liberar el recurso del anuncio, quita el anuncio de la jerarquía de vistas y descarta todas sus referencias:

Kotlin

// Remove banner from view hierarchy.
val parentView = adView?.parent
if (parentView is ViewGroup) {
  parentView.removeView(adView)
}

// Destroy the banner ad resources.
adView?.destroy()

// Drop reference to the banner ad.
adView = null

Java

// Remove banner from view hierarchy.
if (adView.getParent() instanceof ViewGroup) {
  ((ViewGroup) adView.getParent()).removeView(adView);
}
// Destroy the banner ad resources.
adView.destroy();
// Drop reference to the banner ad.
adView = null;

Jetpack Compose


DisposableEffect(Unit) {
  // Destroy the AdView to prevent memory leaks when the screen is disposed.
  onDispose { adView.destroy() }
}

Eventos de anuncios

Puedes escuchar varios eventos en el ciclo de vida del anuncio, incluidos los eventos de carga, impresión y clic en el anuncio, así como los eventos de apertura y cierre del anuncio. Se recomienda establecer la devolución de llamada antes de cargar el banner.

Java

adView.setAdListener(new AdListener() {
    @Override
    public void onAdClicked() {
      // Code to be executed when the user clicks on an ad.
    }

    @Override
    public void onAdClosed() {
      // Code to be executed when the user is about to return
      // to the app after tapping on an ad.
    }

    @Override
    public void onAdFailedToLoad(LoadAdError adError) {
      // Code to be executed when an ad request fails.
    }

    @Override
    public void onAdImpression() {
      // Code to be executed when an impression is recorded
      // for an ad.
    }

    @Override
    public void onAdLoaded() {
      // Code to be executed when an ad finishes loading.
    }

    @Override
    public void onAdOpened() {
      // Code to be executed when an ad opens an overlay that
      // covers the screen.
    }
});

Kotlin

adView.adListener = object: AdListener() {
    override fun onAdClicked() {
      // Code to be executed when the user clicks on an ad.
    }

    override fun onAdClosed() {
      // Code to be executed when the user is about to return
      // to the app after tapping on an ad.
    }

    override fun onAdFailedToLoad(adError : LoadAdError) {
      // Code to be executed when an ad request fails.
    }

    override fun onAdImpression() {
      // Code to be executed when an impression is recorded
      // for an ad.
    }

    override fun onAdLoaded() {
      // Code to be executed when an ad finishes loading.
    }

    override fun onAdOpened() {
      // Code to be executed when an ad opens an overlay that
      // covers the screen.
    }
}

Cada uno de los métodos anulables en AdListener corresponde a un evento en el ciclo de vida de un anuncio.

Métodos anulables
onAdClicked() Se invoca el método onAdClicked() cuando se registra un clic en un anuncio.
onAdClosed() Se invoca el método onAdClosed() cuando un usuario regresa a la app después de ver la URL de destino de un anuncio. Tu app puede usarlo para reanudar actividades suspendidas o realizar cualquier otro trabajo necesario para prepararse para la interacción. Consulta el ejemplo de AdListener de AdMob para ver una implementación de los métodos de escucha de anuncios en la app de ejemplo de la API de Android.
onAdFailedToLoad() El método onAdFailedToLoad() es el único que incluye un parámetro. El parámetro de error de tipo LoadAdError describe qué error se produjo. Para obtener más información, consulta la documentación sobre cómo depurar errores de carga de anuncios.
onAdImpression() Se invoca el método onAdImpression() cuando se registra una impresión para un anuncio.
onAdLoaded() El método onAdLoaded() se ejecuta cuando un anuncio termina de cargarse. Si deseas retrasar la adición de AdView a tu actividad o fragmento hasta que tengas la certeza de que se cargará un anuncio, por ejemplo, puedes hacerlo aquí.
onAdOpened() Se invoca el método onAdOpened() cuando un anuncio abre una superposición que cubre la pantalla.

Aceleración de hardware para anuncios de video

Para que los anuncios de video se muestren correctamente en las vistas de tus anuncios de banner, debes habilitar la aceleración por hardware.

La aceleración de hardware está habilitada de forma predeterminada, pero algunas apps pueden inhabilitarla. Si esto se aplica a tu app, te recomendamos que habilites la aceleración por hardware para las clases Activity que usan anuncios.

Cómo habilitar la aceleración de hardware

Si tu app no se comporta de manera adecuada con la aceleración de hardware activada globalmente, también puedes controlarla en actividades individuales. Para habilitar o inhabilitar la aceleración de hardware, puedes usar el atributo android:hardwareAccelerated para los elementos <application> y <activity> en tu AndroidManifest.xml. En el siguiente ejemplo, se habilita la aceleración de hardware para toda la app, pero se inhabilita para una actividad:

<application android:hardwareAccelerated="true">
    <!-- For activities that use ads, hardwareAcceleration should be true. -->
    <activity android:hardwareAccelerated="true" />
    <!-- For activities that don't use ads, hardwareAcceleration can be false. -->
    <activity android:hardwareAccelerated="false" />
</application>

Consulta la guía de aceleración de hardware para obtener más información sobre las opciones para controlar la aceleración de hardware. Ten en cuenta que las vistas de anuncios individuales no se pueden habilitar para la aceleración de hardware si la actividad está inhabilitada, por lo que la actividad en sí debe tener habilitada la aceleración de hardware.

Próximos pasos

Banners contraíbles

Los anuncios de banner contraíbles son anuncios de banner que se presentan inicialmente como una superposición más grande, con un botón para contraer el anuncio a un tamaño más pequeño. Considera usarla para optimizar aún más tu rendimiento. Consulta anuncios de banner contraíbles para obtener más detalles.

Banners adaptables intercalados

Los banners adaptables intercalados son más grandes y altos que los banners adaptables fijos. Tienen una altura variable y pueden ser tan altos como la pantalla del dispositivo. Se recomiendan los banners adaptables intercalados en lugar de los anuncios de banner adaptable fijos para las apps que colocan anuncios de banner en contenido por el que es posible desplazarse. Consulta Banners adaptativos intercalados para obtener más detalles.

Explora otros temas