Anuncios en forma de banner

Los anuncios de banner son anuncios rectangulares que ocupan una parte del diseño de una aplicación. Permanecen en la pantalla mientras los usuarios interactúan con la app, ya sea anclados en la parte superior o inferior de la pantalla, o intercalados con el contenido a medida que el usuario se desplaza. Los anuncios de banner pueden actualizarse automáticamente después de un período determinado. Consulta Descripción general de los anuncios de banner para obtener más información.

En esta guía, se muestra cómo comenzar a usar los los anuncios de banner adaptable fijos, que maximizan el rendimiento mediante la optimización del tamaño del anuncio para cada dispositivo con el ancho de anuncio que especifiques.

Los anuncios de banner adaptable fijos son anuncios con relación de aspecto fija en lugar de los anuncios de tamaño fijo normales. La relación de aspecto es similar al tamaño estándar de la industria de 320 x 50. Una vez que especifiques el ancho completo disponible, se mostrará un anuncio con una altura óptima para ese ancho. La altura óptima no cambia en las solicitudes del mismo dispositivo y no es necesario que las vistas circundantes se muevan cuando se actualiza el anuncio.

Requisitos previos

• Completa la Guía de introducción.

Probar siempre con anuncios de prueba

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

La manera más fácil de cargar anuncios de prueba es usar nuestro ID de unidad de anuncios de prueba exclusivo para banners de Android:

/6499/example/adaptive-banner

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

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

Cómo agregar AdManagerAdView al diseño

El primer paso para mostrar un banner es colocar AdManagerAdView en el diseño de la Activity o Fragment en la que te gustaría mostrarlo:

Java

private AdSize getAdSize() {
  // Determine the screen width (less decorations) to use for the ad width.
  Display display = getWindowManager().getDefaultDisplay();
  DisplayMetrics outMetrics = new DisplayMetrics();
  display.getMetrics(outMetrics);

  float density = outMetrics.density;

  float adWidthPixels = adContainerView.getWidth();

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

  int adWidth = (int) (adWidthPixels / density);
  return AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(this, adWidth);
}

private void loadBanner() {
  
  // Create a new ad view.
  AdManagerAdView adView = new AdManagerAdView(this);
  adView.setAdSizes(getAdSize());
  adView.setAdUnitId("/6499/example/adaptive-banner");

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

  // Start loading the ad in the background.
  AdManagerAdRequest adRequest = new AdManagerAdRequest.Builder().build();
  adView.loadAd(adRequest);
}

Kotlin

// Determine the screen width (less decorations) to use for the ad width.
// If the ad hasn't been laid out, default to the full screen width.
private val adSize: AdSize
  get() {
    val display = windowManager.defaultDisplay
    val outMetrics = DisplayMetrics()
    display.getMetrics(outMetrics)

    val density = outMetrics.density

    var adWidthPixels = binding.adViewContainer.width.toFloat()
    if (adWidthPixels == 0f) {
      adWidthPixels = outMetrics.widthPixels.toFloat()
    }

    val adWidth = (adWidthPixels / density).toInt()
    return AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(this, adWidth)
  }

private fun loadBanner() {
  
  // Create a new ad view.
  val adView = AdManagerAdView(this)
  adView.adSizes = adSize
  adView.adUnitId = "/6499/example/adaptive-banner"

  // Create an ad request.
  val adRequest = AdManagerAdRequest.Builder().build()

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

Carga un anuncio

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

Punto clave: Realiza todas las llamadas al SDK de anuncios para dispositivos móviles en la conversación principal.

A continuación, se incluye un ejemplo que muestra cómo cargar un anuncio en el método onCreate() de una Activity:

Java

private void loadBanner() {
  // Create a new ad view.
  adView = new AdManagerAdView(this);
  adView.setAdUnitId(AD_UNIT);
  adView.setAdSize(getAdSize());
  
  // Replace ad container with new ad view.
  adContainerView.removeAllViews();
  adContainerView.addView(adView);

  // Start loading the ad in the background.
  AdManagerAdRequest adRequest = new AdManagerAdRequest.Builder().build();
  adView.loadAd(adRequest);
}

Kotlin

private fun loadBanner() {
  // This is an ad unit ID for a test ad. Replace with your own banner ad unit ID.
  adView.adUnitId = "/6499/example/banner"
  adView.setAdSize(adSize)
  
  // Create an ad request.
  val adRequest = AdManagerAdRequest.Builder().build()

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

Si tu anuncio no se carga, no necesitas solicitar otro explícitamente, siempre y cuando hayas configurado tu unidad de anuncios para que se actualice; el SDK de anuncios de Google para dispositivos móviles respeta cualquier frecuencia de actualización que especificaste en la Ad Manager interfaz web. Si no habilitaste la actualización, deberás emitir una solicitud nueva.

Sugerencia: Puedes usar llamadas de carga de anuncios para crear una caché de anuncios precargados antes de que decidas mostrarlos, de modo que los anuncios puedan mostrarse sin latencia cuando sea necesario. Dado que los anuncios vencen después de una hora, debes borrar esta caché y volver a cargarla con anuncios nuevos cada hora.

Listo. Tu app ya está lista para mostrar anuncios de banner.

Eventos de anuncios

Puedes escuchar varios eventos en el ciclo de vida del anuncio, incluida la carga, la impresión de anuncios y los clics, así como los eventos de apertura y cierre de anuncios. Te recomendamos configurar la devolución de llamada antes de cargar el banner.

Java

AdManagerAdView.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

AdManagerAdView.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 reemplazables de AdListener corresponde a un evento en el ciclo de vida de un anuncio.

Métodos anulables
onAdClicked()	Cuando se registra un clic en un anuncio, se invoca el método onAdClicked().
onAdClosed()	El método onAdClosed() se invoca cuando un usuario regresa a la app después de ver la URL de destino de un anuncio. Tu app puede usarla para reanudar actividades suspendidas o realizar cualquier otro trabajo necesario a fin de prepararse para la interacción.
onAdFailedToLoad()	El método onAdFailedToLoad() es el único que incluye un parámetro. El parámetro de error de tipo LoadAdError describe qué error ocurrió. Para obtener más información, consulta la documentación sobre cómo depurar errores de carga de anuncios.
onAdImpression()	Cuando se registra una impresión de un anuncio, se invoca el método onAdImpression().
onAdLoaded()	El método onAdLoaded() se ejecuta cuando termina de cargarse un anuncio. Si quieres retrasar la adición de AdManagerAdView a tu actividad o fragmento hasta que estés seguro de que se cargará un anuncio, por ejemplo, puedes hacerlo aquí.
onAdOpened()	El método onAdOpened() se invoca 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 anuncios de banner, debes habilitar la aceleración de hardware.

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

Cómo habilitar la aceleración de hardware

Si tu app no se comporta correctamente con la aceleración de hardware activada a nivel global, también puedes controlarla para actividades individuales. Si deseas habilitar o inhabilitar la aceleración de hardware, puedes usar el atributo android:hardwareAccelerated para los elementos <application> y <activity> de 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.

Recuento manual de impresiones

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

Puedes enviar pings de impresiones de forma manual a Ad Manager si tienes condiciones especiales en las que se debe registrar una impresión. Para ello, habilita un AdManagerAdRequest para las impresiones manuales antes de cargar un anuncio:

Java

AdManagerAdRequest adRequest = new AdManagerAdRequest.Builder()
    .setManualImpressionsEnabled(true)
    .build();

Kotlin

val adRequest = AdManagerAdRequest.Builder()
    .setManualImpressionsEnabled(true)
    .build()

Cuando determinas que un anuncio se mostró correctamente y se muestra en pantalla, puedes registrar una impresión de forma manual:

Java

AdManagerAdView.recordManualImpression();

Kotlin

AdManagerAdView.recordManualImpression()

Punto clave: Por lo general, las impresiones se activan cuando se invoca la devolución de llamada onAdLoaded(). Solo debes considerar el uso de esta función si deseas registrar impresiones en un momento diferente.

Eventos de aplicaciones

Los eventos de aplicaciones le permiten crear anuncios que pueden enviar mensajes a su código de aplicación. Luego, la app puede realizar acciones en función de estos mensajes.

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

Java

public interface AppEventListener {
  void onAppEvent(String name, String info);
}

Kotlin

interface AppEventListener {
    fun onAppEvent(name: String, info: String)
}

Se llama a void onAppEvent(String name, String info) cuando se produce un evento de app en un anuncio. Tu actividad o cualquier otro objeto puede implementar esta interfaz:

Java

import com.google.android.gms.ads.admanager.*;

public class BannerExample extends Activity implements AppEventListener {
}

Kotlin

import com.google.android.gms.ads.admanager.*

class BannerExample : Activity(), AppEventListener {
}

y, luego, se pasa a AdManagerAdView:

Java

AdManagerAdView.setAppEventListener(this);

Kotlin

AdManagerAdView.appEventListener = this

En este ejemplo, se muestra cómo cambiar el color de fondo de tu app según un evento de la app con nombre de color:

Java

@Override
public void onAppEvent(String name, String info) {
  if ("color".equals(name)) {
    if ("green".equals(info)) {
      // Set background color to green.
    } else if ("blue".equals(info)) {
      // Set background color to blue.
    } else {
      // Set background color to black.
    }
  }
}

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

Y esta es la creatividad correspondiente que envía mensajes de eventos de la 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 apps de Ad Manager para ver una implementación de eventos de apps en la app de demostración de la API.

Java Kotlin

Recursos adicionales

Ejemplos en GitHub

• Ejemplo de anuncios de banner adaptable fijos: Java | Kotlin

• Demostración de funciones avanzadas: Java | Kotlin

Próximos pasos

Banners contraíbles

Los anuncios de banner contraíbles son anuncios de banner que inicialmente se presentan 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 el rendimiento. Consulta el artículo sobre anuncios de banner contraíbles para obtener más información.

Banners adaptables intercalados

Los banners adaptables intercalados son banners más grandes y más altos en comparación con los banners adaptables fijos. Son de altura variable y pueden ser tan altas como la pantalla del dispositivo. Se recomienda usar banners adaptables intercalados en lugar de anuncios de banner adaptable fijos para apps que colocan anuncios de banner en contenido desplazable. Consulta el artículo sobre banners adaptables intercalados para obtener más detalles.

Explora otros temas

• Privacidad del usuario
• Optimiza la inicialización del SDK y la carga de anuncios (beta)