Memuat satu 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.

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

Prasyarat

Android 

ca-app-pub-3940256099942544/1033173712

iOS 

ca-app-pub-3940256099942544/4411468910

Memuat iklan

Untuk memuat iklan interstisial, panggil metode load pada class InterstitialAd.

Contoh berikut memuat iklan interstisial jika berhasil dan mencatat error ke dalam log jika gagal:

export async function loadInterstitialAd(
  adUnitId: string,
): Promise<InterstitialAd | null> {
  try {
    const ad = await InterstitialAd.load({adUnitId});
    return ad;
  } catch (error) {
    const loadError = error as LoadAdError;
    console.error('Failed to load interstitial ad:', loadError.message);
    return null;
  }
}

Memproses peristiwa iklan

Sebelum menampilkan iklan, tetapkan pemroses adEventCallback pada instance InterstitialAd yang dimuat. Pemroses ini menerima callback untuk peristiwa siklus proses iklan, seperti iklan yang ditampilkan di layar atau pengguna yang mengetuk iklan. Untuk callback yang tersedia, lihat AdEventCallback.

Contoh berikut menetapkan callback untuk memproses peristiwa iklan:

export function registerAdEvents(ad: InterstitialAd) {
  ad.adEventCallback = {
    // Called when the ad is presented on screen.
    onAdShowedFullScreenContent: () => {
      console.log('Interstitial ad showed full screen content.');
    },
    // Called when the ad is closed by the user.
    onAdDismissedFullScreenContent: () => {
      console.log('Interstitial ad dismissed full screen content.');
      ad.destroy();
    },
    // Called when presentation fails.
    onAdFailedToShowFullScreenContent: (error) => {
      console.error('Failed to show interstitial ad:', error);
      ad.destroy();
    },
    // Called when an impression is recorded.
    onAdImpression: () => {
      console.log('Interstitial ad recorded an impression.');
    },
    // Called when the user taps the ad.
    onAdClicked: () => {
      console.log('Interstitial ad was clicked.');
    },
    // Called when the ad is estimated to have earned money.
    onAdPaid: (adValue) => {
      console.log(
        `Interstitial ad paid: ${adValue.amountMicros}` +
          ` ${adValue.currencyCode}`,
      );
    },
  };
}

Contoh ini juga memanggil metode destroy saat pengguna menutup iklan atau saat iklan gagal ditampilkan. Proses ini akan merilis resource yang digunakan iklan.

Menampilkan iklan

Untuk menampilkan iklan interstisial, panggil metode show pada instance InterstitialAd yang dimuat.

Contoh berikut menunjukkan iklan interstisial:

export function showInterstitialAd(ad: InterstitialAd) {
  ad.show();
}

Lihat contoh lengkapnya

Bagian ini membahas contoh lengkap untuk mengintegrasikan iklan interstisial ke dalam aplikasi React Native.

Contoh berikut mengintegrasikan iklan ke dalam komponen React Native, mengelola instance iklan dalam status, dan menyediakan kontrol untuk memuat dan menampilkan iklan:

export function InterstitialSingleLoadScreen() {
  const [ad, setAd] = useState<InterstitialAd | null>(null);
  const [isLoaded, setIsLoaded] = useState(false);
  const [status, setStatus] = useState<string>('Idle');

  useEffect(() => {
    return () => {
      ad?.destroy();
    };
  }, [ad]);

  const handleLoad = async () => {
    setStatus('Loading Interstitial ad...');
    const loadedAd = await loadInterstitialAd(INTERSTITIAL_AD_UNIT_ID);
    if (loadedAd) {
      registerAdEvents(loadedAd);
      const onDismiss =
        loadedAd.adEventCallback?.onAdDismissedFullScreenContent;
      loadedAd.adEventCallback = {
        ...loadedAd.adEventCallback,
        onAdDismissedFullScreenContent: () => {
          onDismiss?.();
          setStatus('Ad dismissed.');
        },
      };
      setAd((prevAd) => {
        prevAd?.destroy();
        return loadedAd;
      });
      setIsLoaded(true);
      setStatus('Interstitial ad loaded!');
    } else {
      setStatus('Failed to load Interstitial ad.');
    }
  };

  const handleShow = () => {
    if (ad) {
      showInterstitialAd(ad);
      setIsLoaded(false);
    }
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Interstitial Ad</Text>
      <Text style={styles.status}>Status: {status}</Text>
      <View style={styles.buttonGroup}>
        <Button title="Load Ad" onPress={handleLoad} />
        <View style={styles.spacerSmall} />
        <Button title="Show Ad" onPress={handleShow} disabled={!isLoaded} />
      </View>
    </View>
  );
}

Langkah berikutnya

Setelah Anda mengintegrasikan iklan interstisial, pelajari topik berikut: