Geçiş reklamları oluşturma

Geçiş reklamları, uygulamanızdaki geçiş noktalarında (ör. ekranlar arasında veya bir oyundaki seviyeler arasındaki duraklama sırasında) görünen tam ekran reklamlardır. Kullanıcılarınız reklamı tıklayarak hedefi ziyaret edebilir veya reklamı kapatıp uygulamaya dönebilir. Ayrıntılar için Geçiş reklamı kılavuzu ve örnek olay incelemesi bölümlerine bakın.

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, geçiş reklamlarını React Native uygulamasına nasıl entegre edeceğiniz gösterilmektedir.

Ön koşullar

Devam etmeden önce şunları yapın:

Android 

ca-app-pub-3940256099942544/1033173712

iOS 

ca-app-pub-3940256099942544/4411468910

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 geçiş reklamı yükleme kılavuzuna bakın.

Önceden yüklemeyi başlatma

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

Ö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 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, 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: 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 InterstitialAdPreloader.isAdAvailable yöntemini çağırarak reklamın kullanılabilir olduğunu doğrulayın. Reklamı almak için InterstitialAdPreloader.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 tam ekran sunum etkinlikleri dinlenir:

export function showPreloadedAd(
  preloadId: string,
  customAdEventCallback?: FullScreenAdEventCallback,
) {
  if (InterstitialAdPreloader.isAdAvailable(preloadId)) {
    const ad = InterstitialAdPreloader.pollAd(preloadId);
    if (ad) {
      ad.adEventCallback = {
        // Called when the ad is presented on screen.
        onAdShowedFullScreenContent: () => {
          console.log('Preloaded interstitial ad showed full screen content.');
          customAdEventCallback?.onAdShowedFullScreenContent?.();
        },
        // Called when the ad is closed by the user.
        onAdDismissedFullScreenContent: () => {
          console.log('Preloaded interstitial ad dismissed.');
          customAdEventCallback?.onAdDismissedFullScreenContent?.();
          ad.destroy();
        },
        // Called when presentation fails.
        onAdFailedToShowFullScreenContent: (error) => {
          console.error('Preloaded interstitial ad failed to show:', error);
          customAdEventCallback?.onAdFailedToShowFullScreenContent?.(error);
          ad.destroy();
        },
        // Called when an impression is recorded.
        onAdImpression: () => {
          console.log('Preloaded interstitial ad recorded an impression.');
          customAdEventCallback?.onAdImpression?.();
        },
        // Called when the user taps the ad.
        onAdClicked: () => {
          console.log('Preloaded interstitial ad was clicked.');
          customAdEventCallback?.onAdClicked?.();
        },
        // Called when the ad is estimated to have earned money.
        onAdPaid: (adValue) => {
          console.log(
            `Preloaded interstitial ad paid: ${adValue.amountMicros}` +
              ` ${adValue.currencyCode}`,
          );
          customAdEventCallback?.onAdPaid?.(adValue);
        },
      };
      ad.show();
    }
  } else {
    console.log('No preloaded interstitial ad available in buffer.');
  }
}

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 InterstitialAdPreloader.peekAdResponseInfo yöntemini çağırın:

export function peekPreloadedAdResponseInfo(preloadId: string) {
  if (InterstitialAdPreloader.isAdAvailable(preloadId)) {
    const responseInfo = InterstitialAdPreloader.peekAdResponseInfo(preloadId);
    if (responseInfo) {
      console.log('Next preloaded ad response info:', 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.

Kaynakları temizleme

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

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ş geçiş reklamlarını göstermek için kontroller sağlar:

export function InterstitialScreen() {
  const [numAdsAvailable, setNumAdsAvailable] = useState<number>(0);
  const [status, setStatus] = useState<string>('Initializing Preloader...');

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

  useEffect(() => {
    // Start preloading interstitial ads on component mount
    startPreloader(INTERSTITIAL_AD_UNIT_ID, PRELOAD_ID, {
      onAdPreloaded: () => {
        refreshAdCount();
        setStatus('Ad preloaded and ready!');
      },
      onAdFailedToPreload: (error) => {
        setStatus(`Preload failed: ${error.message}`);
      },
      onAdsExhausted: () => {
        refreshAdCount();
        setStatus('Preload buffer exhausted.');
      },
    });
    setStatus('Preloader started.');

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

  const handleShow = () => {
    showPreloadedAd(PRELOAD_ID, {
      onAdDismissedFullScreenContent: () => {
        setStatus('Ad dismissed.');
      },
      onAdFailedToShowFullScreenContent: (error) => {
        setStatus(`Failed to show ad: ${error.message}`);
      },
    });
    setStatus('Showing preloaded ad...');
    refreshAdCount();
  };

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

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

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

Sonraki adımlar

Geçiş reklamlarını entegre ettikten sonra aşağıdaki konuları inceleyin: