Banner Ads

Los anuncios de banner son anuncios rectangulares de imagen o de texto que ocupan un lugar en la interfaz de una aplicación. Permanecen en pantalla mientras los usuarios interactúan con la aplicación y pueden actualizarse automáticamente después de un cierto periodo de tiempo. Si es la primera vez que utilizas la publicidad para móviles, son un excelente punto de partida.

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

Requisitos previos

Añadir PublisherAdView a un diseño

Para mostrar un banner, primero hay que colocar PublisherAdView en el diseño de Activity o de Fragment en el que quieras mostrarlo. La forma más sencilla de hacerlo es añadirlo al archivo XML de diseño correspondiente. En este ejemplo, se muestra PublisherAdView al final de Activity:

main_activity.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_height="match_parent"
        android:layout_width="match_parent"
        android:paddingLeft="@dimen/activity_horizontal_margin"
        android:paddingRight="@dimen/activity_horizontal_margin"
        android:paddingTop="@dimen/activity_vertical_margin"
        android:paddingBottom="@dimen/activity_vertical_margin"
        tools:context=".MainActivity">

        <TextView android:text="@string/hello_world"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

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

</RelativeLayout>

Los atributos obligatorios son los siguientes:

  • ads:adSize: como valor, dale 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 en su lugar. Consulta la sección sobre el tamaño del banner más abajo para obtener más información.
  • ads:adUnitId: como valor, dale 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.

También puedes crear 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 de producción 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, y 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.

Si quieres 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 PublisherAdView, el siguiente paso es cargar un anuncio. Para ello, usa el método loadAd() en la clase PublisherAdView. Recibe un parámetro PublisherAdRequest, que contiene datos sobre el tiempo en ejecución de una única solicitud de anuncio (por ejemplo, información sobre la segmentación).

En este ejemplo se muestra cómo cargar un anuncio en el método onCreate() de una 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 anuncios

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 detectarlos, usa la clase AdListener.

Para usar AdListener con un objeto PublisherAdView, solo tienes que realizar una llamada 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(int errorCode) {
        // 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(errorCode : Int) {
        // 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 se termina de cargar. Por ejemplo, si quieres retrasar la incorporación de PublisherAdView a tu actividad o fragmento hasta que sepas con seguridad que se cargará un anuncio, puedes hacerlo aquí.
onAdFailedToLoad() El método onAdFailedToLoad() es el único que incluye un parámetro. El parámetro errorCode indica qué tipo de fallo se ha producido. Los valores posibles se definen como constantes en la clase PublisherAdRequest:
  • ERROR_CODE_INTERNAL_ERROR: se ha producido un problema en los sistemas internos (por ejemplo, el servidor de anuncios ha enviado una respuesta no válida).
  • ERROR_CODE_INVALID_REQUEST: la solicitud de anuncio no era válida; por ejemplo, porque el ID del bloque de anuncios era incorrecto.
  • ERROR_CODE_NETWORK_ERROR: no se ha podido realizar la solicitud de anuncio debido a problemas con la conexión de red.
  • ERROR_CODE_NO_FILL: la solicitud de anuncio se ha realizado correctamente, pero no se ha devuelto ningún anuncio porque no hay un inventario publicitario.
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), con lo que 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 la siguiente 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
Ancho de pantalla x 32|50|90 Banner inteligente Teléfonos y tablets SMART_BANNER

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

Java

AdSize adSize = new AdSize(300, 50);

Kotlin

val adSize = AdSize(300, 50)

Banners inteligentes

Los banners inteligentes son bloques de anuncios de banner que se adaptan al ancho de pantalla de distintos dispositivos y en cualquier orientación. Estos anuncios detectan el ancho y la orientación del dispositivo en cuestión y ajustan la vista de anuncio en consecuencia.

En los banners inteligentes se pueden incluir anuncios de tres alturas:

Altura del anuncio Altura de la pantalla
32 dp ≤ 400 dp
50 dp > 400 dp y ≤ 720 dp
90 dp > 720 dp

Normalmente, en los teléfonos, los banners inteligentes suelen tener una altura de 50 dp en orientación vertical y de 32 dp en horizontal. En tablets, la altura suele ser de 90 dp en ambas orientaciones.

Si un anuncio de imagen no es lo suficientemente grande como para ocupar todo el espacio asignado, la imagen se centra y se rellena el espacio a ambos lados.

Para usar banners inteligentes en XML, usa la constante SMART_BANNER para definir el tamaño de anuncio y para la anchura del objeto AdView utiliza match_parent. Por ejemplo:

<com.google.android.gms.ads.doubleclick.PublisherAdView
  xmlns:ads="http://schemas.android.com/apk/res-auto"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  ads:adSize="SMART_BANNER"
  ads:adUnitId="ca-app-pub-3940256099942544/6300978111">
</com.google.android.gms.ads.doubleclick.PublisherAdView>

Para crear un banner inteligente mediante programación, utiliza AdSize.SMART_BANNER como tamaño del anuncio:

Java

PublisherAdView adView = new PublisherAdView(this);
adView.setAdSizes(AdSize.SMART_BANNER);

Kotlin

val adView = PublisherAdView(this)
adView.adSizes = AdSize.SMART_BANNER

Tamaño de anuncio personalizado

A través de Google Ad Manager, puedes servir a una aplicación tanto bloques de anuncio estándar como de cualquier otro tamaño. El tamaño del anuncio (anchura, 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 diverso tamaño en Ad Manager para ver una implementación del tamaño de anuncio personalizado en la aplicación de 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 la aplicación, basta con transferir varios parámetros AdSize a 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 ser capaz de adaptarse automáticamente al nuevo tamaño.

Si en algún momento necesitas cambiar los tamaños de anuncio compatibles 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 anuncios mediante el atributo ads:adSizes en el archivo de diseño XML:

<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="YOUR_AD_UNIT_ID" />

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

Recuento de impresiones manual

Si tienes condiciones especiales sobre cuándo se debe registrar una impresión, puedes enviar manualmente pings de impresión a Ad Manager. Para ello, habilita un objeto PublisherAdRequest para las impresiones manuales antes de cargar un anuncio:

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 aplicaciones puedes crear anuncios que envíen mensajes al código de la aplicación. De esa forma, la aplicación puede hacer tareas basadas en estos mensajes.

Puedes detectar los eventos de aplicación específicos de Ad Manager mediante AppEventListener. Estos eventos pueden ocurrir 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 realiza 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 {
}

y luego 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 mensajes de eventos de color de aplicación al agente de escucha:

<html>
<head>
  <script src="//media.admob.com/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 de API Demo de Android.

Additional resources

Samples on GitHub

Mobile Ads Garage video tutorials

Next steps

Enviar comentarios sobre...

Mobile Ads SDK for Android
Mobile Ads SDK for Android
Si necesitas ayuda, visita nuestra página de asistencia.