Implementa anuncios de ícono

Los anuncios con íconos son pequeñas posiciones de íconos de apps que complementan la experiencia del usuario del sistema operativo y son flexibles para acompañar la mayoría de las actividades a nivel del SO, como la pantalla de bloqueo y la pantalla de uso compartido. Puedes mostrar anuncios con íconos de forma individual o en varios grupos. Cada anuncio proporciona un conjunto de elementos de texto y cadena que tu app es responsable de renderizar. En las siguientes imágenes, se muestran anuncios con íconos en una carpeta de la app:

En esta guía, se muestra cómo solicitar y mostrar anuncios con íconos.

Requisitos previos

Antes de comenzar, debes tener GMA Next-Gen SDK 0.8.0-alpha01 o una versión posterior.

Haz siempre una comprobación 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, tu cuenta podría suspenderse.

Usa tus unidades de anuncios y habilita los dispositivos de prueba para obtener anuncios de prueba, o bien el siguiente ID de unidad de anuncios de prueba exclusivo para los anuncios con íconos de Android:

ca-app-pub-3940256099942544/1476272466
Para obtener detalles sobre los anuncios de prueba de GMA Next-Gen SDK, consulta Habilita los anuncios de prueba.

Carga un anuncio con íconos

Carga un anuncio con íconos con tu solicitud de anuncio con íconos y controla los eventos de carga de anuncios:

Kotlin

private fun loadIconAd() {
  val request =
    IconAdRequest.Builder(AD_UNIT_ID)
      // The "AdChoices" badge is rendered at the top right corner of the icon ad
      // if left unspecified.
      .setAdChoicesPlacement(AdChoicesPlacement.BOTTOM_RIGHT)
      // It is recommended to specify the placement of your icon ad
      // to help Google optimize your icon ad performance.
      .setIconAdPlacement(IconAdPlacement.BROWSER)
      .build()

  IconAd.load(
    request,
    object : AdLoadCallback<IconAd> {
      override fun onAdFailedToLoad(adError: LoadAdError) {
        Log.w(Constant.TAG, "Icon ad failed to load: $adError")
        showToast("Icon ad failed to load.")
      }

      override fun onAdLoaded(ad: IconAd) {
        Log.d(Constant.TAG, "Icon ad loaded")
        // Always call destroy() on ads on removal.
        iconAd?.destroy()
        iconAd = ad
        setAdEventCallback(ad)
        displayIconAd(ad)
      }
    },
  )
}

Java

private void loadIconAd() {
  IconAdRequest request =
      new IconAdRequest.Builder(AD_UNIT_ID)
          // The "AdChoices" badge is rendered at the top right corner of the icon ad
          // if left unspecified.
          .setAdChoicesPlacement(AdChoicesPlacement.BOTTOM_RIGHT)
          // It is recommended to specify the placement of your icon ad
          // to help Google optimize your icon ad performance.
          .setIconAdPlacement(IconAdPlacement.BROWSER)
          .build();

  IconAd.load(
      request,
      new AdLoadCallback<IconAd>() {
        @Override
        public void onAdFailedToLoad(@NonNull LoadAdError adError) {
          Log.w(Constant.TAG, "Icon ad failed to load :" + adError);
          showToast("Icon ad failed to load with error code: " + adError.getCode());
        }

        @Override
        public void onAdLoaded(@NonNull IconAd ad) {
          Log.d(Constant.TAG, "Icon ad loaded.");

          // Always call destroy() on ads on removal.
          if (iconAd != null) {
              iconAd.destroy();
          }
          iconAd = ad;
          setAdEventCallback(ad);
          displayIconAd(ad);
        }
      });
}

Crea una vista de anuncio con íconos

Los anuncios con íconos deben usar IconAdView como elemento raíz para sus recursos. Dentro de la vista de anuncio con íconos, coloca todos los elementos visuales de tu anuncio.

En el siguiente ejemplo, se muestra un diseño para crear una vista para un anuncio con íconos:

<?xml version="1.0" encoding="utf-8"?>
<com.google.android.libraries.ads.mobile.sdk.iconad.IconAdView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

  <LinearLayout
      android:id="@+id/icon_ad_container"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_gravity="center"
      android:background="#00FFC107"
      android:orientation="vertical">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
      <TextView
          android:id="@+id/ad_badge"
          android:width="15dp"
          android:height="15dp"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:background="#FFC107"
          android:text="Ad"
          android:textColor="#FFFFFF"
          android:textSize="12sp" />
      <TextView
          android:id="@+id/ad_headline"
          android:textStyle="normal"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:layout_gravity="center"
          android:autoText="true"
          android:inputType="text|textMultiLine"
          android:textColor="#808080"
          android:textSize="12sp" />
    </LinearLayout>

    <com.google.android.material.imageview.ShapeableImageView xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/ad_icon"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_gravity="center"
        android:adjustViewBounds="true"
        android:background="@android:color/holo_green_light"
        android:contentDescription="@string/content_description_icon_ad"
        android:theme="@style/Theme.AppCompat.Light"
        app:shapeAppearanceOverlay="@style/roundedCorners"
        app:strokeColor="@null" />

    <RatingBar
        android:id="@+id/ad_stars"
        style="?android:attr/ratingBarStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:isIndicator="true"
        android:numStars="5"
        android:stepSize="0.5" />
    <Button
        android:id="@+id/ad_call_to_action"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:gravity="center"
        android:textSize="12sp" />
  </LinearLayout>

</com.google.android.libraries.ads.mobile.sdk.iconad.IconAdView>

Muestra el anuncio con íconos en la pantalla

Para mostrar el anuncio con íconos en una pantalla, completa los siguientes pasos:

  1. Infla la vista de anuncio con íconos y agrégala a tu jerarquía de vistas.

  2. Completa cada vista secundaria con el recurso de anuncio con íconos correspondiente.

En el siguiente ejemplo, se abarcan los pasos anteriores para mostrar el anuncio con íconos en la pantalla:

Kotlin

val iconAdViewBinding = IconAdBinding.inflate(layoutInflater)
// Add the ad view to the active view hierarchy.
binding.iconAdContainer.addView(iconAdViewBinding.root)
val iconAdView = iconAdViewBinding.root

// Populate the view elements with their respective icon ad asset.
iconAdView.callToActionView = iconAdViewBinding.adCallToAction
iconAdView.headlineView = iconAdViewBinding.adHeadline
iconAdView.iconView = iconAdViewBinding.adIcon
iconAdView.starRatingView = iconAdViewBinding.adStars

Java

IconAdBinding iconAdViewBinding = IconAdBinding.inflate(getLayoutInflater());
// Add the ad view to the active view hierarchy.
binding.iconAdContainer.addView(iconAdViewBinding.getRoot());
IconAdView iconAdView = iconAdViewBinding.getRoot();

// Populate the view elements with their respective icon ad asset.
iconAdView.setCallToActionView(iconAdViewBinding.adCallToAction);
iconAdView.setHeadlineView(iconAdViewBinding.adHeadline);
iconAdView.setIconView(iconAdViewBinding.adIcon);
iconAdView.setStarRatingView(iconAdViewBinding.adStars);

Haz clic en el anuncio con íconos

El GMA Next-Gen SDK registra los objetos de escucha de clics para cada vista de recursos que se asigna cuando se llama a registerIconAd(). Asigna las propiedades de la vista de anuncio con íconos a su vista correspondiente en tu jerarquía de vistas antes de registrar el anuncio con íconos:

Kotlin

// Map each asset view property to the corresponding view in your view hierarchy.
iconAdViewBinding.adCallToAction.text = iconAd.callToAction
iconAdViewBinding.adHeadline.text = iconAd.headline
iconAdViewBinding.adIcon.setImageDrawable(iconAd.icon.drawable)
iconAd.starRating?.toFloat().also { value ->
  if (value != null) {
    iconAdViewBinding.adStars.rating = value
  }
}

// Register the icon ad with the view presenting it.
iconAdView.registerIconAd(iconAd)

Java

// Map each asset view property to the corresponding view in your view hierarchy.
iconAdViewBinding.adCallToAction.setText(iconAd.getCallToAction());
iconAdViewBinding.adHeadline.setText(iconAd.getHeadline());
iconAdViewBinding.adIcon.setImageDrawable(iconAd.getIcon().getDrawable());

if (iconAd.getStarRating() != null) {
  iconAdViewBinding.adStars.setRating(iconAd.getStarRating().floatValue());
}

// Register the icon ad with the view presenting it.
iconAdView.registerIconAd(iconAd);

Opcional: Configura la devolución de llamada del evento de anuncio con íconos

Para controlar los eventos de ciclo de vida de los anuncios con íconos, configura la devolución de llamada del evento:

Kotlin

iconAd.adEventCallback =
  object : IconAdEventCallback {
    override fun onAdShowedFullScreenContent() {
      // Icon ad showed full screen content.
    }

    override fun onAdDismissedFullScreenContent() {
      // Icon ad dismissed full screen content.
    }

    override fun onAdFailedToShowFullScreenContent(
      fullScreenContentError: FullScreenContentError
    ) {
      // Icon ad failed to show full screen content.
    }

    override fun onAdImpression() {
      // Icon ad recorded an impression.
    }

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

    override fun onAdPaid(value: AdValue) {
      // Icon ad estimated to have earned money.
    }
  }

Java

iconAd.setAdEventCallback(
    new IconAdEventCallback() {
      @Override
      public void onAdShowedFullScreenContent() {
        // Icon ad showed full screen content.
      }

      @Override
      public void onAdDismissedFullScreenContent() {
        // Icon ad dismissed full screen content.
      }

      @Override
      public void onAdFailedToShowFullScreenContent(
          @NonNull FullScreenContentError fullScreenContentError) {
        // Icon ad failed to show full screen content.
      }

      @Override
      public void onAdImpression() {
        // Icon ad recorded an impression.
      }

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

      @Override
      public void onAdPaid(@NonNull AdValue value) {
        // Icon ad estimated to have earned money.
      }
    });

Optimiza el rendimiento

En las siguientes secciones, se abarcan los pasos de implementación opcionales para optimizar el rendimiento de los anuncios con íconos.

Usa el correlator para cargar varios anuncios

Cuando cargues varios anuncios con íconos para mostrarlos juntos, realiza solicitudes secuenciales con el mismo valor de correlator para asegurarte de que los anuncios cargados sean únicos. La duración del correlator es de 10 segundos. El servidor no considera que las solicitudes realizadas con más de 10 segundos de diferencia estén correlacionadas.

En el siguiente ejemplo, se muestra cómo establecer un valor de correlator en la solicitud de anuncio:

Kotlin

val correlator = Correlator.generateCorrelator()
val request =
      IconAdRequest.Builder("ca-app-pub-3940256099942544/1476272466")
        .setCorrelator(correlator)
        .build()

Java

Correlator correlator = Correlator.generateCorrelator();
IconAdRequest request =
    new IconAdRequest.Builder("ca-app-pub-3940256099942544/1476272466")
        .setCorrelator(correlator)
        .build();

Establece una posición de anuncio con íconos

Para ayudar a Google a comprender la posición de tu anuncio con íconos y optimizar su rendimiento, te recomendamos que especifiques dónde deseas mostrar los anuncios con íconos en el momento de la solicitud.

Usa el valor de enumeración IconAdPlacement que mejor represente tu caso de uso:

Kotlin

val request =
  IconAdRequest.Builder("ca-app-pub-3940256099942544/1476272466")
    .setIconAdPlacement(IconAdPlacement.BROWSER)
    .build()

Java

IconAdRequest request =
    new IconAdRequest.Builder("ca-app-pub-3940256099942544/1476272466")
        .setIconAdPlacement(IconAdPlacement.BROWSER)
        .build();