Menerapkan iklan picture-in-picture (beta)

Pilih platform: Android iOS

Picture-in-picture

Iklan picture-in-picture (PiP) ditampilkan di jendela mengambang yang tetap berada di atas konten di layar, seperti artikel, feed, atau gameplay. Format ini memungkinkan pengguna berinteraksi dengan aplikasi Anda saat iklan tetap terlihat. Untuk menampilkan iklan yang tidak mengambil alih seluruh layar, pilih format ini.

Panduan ini membahas cara meminta dan menampilkan iklan picture-in-picture di aplikasi Anda menggunakan GMA Next-Gen SDK.

Sebelum memulai

Sebelum Anda melanjutkan, lakukan hal berikut:

Memuat iklan

Untuk memuat objek PictureInPictureAd, buat permintaan iklan dan panggil metode load:

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

Ganti AD_UNIT_ID dengan ID unit iklan Anda.

Menampilkan iklan

Untuk menampilkan iklan picture-in-picture di layar, konfigurasi opsi picture-in-picture Anda dan panggil metode show. Contoh berikut menetapkan posisi default iklan dan cakupan presentasi ke layar:

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

Menetapkan posisi

Secara default, GMA Next-Gen SDK menampilkan iklan picture-in-picture di pojok kanan bawah layar saat pertama kali ditampilkan, atau di posisi terakhir yang diketahui jika sebelumnya ditampilkan. Untuk menyesuaikan tempat iklan muncul, tetapkan posisi di opsi picture-in-picture Anda. Contoh berikut menetapkan posisi di atas konten di sudut kiri atas layar:

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

Untuk semua posisi yang tersedia, lihat PictureInPictureAdPosition.

Menetapkan cakupan presentasi

Secara default, GMA Next-Gen SDK mengikat iklan picture-in-picture ke layar host saat ini. GMA Next-Gen SDK menutup iklan saat hierarki tampilan layar host tidak lagi ada dalam memori. Agar iklan tetap terlihat setelah layar host dihapus dari memori, tetapkan cakupan presentasi ke aplikasi:

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

Untuk mengetahui informasi selengkapnya, lihat Membuat iklan tetap terlihat di seluruh layar.

Menetapkan callback peristiwa iklan

Untuk menangani peristiwa siklus proses iklan picture-in-picture, tetapkan callback peristiwa pada iklan Anda sebelum menayangkannya. Callback ini melaporkan peristiwa standar, seperti klik dan tayangan iklan. Callback ini juga melaporkan peristiwa khusus picture-in-picture seperti saat iklan ditampilkan atau disembunyikan:

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

Menyembunyikan iklan

Untuk menghapus iklan mengambang dari layar, panggil metode hide. Metode ini memanggil callback peristiwa iklan tersembunyi:

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

Membersihkan resource iklan

Untuk menghindari kebocoran memori, hapus referensi Anda ke objek iklan saat aplikasi Anda selesai menggunakan iklan. Misalnya, saat aplikasi Anda tidak lagi menampilkan atau berinteraksi dengan iklan lagi. Untuk iklan cakupan layar, hapus referensi saat aplikasi Anda menghapus layar host dari memori. Untuk iklan cakupan aplikasi, pertahankan referensi iklan saat pengguna menjelajahi layar, dan hapus referensi saat pengguna menutup iklan:

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

Memastikan iklan tetap terlihat di seluruh layar

Saat Anda menyetel cakupan presentasi ke aplikasi, iklan picture-in-picture tetap terlihat meskipun aplikasi Anda menghapus layar hosting dari memori. Untuk berinteraksi dengan atau menutup iklan saat pengguna keluar dari layar host, aplikasi Anda harus mempertahankan akses ke iklan picture-in-picture. Sebaiknya tahan iklan dalam singleton tingkat aplikasi atau pengelola status bersama, bukan dalam variabel instance satu layar.

Untuk contoh cara agar iklan tetap terlihat di seluruh layar, lihat aplikasi contoh berikut: