Tek bir ödüllü geçiş reklamı yükleme

Ödüllü geçiş reklamları, ekranlar veya oyun seviyeleri arasında görünen reklamlar için uygulama içi öğeler sunmanıza olanak tanır. Ödüllü reklamların aksine, kullanıcılarınızın reklamı görüntülemeyi etkinleştirmesi gerekmez. Ayrıntılar için Ödüllü geçiş reklamı birimlerine genel bakış başlıklı makaleyi inceleyin.

Bu kılavuzda, ödüllü geçiş reklamlarının React Native yerel uygulamalarına nasıl entegre edileceği açıklanmaktadır.

Ön koşullar

Devam etmeden önce şunları yapın:

Android 

ca-app-pub-3940256099942544/5354046379

iOS 

ca-app-pub-3940256099942544/6978759866

Reklam yükleme

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

Aşağıdaki örnekte, başarılı olduğunda ödüllü geçiş reklamı yüklenir ve başarısız olduğunda bir hata kaydedilir:

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

Reklam etkinliklerini dinleme

Reklamı göstermeden önce yüklenen RewardedInterstitialAd örneğinde adEventCallback dinleyicisini ayarlayın. Bu işleyici, reklamın ekranda gösterilmesi veya kullanıcının reklama dokunması gibi reklam yaşam döngüsü olayları için geri çağırmalar alır. Kullanılabilir geri çağırmalar için AdEventCallback sayfasına bakın.

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

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

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ü geçiş reklamı göstermek için yüklenen RewardedInterstitialAd örneğinde show yöntemini çağırın ve Reward değerini almak için bir geri çağırma işlevi iletin:

export function showRewardedInterstitialAd(
  ad: RewardedInterstitialAd,
  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, reklam gösterilmeden önce ödüllü geçiş reklamı nesnesinde ServerSideVerificationOptions (customData ve userId) ayarlanmaktadır:

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

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

Bu bölümde, ödüllü geçiş reklamını bir React Native yerel 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 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>
  );
}

Sonraki adımlar

Ödüllü geçiş reklamlarını entegre ettikten sonra aşağıdaki konuları inceleyin: