Ödüllü geçiş reklamları oluşturma

Ö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ıyan tam ekran bir reklam biçimidir. Ödüllü reklamların aksine, kullanıcılarınızın reklamı görüntülemeyi etkinleştirmesi gerekmez. Ayrıntılar için AdMob örnek olayları ve Ödüllü geçiş reklamı birimlerine genel bakış (Beta) başlıklı makaleleri inceleyin.

Sunum gecikmesini ortadan kaldırmak ve geçiş sırasında reklamın kullanılabilir 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 amacıyla reklam ön yüklemesini kullanır.

Bu kılavuzda, ödüllü geçiş reklamlarını bir React Native uygulamasında reklam ön yüklemesiyle nasıl entegre edeceğiniz gösterilmektedir.

Ön koşullar

Devam etmeden önce şunları yapın:

Android 

ca-app-pub-3940256099942544/5354046379

iOS 

ca-app-pub-3940256099942544/6978759866

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 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ü geçiş reklamı yükleme başlıklı makaleyi inceleyin.

Önceden yüklemeyi başlatma

Reklamları önceden yüklemeye başlamak için RewardedInterstitialAdPreloader.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 startRewardedInterstitialAdPreloader(
  adUnitId: string,
  preloadId: string,
  customPreloadCallback?: PreloadCallback,
): boolean {
  const started = RewardedInterstitialAdPreloader.start(
    preloadId,
    {
      request: {adUnitId},
      bufferSize: 2,
    },
    {
      // Called when an ad is preloaded into the buffer.
      onAdPreloaded: (event) => {
        console.log(
          `Rewarded interstitial ad preloaded for ${event.preloadId}`,
        );
        customPreloadCallback?.onAdPreloaded?.(event);
      },
      // Called when an ad fails to preload.
      onAdFailedToPreload: (error: LoadAdError) => {
        console.error(
          'Failed to preload rewarded interstitial ad:',
          error.message,
        );
        customPreloadCallback?.onAdFailedToPreload?.(error);
      },
      // Called when all preloaded ads in the buffer have been shown.
      onAdsExhausted: () => {
        console.log('Rewarded interstitial ad buffer exhausted.');
        customPreloadCallback?.onAdsExhausted?.();
      },
    },
  );
  return started;
}

preloadId, reklam ön yükleme yapılandırmasını benzersiz şekilde tanımlayan bir dizedir. Uygulamanızda tek bir önceden yükleme yapılandırması için reklam birimi kimliği kullanıyorsanız önceden yükleme kimliği olarak bu reklam birimi kimliğini kullanın. 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 geri çağırma işlevini çağırır.

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

Google Mobile Ads SDK for React Native, ö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: Her önceden yükleme kimliği için önceden yüklenmiş iki reklam.

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 RewardedInterstitialAdPreloader.isAdAvailable yöntemini çağırarak reklamın kullanılabilir olduğunu doğrulayın. Reklamı almak için RewardedInterstitialAdPreloader.pollAd yöntemini çağırın.

Reklam göstermek için show yöntemini çağırın. Kullanıcı reklamı izlemeyi bitirdiğinde ödülü vermek için onUserEarnedReward geri çağırma işlevini kullanı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 tam ekran sunum etkinlikleri dinlenir:

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

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

  ad.adEventCallback = {
    // Called when the ad is presented on screen.
    onAdShowedFullScreenContent: () => {
      console.log(
        'Preloaded rewarded interstitial ad showed full screen content.',
      );
      customAdEventCallback?.onAdShowedFullScreenContent?.();
    },
    // Called when the ad is closed by the user.
    onAdDismissedFullScreenContent: () => {
      console.log(
        'Preloaded rewarded interstitial ad dismissed full screen content.',
      );
      customAdEventCallback?.onAdDismissedFullScreenContent?.();
      ad.destroy();
    },
    // Called when presentation fails.
    onAdFailedToShowFullScreenContent: (error) => {
      console.error(
        'Failed to show preloaded rewarded interstitial ad:',
        error,
      );
      customAdEventCallback?.onAdFailedToShowFullScreenContent?.(error);
      ad.destroy();
    },
    // Called when an impression is recorded.
    onAdImpression: () => {
      console.log('Preloaded rewarded interstitial ad recorded an impression.');
      customAdEventCallback?.onAdImpression?.();
    },
    // Called when the user taps the ad.
    onAdClicked: () => {
      console.log('Preloaded rewarded interstitial ad was clicked.');
      customAdEventCallback?.onAdClicked?.();
    },
    // Called when the ad is estimated to have earned money.
    onAdPaid: (adValue) => {
      console.log(
        `Preloaded rewarded interstitial 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 RewardedInterstitialAdPreloader.peekAdResponseInfo yöntemini çağırın:

export function peekRewardedInterstitialAdResponseInfo(
  preloadId: string,
): ResponseInfo | null {
  const responseInfo =
    RewardedInterstitialAdPreloader.peekAdResponseInfo(preloadId);
  if (responseInfo) {
    console.log(
      'Next preloaded rewarded interstitial 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ı: SSV geri çağırmalarını doğrulama

Uygulamanızın sunucu tarafı doğrulama (SSV) geri çağırmalarında kullanıcı kimliği veya özel ödül meta verileri gibi özel doğrulama parametrelerine ihtiyacı varsa 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, 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',
  };
}

Kaynakları temizleme

Oturumun geri kalanında belirli bir önceden yükleme kimliği için reklam göstermeniz gerekmiyorsa RewardedInterstitialAdPreloader.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 destroyRewardedInterstitialAdPreloader(preloadId: string) {
  RewardedInterstitialAdPreloader.destroy(preloadId);
}

Kullanıcınız reklamı kapattıktan veya reklam gösterilemedikten sonra, yoklama yapılan 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

Bu bölümde, reklam ön yüklemesinin tam olarak uygulanması ele alınmaktadır.

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

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

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

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

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

  const handleShowAd = () => {
    setReward(null);
    setStatus('Showing preloaded ad...');
    showPreloadedRewardedInterstitialAd(
      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 Interstitial 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>
  );
}

Sonraki adımlar

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