Implementare gli annunci Picture in picture (beta)

Picture in picture

Gli annunci Picture in picture (PIP) vengono visualizzati in una finestra mobile che rimane sopra i contenuti sullo schermo, come articoli, feed o gameplay. Questo formato consente agli utenti di interagire con la tua app mentre l'annuncio rimane visibile. Scegli questo formato per mostrare annunci che non occupano l'intero schermo. Scopri di più sugli annunci Picture in picture.

Questa guida spiega come richiedere e mostrare annunci Picture in picture nella tua app utilizzando GMA Next-Gen SDK.

Prima di iniziare

Prima di continuare, completa queste operazioni:

Carica un annuncio

Per caricare un PictureInPictureAd, crea una richiesta di annuncio e chiama il load metodo:

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);
        }
      });
}

Sostituisci AD_UNIT_ID con l'ID unità pubblicitaria.

Mostra l'annuncio

Per mostrare l'annuncio Picture in picture sullo schermo, configura le opzioni Picture in picture e chiama il metodo show. L'esempio seguente imposta la posizione predefinita dell'annuncio e l'ambito di presentazione sullo schermo:

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.");
  }
}

Imposta la posizione

Per impostazione predefinita, GMA Next-Gen SDK mostra un annuncio Picture in picture nell'angolo in basso a destra dello schermo quando viene visualizzato per la prima volta o nell'ultima posizione nota se è stato visualizzato in precedenza. Per personalizzare la posizione dell'annuncio, imposta la posizione nelle opzioni Picture in picture. L'esempio seguente imposta la posizione sopra i contenuti nell'angolo in alto a sinistra dello schermo:

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();
}

Per tutte le posizioni disponibili, vedi PictureInPictureAdPosition.

Imposta l'ambito di presentazione

Per impostazione predefinita, GMA Next-Gen SDK associa un annuncio Picture in picture alla schermata host corrente. GMA Next-Gen SDK ignora l'annuncio quando la gerarchia di oggetti View della schermata host non è più in memoria. Per mantenere l'annuncio visibile dopo che la schermata host è stata rimossa dalla memoria, imposta l'ambito di presentazione sull'applicazione:

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();
}

Per ulteriori informazioni, vedi Mantenere l'annuncio visibile su più schermi.

Imposta il callback dell'evento dell'annuncio

Per gestire gli eventi del ciclo di vita degli annunci Picture in picture, imposta il callback dell'evento sull'annuncio prima di mostrarlo. Questo callback segnala gli eventi standard, come clic e impressioni. Questo callback segnala anche eventi specifici di Picture in picture, ad esempio quando l'annuncio viene mostrato o nascosto:

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());
        }
      });
}

Nascondi l'annuncio

Per rimuovere l'annuncio mobile dallo schermo, chiama il metodo hide. Questo metodo richiama il callback dell'evento dell'annuncio nascosto:

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.");
  }
}

Libera spazio per le risorse degli annunci

Per evitare perdite di memoria, elimina il riferimento all'oggetto annuncio quando l'app termina di utilizzare l'annuncio. Ad esempio, quando l'app non mostra più l'annuncio o non interagisce più con esso. Per gli annunci con ambito schermo, elimina il riferimento quando l'app rimuove la schermata host dalla memoria. Per gli annunci con ambito app, mantieni il riferimento all'annuncio mentre l'utente naviga tra gli schermi ed eliminalo quando l'utente ignora l'annuncio:

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

Mantieni l'annuncio visibile su più schermi

Quando imposti l'ambito di presentazione sull'applicazione, l'annuncio Picture in picture rimane visibile anche quando l'app rimuove la schermata di hosting dalla memoria. Per interagire con l'annuncio o ignorarlo quando l'utente esce dalla schermata host, l'app deve mantenere l'accesso all'annuncio Picture in picture. Ti consigliamo di mantenere l'annuncio in un singleton a livello di app o in un gestore dello stato condiviso anziché in una variabile di istanza di una singola schermata.

Per un esempio di come mantenere un annuncio visibile su più schermi, consulta le nostre app di esempio: