Banners

Selecciona la plataforma: Android (beta) Nuevo seleccionado 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 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

Siempre haz pruebas con anuncios de prueba

Al crear y verificar 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 los banners en Android:

/21775744923/example/adaptive-banner

Está configurado especialmente para devolver anuncios de prueba en cada solicitud, y puedes usarlo en tus propias apps mientras realizas tus actividades de programación, prueba y depuración. 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 el funcionamiento de los anuncios de prueba de GMA Next-Gen SDK, consulta la sección Habilita los anuncios de prueba.

Crea un objeto AdView

Para mostrar banners, haz lo siguiente:

Kotlin

  1. Crea un objeto AdView.
  2. Agrega el objeto AdView al diseño de tu app.

En el siguiente ejemplo, se crea y se agrega el objeto AdView a un diseño de la app:

private fun createAdView(adViewContainer: FrameLayout, activity: Activity) {
  val adView = AdView(activity)
  adViewContainer.addView(adView)
}

Java

  1. Crea un objeto AdView.
  2. Agrega el objeto AdView al diseño de tu app.

En el siguiente ejemplo, se crea y se agrega el objeto AdView a un diseño de la app:

private void createAdView(FrameLayout adViewContainer, Activity activity) {
  AdView adView = new AdView(activity);
  adViewContainer.addView(adView);
}

Diseño XML

Agrega un elemento AdView a tu archivo XML de diseño:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

  <com.google.android.libraries.ads.mobile.sdk.banner.AdView
      android:id="@+id/adView"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      app:layout_constraintBottom_toBottomOf="parent"
      app:layout_constraintEnd_toEndOf="parent"
      app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

Jetpack Compose

  1. Incluye un elemento AndroidView en la IU de Compose.
  2. Define una variable mutableStateOf<BannerAd?> para contener el anuncio de banner:
// Initialize required variables.
val context = LocalContext.current
var bannerAdState by remember { mutableStateOf<BannerAd?>(null) }

// The AdView is placed at the bottom of the screen.
Column(modifier = modifier.fillMaxSize(), verticalArrangement = Arrangement.Bottom) {
  bannerAdState?.let { bannerAd ->
    Box(modifier = Modifier.fillMaxWidth()) {
      // Display the ad within an AndroidView.
      AndroidView(
        modifier = modifier.wrapContentSize(),
        factory = { bannerAd.getView(requireActivity()) },
      )
    }
  }
}

Carga un anuncio

En el siguiente ejemplo, se carga un anuncio de banner adaptable fijo de 360 dp en un objeto AdView:

Kotlin

private fun loadBannerAd(adView: AdView, activity: Activity) {
  // Get a BannerAdRequest for a 360 wide anchored adaptive banner ad.
  val adSize = AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(activity, 360)
  val adRequest = BannerAdRequest.Builder(AD_UNIT_ID, adSize).build()

  adView.loadAd(
    adRequest,
    object : AdLoadCallback<BannerAd> {
      override fun onAdLoaded(ad: BannerAd) {
        ad.adEventCallback =
          object : BannerAdEventCallback {
            override fun onAdImpression() {
              Log.d(TAG, "Banner ad recorded an impression.")
            }

            override fun onAdClicked() {
              Log.d(TAG, "Banner ad clicked.")
            }
          }
      }

      override fun onAdFailedToLoad(adError: LoadAdError) {
        Log.e(TAG, "Banner ad failed to load: $adError")
      }
    },
  )
}

Java

private void loadBannerAd(AdView adView, Activity activity) {
  // Get a BannerAdRequest for a 360 wide anchored adaptive banner ad.
  AdSize adSize = AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(activity, 360);
  BannerAdRequest adRequest = new BannerAdRequest.Builder(AD_UNIT_ID, adSize).build();

  adView.loadAd(
      adRequest,
      new AdLoadCallback<BannerAd>() {
        @Override
        public void onAdLoaded(@NonNull BannerAd bannerAd) {
          bannerAd.setAdEventCallback(
              new BannerAdEventCallback() {
                @Override
                public void onAdImpression() {
                  Log.d(TAG, "Banner ad recorded an impression.");
                }

                @Override
                public void onAdClicked() {
                  Log.d(TAG, "Banner ad clicked.");
                }
              });
        }

        @Override
        public void onAdFailedToLoad(@NonNull LoadAdError adError) {
          Log.e(TAG, "Banner ad failed to load: " + adError);
        }
      });
}

Jetpack Compose

// Request an anchored adaptive banner with a width of 360.
val adSize = AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(requireContext(), 360)

// Load the ad when the screen is active.
val coroutineScope = rememberCoroutineScope()
val isPreviewMode = LocalInspectionMode.current
LaunchedEffect(context) {
  bannerAdState?.destroy()
  if (!isPreviewMode) {
    coroutineScope.launch {
      when (val result = BannerAd.load(BannerAdRequest.Builder(AD_UNIT_ID, adSize).build())) {
        is AdLoadResult.Success -> {
          bannerAdState = result.ad
        }
        is AdLoadResult.Failure -> {
          showToast("Banner failed to load.")
          Log.w(Constant.TAG, "Banner ad failed to load: $result.error")
        }
      }
    }
  }
}

Actualiza un anuncio

Si configuraste tu unidad de anuncios para que se actualice, no es necesario que solicites otro anuncio cuando uno no se carga. GMA Next-Gen SDK respeta cualquier frecuencia de actualización que hayas especificado en la IU de Ad Manager. Si no habilitaste la actualización, envía una nueva solicitud. Para obtener más detalles sobre la actualización de unidades de anuncios (por ejemplo, cómo establecer una frecuencia de actualización), consulta Frecuencia de actualización de los anuncios en apps para dispositivos móviles.

Libera un recurso del anuncio

Si ya terminaste 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 


// Destroy the ad when the screen is disposed.
DisposableEffect(Unit) { onDispose { bannerAdState?.destroy() } }

Eventos de anuncios

En el ciclo de vida del anuncio, se pueden escuchar varios eventos, incluidos los de impresión y clic en el anuncio, y los de apertura y cierre del anuncio. Se recomienda establecer la devolución de llamada antes de mostrar el banner.

Kotlin

BannerAd.load(
  BannerAdRequest.Builder("/21775744923/example/adaptive-banner", adSize).build(),
  object : AdLoadCallback<BannerAd> {
    override fun onAdLoaded(ad: BannerAd) {
      ad.adEventCallback =
        object : BannerAdEventCallback {
          override fun onAdImpression() {
            // Banner ad recorded an impression.
          }

          override fun onAdClicked() {
            // Banner ad recorded a click.
          }

          override fun onAdShowedFullScreenContent() {
            // Banner ad showed.
          }

          override fun onAdDismissedFullScreenContent() {
            // Banner ad dismissed.
          }

          override fun onAdFailedToShowFullScreenContent(
            fullScreenContentError: FullScreenContentError
          ) {
            // Banner ad failed to show.
          }
        }
    }
    // ...
  }
)

Java

BannerAd.load(
    new BannerAdRequest.Builder("/21775744923/example/adaptive-banner", adSize).build(),
    new AdLoadCallback<BannerAd>() {
      @Override
      public void onAdLoaded(@NonNull BannerAd ad) {
        ad.setAdEventCallback(new BannerAdEventCallback() {
          @Override
          public void onAdImpression() {
            // Banner ad recorded an impression.
          }

          @Override
          public void onAdClicked() {
            // Banner ad recorded a click.
          }

          @Override
          public void onAdShowedFullScreenContent() {
            // Banner ad showed.
          }

          @Override
          public void onAdDismissedFullScreenContent() {
            // Banner ad dismissed.
          }

          @Override
          public void onAdFailedToShowFullScreenContent(
              @NonNull FullScreenContentError fullScreenContentError) {
            // Banner ad failed to show.
          }
        });

        // ...
      }
    });

Devolución de llamada de actualización de anuncios

El objeto BannerAdRefreshCallback controla los eventos de actualización de anuncios si usas la actualización automática para los anuncios de banner. Asegúrate de configurar la devolución de llamada antes de agregar la vista de anuncio a tu jerarquía de vistas. Para obtener detalles sobre la actualización de anuncios, consulta Actualiza un anuncio.

Kotlin

BannerAd.load(
  BannerAdRequest.Builder("/21775744923/example/adaptive-banner", adSize).build(),
  object : AdLoadCallback<BannerAd> {
    override fun onAdLoaded(ad: BannerAd) {
      ad.bannerAdRefreshCallback =
        object : BannerAdRefreshCallback {
          // Set the ad refresh callbacks.
          override fun onAdRefreshed() {
            // Called when the ad refreshes.
          }

          override fun onAdFailedToRefresh(loadAdError: LoadAdError) {
            // Called when the ad fails to refresh.
          }
        }

      // ...
    }
  }
)

Java

BannerAd.load(
    new BannerAdRequest.Builder("/21775744923/example/adaptive-banner", adSize).build(),
    new AdLoadCallback<BannerAd>() {
      @Override
      public void onAdLoaded(@NonNull BannerAd ad) {
        ad.setBannerAdRefreshCallback(
            // Set the ad refresh callbacks.
            new BannerAdRefreshCallback() {
              @Override
              public void onAdRefreshed() {
                // Called when the ad refreshes.
              }

              @Override
              public void onAdFailedToRefresh(@NonNull LoadAdError adError) {
                // Called when the ad fails to refresh.
              }
            });
        // ...
      }
    });

Aceleración de hardware para los anuncios de video

Para que los anuncios de video se muestren correctamente en las vistas de anuncios de banner, la aceleración de hardware tiene que estar habilitada.

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

Habilita la aceleración de hardware

Si tu app no funciona de manera adecuada con la aceleración de hardware activada a nivel global, también puedes controlarla para 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 archivo AndroidManifest.xml. En el siguiente ejemplo, se habilita la aceleración de hardware para la app en su totalidad, 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 Aceleración de hardware para obtener más información sobre las opciones que permiten controlar su funcionamiento. 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 tanto, la actividad en sí debe tener habilitada la aceleración de hardware.

Descarga y ejecuta la app de ejemplo que demuestra el uso de GMA Next-Gen SDK.