Memuat satu iklan interstisial reward

Iklan interstisial reward memungkinkan Anda menawarkan item dalam aplikasi untuk iklan yang muncul di antara layar atau level game. Tidak seperti iklan reward, pengguna Anda tidak perlu memilih untuk melihat iklan. Untuk mengetahui detailnya, lihat Ringkasan unit iklan interstisial reward.

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

Prasyarat

Sebelum melanjutkan, lakukan hal berikut:

Android 

ca-app-pub-3940256099942544/5354046379

iOS 

ca-app-pub-3940256099942544/6978759866

Memuat iklan

Untuk memuat iklan interstisial reward, panggil metode load di class RewardedInterstitialAd.

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

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

Memproses peristiwa iklan

Sebelum menampilkan iklan, tetapkan pemroses adEventCallback pada instance RewardedInterstitialAd 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: RewardedInterstitialAd) {
  ad.adEventCallback = {
    // Called when the ad is presented on screen.
    onAdShowedFullScreenContent: () => {
      console.log('Rewarded interstitial ad showed full screen content.');
    },
    // Called when the ad is closed by the user.
    onAdDismissedFullScreenContent: () => {
      console.log('Rewarded interstitial ad dismissed full screen content.');
      ad.destroy();
    },
    // Called when presentation fails.
    onAdFailedToShowFullScreenContent: (error) => {
      console.error('Failed to show rewarded interstitial ad:', error);
      ad.destroy();
    },
    // Called when an impression is recorded.
    onAdImpression: () => {
      console.log('Rewarded interstitial ad recorded an impression.');
    },
    // Called when the user taps the ad.
    onAdClicked: () => {
      console.log('Rewarded interstitial ad was clicked.');
    },
    // Called when the ad is estimated to have earned money.
    onAdPaid: (adValue) => {
      console.log(
        `Rewarded 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 reward, panggil show pada instance RewardedInterstitialAd yang dimuat dan teruskan callback untuk menerima Reward:

export function showRewardedInterstitialAd(
  ad: RewardedInterstitialAd,
  onRewardEarned: (reward: Reward) => void,
) {
  ad.show(onRewardEarned);
}

Opsional: Memvalidasi callback verifikasi sisi server

Jika aplikasi Anda memerlukan parameter verifikasi kustom, seperti ID pengguna atau metadata reward kustom, dalam callback verifikasi sisi server (SSV), tetapkan properti serverSideVerificationOptions pada instance iklan yang dimuat sebelum menampilkan iklan.

Nilai yang Anda tetapkan akan diteruskan ke parameter kueri callback SSV:

  • userId: Diteruskan ke parameter kueri user_id untuk mengidentifikasi pengguna.
  • customData: Meneruskan ke parameter kueri custom_data untuk meneruskan metadata kustom.

Contoh berikut menetapkan ServerSideVerificationOptions (customData dan userId) pada objek iklan interstisial reward sebelum menampilkan iklan:

export function setServerSideVerificationRewardedInterstitial(
  ad: RewardedInterstitialAd,
) {
  ad.serverSideVerificationOptions = {
    userId: 'user_123',
    customData: 'sample_custom_data',
  };
}

Lihat contoh lengkapnya

Bagian ini membahas contoh lengkap untuk mengintegrasikan iklan interstisial reward 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 RewardedInterstitialSingleLoadScreen() {
  const [ad, setAd] = useState<RewardedInterstitialAd | null>(null);
  const [isLoaded, setIsLoaded] = useState(false);
  const [status, setStatus] = useState<string>('Idle');
  const [reward, setReward] = useState<string | null>(null);

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

  const handleLoad = async () => {
    setReward(null);
    setStatus('Loading Rewarded Interstitial ad...');
    const loadedAd = await loadRewardedInterstitialAd(
      REWARDED_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('Rewarded Interstitial ad loaded!');
    } else {
      setStatus('Failed to load Rewarded Interstitial ad.');
    }
  };

  const handleShow = () => {
    if (ad) {
      showRewardedInterstitialAd(ad, (userReward) => {
        setReward(`${userReward.amount} ${userReward.type}`);
      });
      setIsLoaded(false);
    }
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Rewarded Interstitial Ad</Text>
      <Text style={styles.status}>Status: {status}</Text>
      {reward && <Text style={styles.rewardText}>Earned: {reward}</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 reward, pelajari topik berikut: