Implementa anuncios de pantalla en pantalla (beta)

Selecciona la plataforma: Android iOS Unity

Pantalla en pantalla

Los anuncios de pantalla en pantalla (PiP) se muestran en una ventana flotante que permanece sobre el contenido de la pantalla, como artículos, feeds o juegos. Este formato permite que los usuarios interactúen con tu app mientras el anuncio permanece visible. Elige este formato para mostrar anuncios gráficos que no ocupen toda la pantalla. Obtén más información sobre los anuncios de pantalla en pantalla.

En esta guía, se explica cómo solicitar y mostrar anuncios de pantalla en pantalla en tu app con GMA Next-Gen SDK.

Antes de comenzar

Antes de continuar, haz lo siguiente:

Carga un anuncio

Para cargar un PictureInPictureAd objeto, crea una solicitud de anuncio y llama al método de carga:

Kotlin

private fun loadPictureInPictureAd() {
  val request = PictureInPictureAdRequest.Builder(AD_UNIT_ID).build()

  PictureInPictureAd.load(
    request,
    object : AdLoadCallback<PictureInPictureAd> {
      override fun onAdFailedToLoad(adError: LoadAdError) {
        Log.w(TAG, "Picture-in-Picture ad failed to load: $adError")
      }

      override fun onAdLoaded(ad: PictureInPictureAd) {
        Log.d(TAG, "Picture-in-Picture ad loaded.")

        // Capture the PictureInPictureAd reference for later use.
        pipAd = ad
        setAdEventCallback(ad)
      }
    },
  )
}

Java

private void loadPictureInPictureAd() {
  PictureInPictureAdRequest request = new PictureInPictureAdRequest.Builder(AD_UNIT_ID).build();

  PictureInPictureAd.load(
      request,
      new AdLoadCallback<PictureInPictureAd>() {
        @Override
        public void onAdFailedToLoad(@NonNull LoadAdError adError) {
          Log.w(TAG, "Picture-in-Picture ad failed to load: " + adError);
        }

        @Override
        public void onAdLoaded(@NonNull PictureInPictureAd ad) {
          Log.d(TAG, "Picture-in-Picture ad loaded.");

          // Capture the PictureInPictureAd reference for later use.
          pipAd = ad;
          setAdEventCallback(ad);
        }
      });
}

Reemplaza AD_UNIT_ID por el ID de tu unidad de anuncios.

Muestra el anuncio

Para mostrar el anuncio de pantalla en pantalla, llama al método show. En el siguiente ejemplo, se muestra el anuncio en la posición predeterminada y se establece el alcance de la presentación en la pantalla:

Kotlin

private fun showPictureInPictureAd(activity: Activity) {
  // Capture the ad reference saved from the onAdLoaded callback.
  val ad = pipAd
  if (ad != null) {
    val options =
      PictureInPictureAdOptions.Builder()
        // Uses the Google Mobile Ads SDK's default screen position.
        .setPosition(PictureInPictureAdPosition.DEFAULT)
        // Binds the ad lifecycle to the host screen.
        .setPresentationScope(PictureInPictureAdPresentationScope.SCREEN)
        .build()
    ad.show(activity, options)
  } else {
    Log.d(TAG, "No ad to show.")
  }
}

Java

private void showPictureInPictureAd(@NonNull Activity activity) {
  // Use the ad reference saved from the onAdLoaded callback.
  if (pipAd != null) {
    PictureInPictureAdOptions options =
        new PictureInPictureAdOptions.Builder()
            // Uses the Google Mobile Ads SDK's default screen position.
            .setPosition(PictureInPictureAdPosition.DEFAULT)
            // Binds the ad lifecycle to the host screen.
            .setPresentationScope(PictureInPictureAdPresentationScope.SCREEN)
            .build();
    pipAd.show(activity, options);
  } else {
    Log.d(TAG, "No ad to show.");
  }
}

Establece la posición

De forma predeterminada, GMA Next-Gen SDK muestra un anuncio de pantalla en pantalla en la esquina inferior derecha de la pantalla cuando se muestra por primera vez o en la última posición conocida si se mostró anteriormente. Para personalizar dónde aparece el anuncio, especifica una posición cuando lo muestres. En el siguiente ejemplo, se establece la posición sobre el contenido en la esquina superior izquierda de la pantalla:

Kotlin

private fun createTopLeftPositionOptions(): PictureInPictureAdOptions {
  return PictureInPictureAdOptions.Builder()
    // Sets the ad position to the top-left corner of the screen.
    .setPosition(PictureInPictureAdPosition.TOP_LEFT)
    .build()
}

Java

private PictureInPictureAdOptions createTopLeftPositionOptions() {
  return new PictureInPictureAdOptions.Builder()
      // Sets the ad position to the top-left corner of the screen.
      .setPosition(PictureInPictureAdPosition.TOP_LEFT)
      .build();
}

Para conocer todas las posiciones disponibles, consulta PictureInPictureAdPosition.

Establece el alcance de la presentación

De forma predeterminada, GMA Next-Gen SDK vincula un anuncio de pantalla en pantalla a la pantalla del host actual. GMA Next-Gen SDK descarta el anuncio cuando la jerarquía de vistas de la pantalla del host ya no está en la memoria. Para mantener el anuncio visible después de que se quite la pantalla de host de la memoria, establece el alcance de la presentación en la aplicación:

Kotlin

private fun createApplicationScopedOptions(): PictureInPictureAdOptions {
  return PictureInPictureAdOptions.Builder()
    // Keeps the ad visible beyond the host screen's lifecycle.
    .setPresentationScope(PictureInPictureAdPresentationScope.APPLICATION)
    .build()
}

Java

private PictureInPictureAdOptions createApplicationScopedOptions() {
  return new PictureInPictureAdOptions.Builder()
      // Keeps the ad visible beyond the host screen's lifecycle.
      .setPresentationScope(PictureInPictureAdPresentationScope.APPLICATION)
      .build();
}

Para obtener más información, consulta Cómo mantener el anuncio visible en todas las pantallas.

Escucha eventos de anuncios

Para controlar los eventos del ciclo de vida de los anuncios de pantalla en pantalla, regístrate para recibir eventos de anuncios antes de mostrar tu anuncio. Estos eventos informan interacciones con los anuncios, como clics e impresiones. Estos eventos también informan eventos específicos de pantalla en pantalla, como cuando el anuncio se muestra o se oculta:

Kotlin

private fun setAdEventCallback(pipAd: PictureInPictureAd) {
  pipAd.adEventCallback =
    object : PictureInPictureAdEventCallback {
      override fun onAdShown() {
        Log.d(TAG, "Picture-in-Picture ad shown.")
      }

      override fun onAdHidden() {
        Log.d(TAG, "Picture-in-Picture ad hidden.")
      }

      override fun onAdImpression() {
        Log.d(TAG, "Picture-in-Picture ad recorded an impression.")
      }

      override fun onAdClicked() {
        Log.d(TAG, "Picture-in-Picture ad recorded a click.")
      }

      override fun onAdShowedFullScreenContent() {
        Log.d(TAG, "Picture-in-Picture ad showed full screen content.")
      }

      override fun onAdDismissedFullScreenContent() {
        Log.d(TAG, "Picture-in-Picture ad dismissed full screen content.")
      }

      override fun onAdFailedToShowFullScreenContent(
        fullScreenContentError: FullScreenContentError
      ) {
        Log.w(
          TAG,
          "Picture-in-Picture ad failed to show full screen content: $fullScreenContentError",
        )
      }

      override fun onAdPaid(value: AdValue) {
        Log.d(TAG, "Picture-in-Picture ad paid: ${value.valueMicros} ${value.currencyCode}")
      }
    }
}

Java

private void setAdEventCallback(@NonNull PictureInPictureAd pipAd) {
  pipAd.setAdEventCallback(
      new PictureInPictureAdEventCallback() {
        @Override
        public void onAdShown() {
          Log.d(TAG, "Picture-in-Picture ad shown.");
        }

        @Override
        public void onAdHidden() {
          Log.d(TAG, "Picture-in-Picture ad hidden.");
        }

        @Override
        public void onAdImpression() {
          Log.d(TAG, "Picture-in-Picture ad recorded an impression.");
        }

        @Override
        public void onAdClicked() {
          Log.d(TAG, "Picture-in-Picture ad recorded a click.");
        }

        @Override
        public void onAdShowedFullScreenContent() {
          Log.d(TAG, "Picture-in-Picture ad showed full screen content.");
        }

        @Override
        public void onAdDismissedFullScreenContent() {
          Log.d(TAG, "Picture-in-Picture ad dismissed full screen content.");
        }

        @Override
        public void onAdFailedToShowFullScreenContent(
            @NonNull FullScreenContentError fullScreenContentError) {
          Log.w(
              TAG,
              "Picture-in-Picture ad failed to show full screen content: "
                  + fullScreenContentError);
        }

        @Override
        public void onAdPaid(@NonNull AdValue value) {
          Log.d(
              TAG,
              "Picture-in-Picture ad paid: "
                  + value.getValueMicros()
                  + " "
                  + value.getCurrencyCode());
        }
      });
}

Oculta el anuncio

Para quitar el anuncio flotante de la pantalla, llama al método hide. Este método invoca el evento de anuncio oculto:

Kotlin

private fun hidePictureInPictureAd() {
  // Capture the ad reference saved from the onAdLoaded callback.
  val ad = pipAd
  if (ad != null) {
    ad.hide()
  } else {
    Log.d(TAG, "No ad to hide.")
  }
}

Java

private void hidePictureInPictureAd() {
  // Use the ad reference saved from the onAdLoaded callback.
  if (pipAd != null) {
    pipAd.hide();
  } else {
    Log.d(TAG, "No ad to hide.");
  }
}

Cómo liberar los recursos de un anuncio

Para evitar fugas de memoria, quita la referencia al objeto de anuncio cuando tu app termine de usarlo. Por ejemplo, cuando tu app ya no muestra el anuncio ni interactúa con él. En el caso de los anuncios con alcance de pantalla, descarta la referencia cuando tu app quite la pantalla host de la memoria. En el caso de los anuncios con alcance de app, conserva la referencia del anuncio mientras el usuario navega por las pantallas y descarta la referencia cuando el usuario cierra el anuncio:

Kotlin

private fun cleanUpPictureInPictureAd() {
  pipAd?.destroy()
  pipAd = null
}

Java

private void cleanUpPictureInPictureAd() {
  // Use the ad reference saved from the onAdLoaded callback.
  if (pipAd != null) {
    pipAd.destroy();
    pipAd = null;
  }
}

Mantén el anuncio visible en todas las pantallas

Cuando estableces el alcance de la presentación en la aplicación, el anuncio de pantalla en pantalla permanece visible incluso cuando tu app quita de la memoria la pantalla de hosting. Para interactuar con el anuncio o descartarlo cuando el usuario sale de la pantalla de host, tu app debe conservar el acceso al anuncio de pantalla en pantalla. Te recomendamos que mantengas el anuncio en un singleton a nivel de la app o en un administrador de estado compartido, en lugar de una variable de instancia de una sola pantalla.

Para ver ejemplos de cómo mantener un anuncio visible en todas las pantallas, consulta las siguientes apps de ejemplo: