Banners

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 fijos adaptables son anuncios que tienen una relación de aspecto invariable y permanecen en la pantalla, anclados en la parte superior o inferior, mientras los usuarios interactúan con la app.

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

Requisitos previos

  • Completar la guía de introducción
  • [Opcional] Seleccionar una de las siguientes apps de ejemplo para ver una implementación de muestra de anuncios de banner:

Siempre haz pruebas con anuncios de prueba

Al compilar 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 durante las tareas de programación, prueba y depuración. Solo asegúrate de reemplazarlo por tu propio ID de unidad de anuncios antes de publicar la app.

Para obtener más información sobre el funcionamiento de los anuncios de prueba del SDK de anuncios de Google para dispositivos móviles, consulta la sección Habilita los anuncios de prueba.

Define la vista de 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. Incluye el módulo JetpackComposeDemo/compose-util. Este módulo incluye asistentes para componer el objeto AdView y los recursos.

  2. Compón una clase BannerAd a partir del 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()) { AdManagerBannerAd(adView, modifier) }
}
AdManagerBannerScreen.kt

Establece el tamaño del anuncio

Establece AdSize en un tipo de banner adaptable anclado con un ancho especificado:

Java

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

Kotlin

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

Jetpack Compose


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

Agrega AdManagerAdView al diseño

Crea una clase AdManagerAdView con el tamaño del anuncio para agregarla al diseño de tu app:

Java


// Create a new ad view.
adView = new AdManagerAdView(this);
adView.setAdUnitId(AD_UNIT);
// 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);
MyActivity.java

Kotlin


// Create a new ad view.
val adView = AdManagerAdView(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)
MyActivity.kt

Jetpack Compose


val adView = remember { AdManagerAdView(context) }

// Setup and load the adview.
// Set the unique ID for this specific ad unit.
adView.adUnitId = ADMANANGER_ADAPTIVE_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()) { AdManagerBannerAd(adView, modifier) }
}
AdManagerBannerScreen.kt

Carga un anuncio

Una vez implementada la clase AdManagerAdView, el siguiente paso es cargar un anuncio. Esto se hace con el método loadAd() en la clase AdManagerAdView. Este toma un parámetro AdManagerAdRequest, que contiene información del tiempo de ejecución, como la información de segmentación, sobre una solicitud de anuncio en particular.

Este es un ejemplo sobre cómo cargar un anuncio:

Java

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

Kotlin

val adRequest = AdManagerAdRequest.Builder().build()
adView.loadAd(adRequest)
MyActivity.kt

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 uno no se carga. El SDK de anuncios de Google para dispositivos móviles 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, la forma de 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

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:

Java

public void destroyBanner() {
  // Remove banner from view hierarchy.
  if (adView != null) {
    View parentView = (View) adView.getParent();
    if (parentView instanceof ViewGroup) {
      ((ViewGroup) parentView).removeView(adView);
    }

    // Destroy the banner ad resources.
    adView.destroy();
  }

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

BannerSnippets.java

Kotlin

fun destroyBanner() {
  // 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
}

BannerSnippets.kt

Eventos de anuncios

Puedes escuchar varios eventos en el ciclo de vida del anuncio, incluidos los eventos de carga, impresión y clic del 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

if (adView != null) {
  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(@NonNull 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.
        }
      });
}
BannerSnippets.java

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.
    }
  }
BannerSnippets.kt

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

Métodos anulables
onAdClicked() El método onAdClicked() se invoca 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 otra operación necesaria para prepararse para la interacción.
onAdFailedToLoad() El método onAdFailedToLoad() es el único que incluye un parámetro. El parámetro de error del tipo LoadAdError describe qué error se produjo. Para obtener más información, consulta la documentación de depuración de 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 AdManagerAdView 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 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 de 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.

Recuento manual de impresiones

El recuento manual de impresiones solo es compatible con las campañas propias y de venta directa con creatividades cuyo tráfico se realizó directamente en Ad Manager. No se debe usar para el reabastecimiento ni para los anuncios de redes de terceros. Para obtener más detalles, consulta Recuento de impresiones y clics.

Puedes enviar pings de impresiones manualmente a Ad Manager si tienes condiciones especiales para registrar una impresión:

Java

if (adManagerAdView != null) {
  adManagerAdView.setManualImpressionsEnabled(true);
}
BannerSnippets.java

Kotlin

adManagerAdView?.setManualImpressionsEnabled(true)
BannerSnippets.kt

Cuando determines que un anuncio se devolvió correctamente y se muestra en la pantalla, puedes registrar manualmente una impresión:

Java

if (adManagerAdView != null) {
  adManagerAdView.recordManualImpression();
}
BannerSnippets.java

Kotlin

adManagerAdView?.recordManualImpression()
BannerSnippets.kt

Eventos de aplicaciones

Los eventos de aplicaciones te permiten crear anuncios que pueden enviar mensajes al código de su aplicación. Esta, a su vez, puede tomar medidas en función de los mensajes.

Puedes escuchar eventos de apps específicos de Ad Manager con AppEventListener. Estos eventos pueden ocurrir en cualquier momento durante el ciclo de vida del anuncio, incluso antes de que se llame a onAdLoaded().

Configura el AppEventListener en tu AdManagerAdView:

Java

if (adManagerAdView != null) {
  adManagerAdView.setAppEventListener(this);
}
BannerSnippets.java

Kotlin

adManagerAdView?.appEventListener = this
BannerSnippets.kt

A continuación, se incluye un ejemplo que muestra cómo cambiar el color de fondo de tu app según un evento de la app con el nombre color:

Java

@Override
public void onAppEvent(@NonNull String name, @NonNull String info) {
  if (name.equals("color")) {
    switch (info) {
      case "green":
        // Set background color to green.
        break;
      case "blue":
        // Set background color to blue.
        break;
      default:
        // Set background color to black.
        break;
    }
  }
}
BannerSnippets.java

Kotlin

override fun onAppEvent(name: String, info: String) {
  if (name == "color") {
    when (info) {
      "green" -> {
        // Set background color to green.
      }
      "blue" -> {
        // Set background color to blue.
      }
      else -> {
        // Set background color to black.
      }
    }
  }
}
BannerSnippets.kt

Y aquí se muestra la creatividad correspondiente que envía mensajes de eventos de app de color al objeto de escucha:

<html>
<head>
  <script src="//www.gstatic.com/afma/api/v1/google_mobile_app_ads.js"></script>
  <script>
    document.addEventListener("DOMContentLoaded", function() {
      // Send a color=green event when ad loads.
      admob.events.dispatchAppEvent("color", "green");

      document.getElementById("ad").addEventListener("click", function() {
        // Send a color=blue event when ad is clicked.
        admob.events.dispatchAppEvent("color", "blue");
      });
    });
  </script>
  <style>
    #ad {
      width: 320px;
      height: 50px;
      top: 0px;
      left: 0px;
      font-size: 24pt;
      font-weight: bold;
      position: absolute;
      background: black;
      color: white;
      text-align: center;
    }
  </style>
</head>
<body>
  <div id="ad">Carpe diem!</div>
</body>
</html>

Consulta el ejemplo de eventos de la app de Ad Manager para ver una implementación de los eventos de la app en la app de demostración de la API.

Java Kotlin JetpackCompose

Próximos pasos

Banners contraíbles

Los anuncios de banner contraíbles 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 usarlo para optimizar aún más tu rendimiento. Consulta la sección sobre 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 llegar a ocupar toda la pantalla del dispositivo en sentido vertical. Para las apps que colocan anuncios de banner en contenido que se puede desplazar, se recomiendan los banners adaptables intercalados en lugar de los anuncios de banner adaptables fijos. Consulta la sección sobre banners adaptables intercalados para obtener más detalles.

Explora otros temas