Tek bir ödüllü reklam yükleme

Ödüllü reklamlar, video reklamlar, oynanabilir reklamlar ve anketlerle etkileşimde bulunan kullanıcılarınıza uygulama içi öğeler verir. Ayrıntılar için Ödüllü reklam birimlerine genel bakış başlıklı makaleyi inceleyin.

Bu kılavuzda, ödüllü reklamları React Native yerel uygulamasına nasıl entegre edeceğiniz gösterilmektedir.

Ön koşullar

Devam etmeden önce şunları yapın:

Android 

ca-app-pub-3940256099942544/5224354917

iOS 

ca-app-pub-3940256099942544/1712485313

Reklam yükleme

Ödüllü reklam yüklemek için RewardedAd sınıfında load yöntemini çağırın.

Aşağıdaki örnekte, başarılı olduğunda ödüllü reklam yüklenir ve başarısız olduğunda hata günlüğe kaydedilir:

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

Reklam etkinliklerini dinleme

Reklamı göstermeden önce yüklenen RewardedAd örneğinde adEventCallback dinleyicisini ayarlayın. Bu dinleyici, reklamın ekranda gösterilmesi veya bir kullanıcının reklama dokunması gibi reklam yaşam döngüsü olayları için geri çağırmalar alır. Kullanılabilir geri aramalar için AdEventCallback bölümüne bakın.

Aşağıdaki örnekte, reklam etkinliklerini dinlemek için geri çağırmalar ayarlanmaktadır:

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

Bu örnekte, kullanıcı reklamı kapattığında veya reklam gösterilemediğinde destroy yöntemi de çağrılır. Bu işlem, reklamın kullandığı kaynakları serbest bırakır.

Reklamı göster

Ödüllü reklam göstermek için kullanıcının kazandığı ödülü işleyecek bir geri çağırma ile show yöntemini çağırın:

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

İsteğe bağlı: Sunucu tarafı doğrulama geri çağırmalarını doğrulama

Uygulamanız, sunucu tarafı doğrulama (SSV) geri çağırmalarında kullanıcı kimliği veya özel ödül meta verileri gibi özel doğrulama parametreleri gerektiriyorsa reklamı göstermeden önce yüklenen reklam örneğinde serverSideVerificationOptions özelliğini ayarlayın.

Ayarladığınız değerler, SSV geri çağırma sorgu parametrelerine iletilir:

  • userId: Kullanıcıyı tanımlamak için user_id sorgu parametresine iletilir.
  • customData: Özel meta verileri yönlendirmek için custom_data sorgu parametresine iletir.

Aşağıdaki örnekte, bir reklam gösterilmeden önce ödüllü reklam nesnesinde ServerSideVerificationOptions (customData ve userId) ayarlanmaktadır:

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

Örneğin tamamını görüntüleyin

Bu bölümde, ödüllü reklamları React Native uygulamasına entegre etmeyle ilgili tam bir örnek verilmektedir.

Aşağıdaki örnekte reklam, bir React Native bileşenine entegre edilmekte, reklam örneği durumda yönetilmekte ve reklamı yükleyip görüntülemek için kontroller sağlanmaktadır:

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

Sonraki adımlar

Ödüllü reklam entegrasyonu yaptıktan sonra aşağıdaki konuları inceleyin: