Memuat satu iklan reward

Iklan reward memberi pengguna item dalam aplikasi karena telah berinteraksi dengan iklan video, iklan yang dapat dimainkan, dan survei. Untuk mengetahui detailnya, lihat Ringkasan unit iklan reward.

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

Prasyarat

Sebelum melanjutkan, lakukan hal berikut:

Android 

ca-app-pub-3940256099942544/5224354917

iOS 

ca-app-pub-3940256099942544/1712485313

Memuat iklan

Untuk memuat iklan reward, panggil metode load di class RewardedAd.

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

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

Memproses peristiwa iklan

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

export function showRewardedAd(
  ad: RewardedAd,
  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 reward sebelum menampilkan iklan:

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

Lihat contoh lengkapnya

Bagian ini membahas contoh lengkap untuk mengintegrasikan iklan 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 RewardedSingleLoadScreen() {
  const [ad, setAd] = useState<RewardedAd | 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 ad...');
    const loadedAd = await loadRewardedAd(REWARDED_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 ad loaded!');
    } else {
      setStatus('Failed to load Rewarded ad.');
    }
  };

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

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Rewarded Ad (Single Load)</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 reward, pelajari topik berikut: