Banner Ads

Los anuncios de banner ocupan un espacio determinado en la interfaz de una aplicación, ya sea en la parte superior de la pantalla del dispositivo o en la inferior. Permanecen en la pantalla mientras los usuarios interactúan con la aplicación y pueden actualizarse automáticamente después de un periodo de tiempo determinado. Si es la primera vez que utilizas la publicidad para móviles, son un excelente punto de partida.

En esta guía descubrirás cómo integrar anuncios de banner de Ad Manager en aplicaciones Android. Además de fragmentos de código e instrucciones, encontrarás información sobre cómo definir un tamaño adecuado para los banners y enlaces a otros recursos.

Requisitos previos

Añadir el objeto PublisherAdView a un diseño

El primer paso para mostrar un banner es incorporar el objeto PublisherAdView en el diseño de Activity o de Fragment en el que quieras que aparezca. La forma más sencilla de hacerlo es añadirlo al archivo XML del diseño correspondiente. Aquí tienes un ejemplo donde se muestra PublisherAdView incluido en una actividad:

# main_activity.xml
...
  <com.google.android.gms.ads.doubleclick.PublisherAdView
      xmlns:ads="http://schemas.android.com/apk/res-auto"
      android:id="@+id/publisherAdView"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_centerHorizontal="true"
      android:layout_alignParentBottom="true"
      ads:adSize="BANNER"
      ads:adUnitId="/6499/example/banner">
  </com.google.android.gms.ads.doubleclick.PublisherAdView>
...

Ten en cuenta que los siguientes atributos son obligatorios:

  • ads:adSize: especifica el tamaño de anuncio que quieras usar. Si no quieres usar el tamaño estándar definido por la constante, define un tamaño personalizado. Consulta la sección sobre tamaños de banner más abajo para obtener más información.
  • ads:adUnitId: introduce el identificador único asignado al bloque de anuncios de tu aplicación en el que se deben mostrar los anuncios. Si muestras anuncios de banner en distintas actividades, hará falta un bloque de anuncios para cada una de ellas.

También tienes la opción de crear el objeto PublisherAdView de forma programática:

Java

PublisherAdView adView = new PublisherAdView(this);

adView.setAdSizes(AdSize.BANNER);

adView.setAdUnitId("/6499/example/banner");
// TODO: Add adView to your view hierarchy.

Kotlin

val adView = PublisherAdView(this)

adView.adSizes = AdSize.BANNER

adView.adUnitId = "/6499/example/banner"
// TODO: Add adView to your view hierarchy.

Comprobar siempre las aplicaciones con anuncios de prueba

Cuando crees y pruebes tus aplicaciones, utiliza siempre anuncios de prueba en lugar de anuncios reales que se estén publicando. De lo contrario, podríamos suspender tu cuenta.

Para cargar anuncios de prueba, lo más sencillo es usar nuestro ID del bloque de anuncios para banners de Android:

/6499/example/banner

Lo hemos configurado especialmente para devolver anuncios de prueba a cada solicitud; puedes usarlo para programar, probar y depurar tus propias aplicaciones. Solo tienes que sustituirlo por el ID de uno de tus bloques de anuncios antes de publicar la aplicación.

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

Cargar anuncios

Una vez que hayas configurado el objeto PublisherAdView, el siguiente paso es cargar un anuncio. Para ello, se utiliza el método loadAd() en la clase PublisherAdView. Dicho método recibe un parámetro PublisherAdRequest, que contiene información sobre el tiempo de ejecución de una solicitud de anuncio aislada (por ejemplo, datos sobre la segmentación).

En este ejemplo se muestra cómo cargar un anuncio mediante el método onCreate() de un objeto Activity:

MainActivity (fragmento)

Java

package ...

import ...
import com.google.android.gms.ads.doubleclick.PublisherAdRequest;
import com.google.android.gms.ads.doubleclick.PublisherAdView;

public class MainActivity extends AppCompatActivity {
    private PublisherAdView mPublisherAdView;

    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mPublisherAdView = findViewById(R.id.publisherAdView);
        PublisherAdRequest adRequest = new PublisherAdRequest.Builder().build();
        mPublisherAdView.loadAd(adRequest);
    }
}

Kotlin

package ...

import ...
import com.google.android.gms.ads.doubleclick.PublisherAdRequest
import com.google.android.gms.ads.doubleclick.PublisherAdView

class MainActivity : AppCompatActivity() {

    lateinit var mPublisherAdView : PublisherAdView

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        mPublisherAdView = findViewById(R.id.publisherAdView)
        val adRequest = PublisherAdRequest.Builder().build()
        mPublisherAdView.loadAd(adRequest)
    }
}

Eso es todo. La aplicación ya está lista para mostrar anuncios de banner.

Eventos de anuncio

Para personalizar aún más el comportamiento de tus anuncios, puedes añadir varios eventos a su ciclo de vida: carga, apertura, cierre, etc. Para procesar estos eventos, usa la clase AdListener.

Para usar la clase AdListener con un objeto PublisherAdView, solo tienes que llamar al método setAdListener():

Java

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

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

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

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

    @Override
    public void onAdLeftApplication() {
        // Code to be executed when the user has left the app.
    }

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

Kotlin

mPublisherAdView.adListener = object: AdListener() {
    override fun onAdLoaded() {
        // Code to be executed when an ad finishes loading.
    }

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

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

    override fun onAdClicked() {
        // Code to be executed when the user clicks on an ad.
    }

    override fun onAdLeftApplication() {
        // Code to be executed when the user has left the app.
    }

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

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

Métodos anulables
onAdLoaded() El método onAdLoaded() se ejecuta cuando el anuncio termina de cargarse. Por ejemplo, te sirve si quieres que el objeto PublisherAdView no se añada a tu actividad o fragmento hasta que sepas con seguridad que se cargará un anuncio.
onAdFailedToLoad() El método onAdFailedToLoad() es el único que incluye un parámetro. El parámetro de tipo LoadAdError describe qué error se ha producido. Si quieres obtener más información, consulta la documentación sobre cómo depurar errores de carga de anuncios.
onAdOpened() Este método se invoca cuando el usuario toca un anuncio.
onAdLeftApplication() Este método se invoca después de onAdOpened(), cuando un usuario hace clic y abre otra aplicación (como Google Play), y deja en segundo plano la aplicación actual.
onAdClosed() Cuando un usuario regresa a la aplicación después de ver la URL de destino de un anuncio, se invoca este método. La aplicación puede utilizarlo para reanudar las actividades suspendidas o hacer cualquier otra tarea necesaria para prepararse para la interacción.

En esta tabla se muestran los tamaños de banner estándar:

Tamaño en dp (anchura x altura) Descripción Disponibilidad Constante de AdSize
320x50 Banner Teléfonos y tablets BANNER
320x100 Banner grande Teléfonos y tablets LARGE_BANNER
300x250 Rectángulo mediano de IAB Teléfonos y tablets MEDIUM_RECTANGLE
468x60 Banner de tamaño completo de IAB Tablets FULL_BANNER
728x90 Leaderboard de IAB Tablets LEADERBOARD
Anchura proporcionada x Altura adaptativa Banner adaptativo Teléfonos y tablets N/D
Anchura de pantalla x 32|50|90 Banner inteligente Teléfonos y tablets SMART_BANNER
Consulta más información sobre los banners adaptativos, que sustituirán a los banners inteligentes.

Para definir un tamaño de banner personalizado, utiliza la clase AdSize, tal como se muestra a continuación:

Java

AdSize adSize = new AdSize(300, 50);

Kotlin

val adSize = AdSize(300, 50)

Tamaño de anuncio personalizado

A través de Google Ad Manager, puedes servir a una aplicación tanto bloques de anuncios estándar como de cualquier otro tamaño. El tamaño del anuncio (anchura y altura) definido en una solicitud de anuncio debe coincidir con las dimensiones de la vista del anuncio (PublisherAdView) que se muestra en la aplicación.

Ejemplo:

Java

// Define custom AdSize of 250x250 for PublisherAdView

AdSize customAdSize = new AdSize(250, 250);
PublisherAdView adView = new PublisherAdView(this);
adView.setAdSizes(customAdSize);

Kotlin

// Define custom AdSize of 250x250 for PublisherAdView

val customAdSize = AdSize(250, 250)
val adView = PublisherAdView(this)
adView.setAdSizes(customAdSize)

Consulta el ejemplo de anuncios de diversos tamaños en Ad Manager para ver la implementación de un tamaño de anuncio personalizado en la aplicación API Demo de Android.

Varios tamaños de anuncio

Ad Manager permite especificar varios tamaños de anuncio que se pueden servir a PublisherAdView. Antes de implementar esta función en el SDK, crea una línea de pedido dirigida al mismo bloque de anuncios que esté asociado a creatividades de diferentes tamaños.

En tu aplicación, basta con transferir varios parámetros AdSize al objeto setAdSizes:

Java

PublisherAdView adView = new PublisherAdView(this);
adView.setAdSizes(AdSize.BANNER, new AdSize(120, 20), new AdSize(250, 250));

Kotlin

val adView = PublisherAdView(this)
adView.setAdSizes(AdSize.BANNER, AdSize(120, 20), AdSize(250, 250))

Si PublisherAdView cambia de tamaño al actualizarse, el diseño debería poder adaptarse automáticamente al nuevo tamaño.

Si en algún momento necesitas cambiar los tamaños de anuncio admitidos en la aplicación, solo tienes que llamar a setAdSizes con la nueva lista de tamaños.

Java

// Drop support for 120x20 ad size.
adView.setAdSizes(AdSize.BANNER, new AdSize(250, 250));

Kotlin

// Drop support for 120x20 ad size.
adView.setAdSizes(AdSize.BANNER, AdSize(250, 250))

El objeto PublisherAdView asumirá de forma predeterminada el tamaño transferido en el primer parámetro hasta que vuelva el siguiente anuncio.

También puedes especificar varios tamaños de anuncio mediante el atributo ads:adSizes en el archivo XML del diseño:

<com.google.android.gms.ads.doubleclick.PublisherAdView
   android:id="@+id/multiple_ad_sizes_view"
   android:layout_width="wrap_parent"
   android:layout_height="wrap_content"
   android:layout_alignParentBottom="true"
   android:layout_centerHorizontal="true"
   ads:adSizes="BANNER,120x20,250x250"
   ads:adUnitId="ad unit ID" />

Consulta el ejemplo de anuncios de diversos tamaños en Ad Manager para ver la implementación de tamaños de anuncio variados en la aplicación API Demo de Android.

Recuento manual de impresiones

Si deben cumplirse condiciones especiales para registrar una impresión, puedes enviar manualmente pings de impresión a Ad Manager. Para ello, habilita las impresiones manuales en PublisherAdRequest antes de cargar anuncios:

Java

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

Kotlin

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

Cuando determines que un anuncio se ha devuelto correctamente y está en pantalla, puedes registrar una impresión manualmente:

Java

mPublisherAdView.recordManualImpression();

Kotlin

mPublisherAdView.recordManualImpression()

Eventos de aplicación

Con los eventos de aplicación puedes crear anuncios que envíen mensajes al código de la aplicación. De esta forma, la aplicación puede hacer tareas basadas en esos mensajes.

Puedes procesar los eventos de aplicación específicos de Ad Manager mediante el método AppEventListener. Estos eventos se pueden producir en cualquier momento durante el ciclo de vida de los anuncios, incluso antes de que se llame al objeto onAdLoaded().

Java

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

Kotlin

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

Cuando se produce un evento de aplicación en un anuncio, se hace una llamada a void onAppEvent(String name, String info).

Esta interfaz la puede implementar tu actividad o cualquier otro objeto:

Java

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

public class BannerExample extends Activity implements AppEventListener {
}

Kotlin

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

class BannerExample : Activity(), AppEventListener {
}

Después, la interfaz puede transferirse al objeto PublisherAdView:

Java

adView.setAppEventListener(this);

Kotlin

adView.appEventListener = this

En el siguiente ejemplo se muestra cómo cambiar el color de fondo de la aplicación a partir de un evento de aplicación con el nombre de un 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.
            }
        }
    }
}

Esta es la creatividad que envía al procesador mensajes de eventos de aplicación relacionados con el color:

<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 aplicación de Ad Manager para ver una implementación de los eventos de aplicación en la aplicación API Demo de Android.

Additional resources

Samples on GitHub

Mobile Ads Garage video tutorials