Menyiapkan iklan interstisial

Iklan interstisial adalah iklan layar penuh yang muncul di titik transisi dalam aplikasi Anda, seperti di antara layar atau selama jeda antarlevel dalam game. Pengguna dapat mengetuk iklan untuk mengunjungi tujuan, atau menutup iklan dan kembali ke aplikasi. Untuk mengetahui detailnya, lihat Panduan iklan interstisial dan studi kasus.

Untuk menghilangkan latensi presentasi dan memastikan iklan tersedia saat transisi terjadi, Google Mobile Ads SDK for React Native menggunakan pramuat iklan untuk mengelola pemuatan, caching, dan pengisian ulang buffering di latar belakang.

Panduan ini menunjukkan cara mengintegrasikan iklan interstisial ke dalam aplikasi React Native.

Prasyarat

Sebelum melanjutkan, lakukan hal berikut:

Android 

ca-app-pub-3940256099942544/1033173712

iOS 

ca-app-pub-3940256099942544/4411468910

Memahami pramuat iklan

Pramuat iklan di Google Mobile Ads SDK for React Native mengotomatiskan pemuatan dan penyimpanan iklan dalam cache.

Pramuat iklan memberikan manfaat berikut:

  • Pengelolaan referensi: mempertahankan referensi hingga iklan ditampilkan.
  • Pemuatan ulang otomatis: memuat iklan baru saat iklan diambil dari cache.
  • Percobaan ulang terkelola: memuat iklan baru saat iklan gagal dimuat.
  • Penanganan masa berlaku: memuat ulang iklan sebelum masa berlakunya habis.
  • Pengoptimalan cache: mengoptimalkan urutan cache untuk menayangkan iklan dengan prioritas tertinggi.

Untuk memuat iklan secara manual, lihat panduan Memuat satu iklan interstisial.

Mulai melakukan pramuat

Untuk mulai melakukan pramuat iklan, panggil metode InterstitialAdPreloader.start dan teruskan nilai preloadId, setelan konfigurasi, dan callback peristiwa untuk memantau perubahan status buffering:

export function startPreloader(
  adUnitId: string,
  preloadId: string,
  customPreloadCallback?: PreloadCallback,
): boolean {
  try {
    const started = InterstitialAdPreloader.start(
      preloadId,
      {
        request: {adUnitId},
        bufferSize: 2,
      },
      {
        // Called when an ad is preloaded into the buffer.
        onAdPreloaded: (metadata) => {
          console.log(`Interstitial ad preloaded for ${metadata.preloadId}`);
          customPreloadCallback?.onAdPreloaded?.(metadata);
        },
        // Called when an ad fails to preload.
        onAdFailedToPreload: (error: LoadAdError) => {
          console.error('Failed to preload interstitial ad:', error.message);
          customPreloadCallback?.onAdFailedToPreload?.(error);
        },
        // Called when all preloaded ads in the buffer have been shown.
        onAdsExhausted: () => {
          console.log('Preload buffer exhausted for interstitial ads.');
          customPreloadCallback?.onAdsExhausted?.();
        },
      },
    );
    return started;
  } catch (error) {
    console.error('Error starting interstitial ad preloader:', error);
    return false;
  }
}

ID pramuat adalah string yang secara unik mengidentifikasi konfigurasi pramuat iklan. Jika Anda menggunakan ID unit iklan untuk satu konfigurasi pra-pemuatan di aplikasi, gunakan ID unit iklan tersebut sebagai ID pra-pemuatan. Jika aplikasi Anda memerlukan beberapa pra-pemuat untuk ID unit iklan yang sama, teruskan string yang berbeda untuk setiap ID pramuat.

Saat aplikasi Anda melakukan polling iklan yang dipramuat dari buffer, Google Mobile Ads SDK for React Native akan meminta iklan pengganti di latar belakang untuk mengisi ulang buffer. Jika tidak ada iklan yang dimuat sebelumnya yang tersisa di buffer, Google Mobile Ads SDK for React Native akan memanggil callback onAdsExhausted.

Batas cache pramuat

Google Mobile Ads SDK for React Native menerapkan batas di seluruh aplikasi untuk jumlah total iklan pramuat di semua unit iklan dan ID pramuat:

  • Batas default: Google menyimpan maksimum enam iklan yang dipramuat dalam memori. Batas ini digunakan bersama di semua format dan ID pra-pemuatan.
  • Buffer yang direkomendasikan: Dua iklan pramuat untuk setiap ID pramuat.

Jika aplikasi Anda mencapai batas seluruh aplikasi, permintaan latar belakang untuk iklan yang dimuat di awal akan dijeda hingga iklan yang ada diambil dari cache atau dihancurkan. Pemuatan awal juga dijeda sementara saat iklan layar penuh ditampilkan secara aktif di layar.

Melakukan polling dan menampilkan iklan

Sebelum menampilkan iklan, pastikan iklan tersedia dengan memanggil metode InterstitialAdPreloader.isAdAvailable. Untuk mengambil iklan, panggil metode InterstitialAdPreloader.pollAd.

Untuk memproses peristiwa presentasi, seperti penutupan iklan atau kegagalan tampilan, tetapkan properti adEventCallback pada instance iklan sebelum memanggil metode show.

Contoh berikut memeriksa ketersediaan iklan, dan memproses peristiwa presentasi layar penuh sebelum menampilkan iklan:

export function showPreloadedAd(
  preloadId: string,
  customAdEventCallback?: FullScreenAdEventCallback,
) {
  if (InterstitialAdPreloader.isAdAvailable(preloadId)) {
    const ad = InterstitialAdPreloader.pollAd(preloadId);
    if (ad) {
      ad.adEventCallback = {
        // Called when the ad is presented on screen.
        onAdShowedFullScreenContent: () => {
          console.log('Preloaded interstitial ad showed full screen content.');
          customAdEventCallback?.onAdShowedFullScreenContent?.();
        },
        // Called when the ad is closed by the user.
        onAdDismissedFullScreenContent: () => {
          console.log('Preloaded interstitial ad dismissed.');
          customAdEventCallback?.onAdDismissedFullScreenContent?.();
          ad.destroy();
        },
        // Called when presentation fails.
        onAdFailedToShowFullScreenContent: (error) => {
          console.error('Preloaded interstitial ad failed to show:', error);
          customAdEventCallback?.onAdFailedToShowFullScreenContent?.(error);
          ad.destroy();
        },
        // Called when an impression is recorded.
        onAdImpression: () => {
          console.log('Preloaded interstitial ad recorded an impression.');
          customAdEventCallback?.onAdImpression?.();
        },
        // Called when the user taps the ad.
        onAdClicked: () => {
          console.log('Preloaded interstitial ad was clicked.');
          customAdEventCallback?.onAdClicked?.();
        },
        // Called when the ad is estimated to have earned money.
        onAdPaid: (adValue) => {
          console.log(
            `Preloaded interstitial ad paid: ${adValue.amountMicros}` +
              ` ${adValue.currencyCode}`,
          );
          customAdEventCallback?.onAdPaid?.(adValue);
        },
      };
      ad.show();
    }
  } else {
    console.log('No preloaded interstitial ad available in buffer.');
  }
}

Untuk merilis memori dan resource, panggil metode ad.destroy di callback onAdDismissedFullScreenContent dan onAdFailedToShowFullScreenContent.

Membaca info respons

Untuk memeriksa info respons iklan yang telah dimuat sebelumnya berikutnya tanpa menghapus iklan dari cache, panggil metode InterstitialAdPreloader.peekAdResponseInfo:

export function peekPreloadedAdResponseInfo(preloadId: string) {
  if (InterstitialAdPreloader.isAdAvailable(preloadId)) {
    const responseInfo = InterstitialAdPreloader.peekAdResponseInfo(preloadId);
    if (responseInfo) {
      console.log('Next preloaded ad response info:', responseInfo);
    }
  }
}

Jika iklan tersedia, metode peekAdResponseInfo akan menampilkan objek ResponseInfo yang berisi informasi tentang sumber iklan dan adaptor jaringan yang dimuat.

Membersihkan resource

Jika Anda tidak perlu lagi menampilkan iklan untuk ID pramuat tertentu selama sisa sesi, panggil metode InterstitialAdPreloader.destroy. Proses ini menghentikan pramuat untuk ID pramuat tersebut dan mengosongkan iklan pramuat yang tidak digunakan dari memori.

Contoh berikut menghentikan pramuat:

export function destroyPreloader(preloadId: string) {
  InterstitialAdPreloader.destroy(preloadId);
}

Setelah pengguna menutup iklan atau iklan gagal ditampilkan, hancurkan setiap instance iklan yang di-polling. Untuk mengetahui detailnya, lihat Melakukan polling dan menampilkan iklan.

Lihat contoh lengkapnya

Contoh komponen berikut memulai pramuat saat pemasangan, melacak jumlah iklan yang tersedia, dan menyediakan kontrol untuk menampilkan iklan interstisial yang dipramuat:

export function InterstitialScreen() {
  const [numAdsAvailable, setNumAdsAvailable] = useState<number>(0);
  const [status, setStatus] = useState<string>('Initializing Preloader...');

  const refreshAdCount = () => {
    const count = InterstitialAdPreloader.getNumAdsAvailable(PRELOAD_ID);
    setNumAdsAvailable(count);
  };

  useEffect(() => {
    // Start preloading interstitial ads on component mount
    startPreloader(INTERSTITIAL_AD_UNIT_ID, PRELOAD_ID, {
      onAdPreloaded: () => {
        refreshAdCount();
        setStatus('Ad preloaded and ready!');
      },
      onAdFailedToPreload: (error) => {
        setStatus(`Preload failed: ${error.message}`);
      },
      onAdsExhausted: () => {
        refreshAdCount();
        setStatus('Preload buffer exhausted.');
      },
    });
    setStatus('Preloader started.');

    // Clean up preloader resources on component unmount
    return () => {
      destroyPreloader(PRELOAD_ID);
    };
  }, []);

  const handleShow = () => {
    showPreloadedAd(PRELOAD_ID, {
      onAdDismissedFullScreenContent: () => {
        setStatus('Ad dismissed.');
      },
      onAdFailedToShowFullScreenContent: (error) => {
        setStatus(`Failed to show ad: ${error.message}`);
      },
    });
    setStatus('Showing preloaded ad...');
    refreshAdCount();
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Preload Interstitial Ads</Text>
      <Text style={styles.status}>Status: {status}</Text>
      <Text style={styles.status}>Ads Available: {numAdsAvailable}</Text>
      <View style={styles.buttonGroup}>
        <Button
          title="Show Preloaded Ad"
          onPress={handleShow}
          disabled={numAdsAvailable === 0}
        />
      </View>
    </View>
  );
}

Ganti kode berikut:

  • INTERSTITIAL_AD_UNIT_ID dengan ID unit iklan Anda.
  • PRELOAD_ID dengan ID preloader Anda.

Langkah berikutnya

Setelah Anda mengintegrasikan iklan interstisial, pelajari topik berikut: