Ödüllü reklamları ayarlama

Ö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.

Sunum gecikmesini ortadan kaldırmak ve kullanıcı ödül kazandığında reklamın hazır olmasını sağlamak için Google Mobile Ads SDK for React Native, arka planda yükleme, önbelleğe alma ve arabellek yenileme işlemlerini yönetmek için reklam ön yüklemesini kullanır.

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 ön yüklemesi hakkında bilgi

Google Mobile Ads SDK for React Native uygulamasındaki reklam ön yüklemesi, reklam yükleme ve önbelleğe alma işlemlerini otomatikleştirir.

Reklam ön yüklemesi aşağıdaki avantajları sağlar:

  • Referans yönetimi: Reklamlar gösterilene kadar referansları korur.
  • Otomatik yeniden yükleme: Önbellekten bir reklam alındığında yeni bir reklam yükler.
  • Yönetilen yeniden denemeler: Bir reklam yüklenemediğinde yeni bir reklam yükler.
  • Süre sonu işleme: Süreleri dolmadan önce reklamları yeniler.
  • Önbellek optimizasyonu: En yüksek öncelikli reklamı yayınlamak için önbellek sırasını optimize eder.

Reklamları manuel olarak yüklemek için Tek bir ödüllü reklam yükleme bölümüne bakın.

Önceden yüklemeyi başlatma

Reklamları önceden yüklemeye başlamak için RewardedAdPreloader.start yöntemini çağırın ve arabellek durumu değişikliklerini izlemek için preloadId değerinizi, yapılandırma ayarlarınızı ve etkinlik geri çağırmalarınızı iletin:

export function startRewardedAdPreloader(
  adUnitId: string,
  preloadId: string,
  customPreloadCallback?: PreloadCallback,
): boolean {
  const started = RewardedAdPreloader.start(
    preloadId,
    {
      request: {adUnitId},
      bufferSize: 2,
    },
    {
      // Called when an ad is preloaded into the buffer.
      onAdPreloaded: (event) => {
        console.log(`Rewarded ad preloaded for ${event.preloadId}`);
        customPreloadCallback?.onAdPreloaded?.(event);
      },
      // Called when an ad fails to preload.
      onAdFailedToPreload: (error: LoadAdError) => {
        console.error('Failed to preload rewarded ad:', error.message);
        customPreloadCallback?.onAdFailedToPreload?.(error);
      },
      // Called when all preloaded ads in the buffer have been shown.
      onAdsExhausted: () => {
        console.log('Rewarded ad buffer exhausted.');
        customPreloadCallback?.onAdsExhausted?.();
      },
    },
  );
  return started;
}

Ön yükleme kimliği, reklam ön yükleme yapılandırmasını benzersiz şekilde tanımlayan bir dizedir. Uygulamanızdaki tek bir önceden yükleme yapılandırması için reklam birimi kimliğini kullanıyorsanız bu reklam birimi kimliğini önceden yükleme kimliği olarak kullanabilirsiniz. Uygulamanız aynı reklam birimi kimliği için birden fazla önceden yükleyici gerektiriyorsa her önceden yükleme kimliği için farklı dizeler iletin.

Uygulamanız arabellekten önceden yüklenmiş bir reklamı sorguladığında Google Mobile Ads SDK for React Native, arabelleği yeniden doldurmak için arka planda yeni bir reklam ister. Arabellekte önceden yüklenmiş reklam kalmadıysa Google Mobile Ads SDK for React Native, onAdsExhausted yöntemini çağırır.

Önbellek sınırlarını önceden yükleme

Google Mobile Ads SDK for React Native, tüm reklam birimleri ve önceden yükleme kimlikleri genelinde önceden yüklenen reklamların toplam sayısı için uygulama genelinde bir sınır uygular:

  • Varsayılan sınır: Google, bellekte en fazla altı önceden yüklenmiş reklam tutar. Bu sınır, tüm biçimler ve önceden yükleme kimlikleri arasında paylaşılır.
  • Önerilen arabellek boyutu: Her önceden yükleme kimliği için iki.

Uygulamanız uygulama genelindeki sınıra ulaşırsa önceden yüklenmiş reklamlar için arka plan istekleri, mevcut reklamlar önbellekten sorgulanana veya yok edilene kadar duraklatılır. Önceden yükleme, tam ekran reklam ekranda etkin bir şekilde gösterilirken de geçici olarak duraklatılır.

Reklamı yoklama ve gösterme

Reklam göstermeden önce RewardedAdPreloader.isAdAvailable yöntemini çağırarak reklamın kullanılabilir olduğunu doğrulayın. Reklamı almak için RewardedAdPreloader.pollAd yöntemini çağırın.

Reklam kapatma veya görüntüleme hataları gibi sunum etkinliklerini dinlemek için show yöntemini çağırmadan önce reklam örneğinde adEventCallback özelliğini ayarlayın:

Aşağıdaki örnekte, reklamın kullanılabilirliği kontrol edilir ve reklam gösterilmeden önce sunum etkinlikleri dinlenir:

export function showPreloadedRewardedAd(
  preloadId: string,
  onRewardEarned: (reward: Reward) => void,
  customAdEventCallback?: FullScreenAdEventCallback,
) {
  if (!RewardedAdPreloader.isAdAvailable(preloadId)) {
    console.log('No preloaded rewarded ad available right now.');
    return;
  }

  const ad = RewardedAdPreloader.pollAd(preloadId);
  if (!ad) {
    return;
  }

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

  ad.show(onRewardEarned);
}

Belleği ve kaynakları serbest bırakmak için onAdDismissedFullScreenContent ve onAdFailedToShowFullScreenContent geri çağırmalarında ad.destroy yöntemini çağırın.

Yanıt bilgilerini okuma

Reklamı önbellekten kaldırmadan bir sonraki önceden yüklenmiş reklamın yanıt bilgilerini incelemek için RewardedAdPreloader.peekAdResponseInfo yöntemini çağırın:

export function peekRewardedAdResponseInfo(
  preloadId: string,
): ResponseInfo | null {
  const responseInfo = RewardedAdPreloader.peekAdResponseInfo(preloadId);
  if (responseInfo) {
    console.log('Next preloaded rewarded ad response info:', responseInfo);
  }
  return responseInfo;
}

Reklam varsa peekAdResponseInfo yöntemi, yüklenen reklam kaynağı ve ağ bağdaştırıcıları hakkında bilgi içeren bir ResponseInfo nesnesi döndürür.

İ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 show yöntemini çağırmadan önce yoklanan 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',
  };
}

Kaynakları temizleme

Oturumun geri kalanında belirli bir önceden yükleme kimliği için reklam göstermeniz gerekmiyorsa RewardedAdPreloader.destroy yöntemini çağırın. Bu işlem, söz konusu önceden yükleme kimliği için önceden yüklemeyi durdurur ve kullanılmayan önceden yüklenmiş reklamları bellekten kaldırır.

Aşağıdaki örnekte önceden yükleme durdurulmaktadır:

export function destroyRewardedAdPreloader(preloadId: string) {
  RewardedAdPreloader.destroy(preloadId);
}

Kullanıcınız reklamı kapattıktan veya reklam gösterilemedikten sonra, yoklanan her bir reklam örneğini silin. Ayrıntılar için Reklamı yoklama ve gösterme bölümüne bakın.

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

Aşağıdaki örnek bileşen, bağlama sırasında önceden yüklemeye başlar, kullanılabilir reklam sayılarını izler ve önceden yüklenmiş ödüllü reklamları göstermek için kontroller sağlar:

export function RewardedScreen() {
  const [numAdsAvailable, setNumAdsAvailable] = useState<number>(0);
  const [status, setStatus] = useState<string>('Preloader idle.');
  const [reward, setReward] = useState<string | null>(null);

  const refreshAdCount = () => {
    const count = RewardedAdPreloader.getNumAdsAvailable(PRELOAD_ID);
    setNumAdsAvailable(count);
  };

  useEffect(() => {
    // Start preloading ads on component mount
    const started = startRewardedAdPreloader(REWARDED_AD_UNIT_ID, PRELOAD_ID, {
      onAdPreloaded: () => {
        refreshAdCount();
        setStatus('Rewarded ad preloaded into buffer.');
      },
      onAdFailedToPreload: (error) => {
        setStatus(`Failed to preload rewarded ad: ${error.message}`);
      },
      onAdsExhausted: () => {
        refreshAdCount();
        setStatus('Preload buffer exhausted for rewarded ads.');
      },
    });
    if (started) {
      setStatus('Preloader started.');
    }

    // Clean up preloader resources on component unmount
    return () => {
      destroyRewardedAdPreloader(PRELOAD_ID);
    };
  }, []);

  const handleShowAd = () => {
    setReward(null);
    setStatus('Showing preloaded ad...');
    showPreloadedRewardedAd(
      PRELOAD_ID,
      (userReward) => {
        setReward(`${userReward.amount} ${userReward.type}`);
      },
      {
        onAdDismissedFullScreenContent: () => {
          setStatus('Ad dismissed.');
        },
        onAdFailedToShowFullScreenContent: (error) => {
          setStatus(`Failed to show preloaded ad: ${error.message}`);
        },
      },
    );
    refreshAdCount();
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Preload Rewarded Ads</Text>
      <Text style={styles.status}>Status: {status}</Text>
      <Text style={styles.status}>Ads Available: {numAdsAvailable}</Text>
      {reward && <Text style={styles.rewardText}>Earned: {reward}</Text>}
      <View style={styles.buttonGroup}>
        <Button
          title="Show Preloaded Ad"
          onPress={handleShowAd}
          disabled={numAdsAvailable === 0}
        />
      </View>
    </View>
  );
}

Aşağıdakini değiştirin:

  • REWARDED_AD_UNIT_ID yerine reklam birimi kimliğinizi yazın.
  • PRELOAD_ID ön yükleyici kimliğinizle.

Sonraki adımlar

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