Uygulama açılış reklamlarını ayarlama

Uygulama açılış reklamları, kullanıcılarınız uygulamanızı açtığında veya uygulamanıza geri döndüğünde gösterilir. Kullanıcılarınız uygulama açılış reklamlarını diledikleri zaman kapatabilir. Uygulamanızın yükleme ekranından para kazanmak için uygulama açılış reklamlarını kullanın. Ayrıntılı bilgi için Uygulama açılış reklamı rehberliği ve en iyi uygulamalar başlıklı makaleyi inceleyin.

Bu kılavuzda, uygulama açılış reklamlarının React Native uygulamalarına nasıl entegre edileceği açıklanmaktadır.

Ön koşullar

Devam etmeden önce şunları yapın:

Android 

ca-app-pub-3940256099942544/9257395921

iOS 

ca-app-pub-3940256099942544/5575463023

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

Önceden yüklemeyi başlatma

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

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

preloadId, reklam ön yükleme yapılandırmasını benzersiz şekilde tanımlayan bir dizedir. adUnitId, uygulamanızda yalnızca tek bir önceden yükleme yapılandırması için kullanılıyorsa 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 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.
  • Her önceden yükleme kimliği için iki arabellek boyutu kullanmanızı öneririz.

Uygulamanız uygulama genelindeki sınıra ulaşırsa önceden yüklenmiş reklamlar için arka plan istekleri, mevcut reklamlar sorgulanıp gösterilene veya yok edilene kadar duraklatılır.

Reklamı yoklama ve gösterme

Kullanılabilir önceden yüklenmiş reklamları kontrol etmek ve bir reklam örneği almak için AppOpenAdPreloader.pollAd yöntemini çağırın.

Tam ekran sunu etkinliklerini dinlemek için show yöntemini çağırmadan önce döndürülen AppOpenAd örneğinin adEventCallback özelliğine geri çağırmaları kaydedin:

export function showPreloadedAppOpenAd(
  preloadId: string,
  customAdEventCallback?: FullScreenAdEventCallback,
) {
  if (!AppOpenAdPreloader.isAdAvailable(preloadId)) {
    console.log('No preloaded app open ad available right now.');
    return;
  }

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

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

  ad.show();
}

Belleği ve kaynakları serbest bırakmak için kullanıcı bir reklamı kapattığında veya reklam gösterilemediğinde onAdDismissedFullScreenContent ve onAdFailedToShowFullScreenContent geri çağırmalarında ad.destroy yöntemini çağırın.

Yanıt bilgilerini okuma

Önceden yüklenmiş bir sonraki reklamın ayrıntılarını, reklamı önbellekten kaldırmadan incelemek için AppOpenAdPreloader.peekAdResponseInfo yöntemini çağırın:

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

Uygulama açılış reklamlarını uygulama düzeyinde bir yöneticiyle yönetme

Uygulama açılış reklamları, uygulama başlatma ve ön plan geçişleri sırasında global olarak sunulduğundan, ön yükleyici yaşam döngüsü durumunu React bileşen ağacının dışındaki uygulama düzeyinde bir yöneticide yönetmenizi öneririz.

Uygulama düzeyinde yönetici kullanmanın başlıca avantajları şunlardır:

  • Ön yükleyici durumunu, bağımsız ekran gezinmesinden ve bileşen yaşam döngüsünden bağımsız tutar.
  • Reklam etkinliği geri çağırmalarını, durum izlemeyi ve temizlemeyi uygulamanız genelinde tek bir paylaşılan örnekte merkezileştirir.
  • Ön plan etkinliklerinin ne zaman dinleneceğini kontrol ederek reklam kapatıldığında yinelenen sunumları önler.

Aşağıdaki örnekte, AppOpenAdPreloader nesnesi kullanılarak uygulama düzeyinde bir yönetici uygulanmaktadır:

export class AppOpenAdManager {
  private adUnitId: string;
  private preloadId: string;
  private appStateSubscription?: NativeEventSubscription;
  private startTimeoutId?: ReturnType<typeof setTimeout>;

  constructor(adUnitId: string, preloadId: string) {
    this.adUnitId = adUnitId;
    this.preloadId = preloadId;
  }

  start(): boolean {
    if (!AppOpenAdPreloader.getConfiguration(this.preloadId)) {
      AppOpenAdPreloader.start(
        this.preloadId,
        {
          request: {adUnitId: this.adUnitId},
          bufferSize: 2,
        },
        {
          onAdPreloaded: (event) => {
            console.log(`App open ad preloaded for ${event.preloadId}`);
          },
          onAdFailedToPreload: (error: LoadAdError) => {
            console.error('Failed to preload app open ad:', error.message);
          },
          onAdsExhausted: () => {
            console.log('App open ad buffer exhausted.');
          },
        },
      );
    }

    if (!this.appStateSubscription && !this.startTimeoutId) {
      // Delay attaching the listener to ensure native dismissal transitions complete
      this.startTimeoutId = setTimeout(() => {
        this.startTimeoutId = undefined;
        if (!this.appStateSubscription) {
          this.appStateSubscription = AppState.addEventListener(
            'change',
            (nextAppState: AppStateStatus) => {
              if (nextAppState === 'active') {
                this.showAdIfAvailable();
              }
            },
          );
        }
      }, APP_STATE_LISTENER_DELAY_MS);
    }

    return true;
  }

  pause(): void {
    if (this.startTimeoutId) {
      clearTimeout(this.startTimeoutId);
      this.startTimeoutId = undefined;
    }
    this.appStateSubscription?.remove();
    this.appStateSubscription = undefined;
  }

  stop(): void {
    this.pause();
    AppOpenAdPreloader.destroy(this.preloadId);
  }

  showAdIfAvailable() {
    if (!AppOpenAdPreloader.isAdAvailable(this.preloadId)) {
      console.log('App open ad is not preloaded or available right now.');
      return;
    }

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

    // Pause listener while presenting the ad
    this.pause();

    ad.adEventCallback = {
      onAdShowedFullScreenContent: () => {
        console.log('Preloaded app open ad showed full screen content.');
      },
      onAdDismissedFullScreenContent: () => {
        console.log('Preloaded app open ad dismissed full screen content.');
        ad.destroy();
        this.start();
      },
      onAdFailedToShowFullScreenContent: (error) => {
        console.error('Failed to show preloaded app open ad:', error);
        ad.destroy();
        this.start();
      },
    };

    ad.show();
  }
}

Uygulamayı ön plana alma etkinliklerini dinleme

Uygulamanız ön plana döndüğünde reklam göstermek için uygulamanızın kök bileşenindeki AppState modülüne bir change dinleyicisi kaydedin (ör. App.tsx). Durumun active olarak değiştiği zamanı kontrol edin. Örneğin, App.tsx bileşenindeki reklam yöneticisi örneğinizde start yöntemini çağırın.

Tam ekran reklam gösterme veya banner reklama dokunma gibi reklam bilgi notları ya da açılış sayfaları sunulduğunda uygulamanız arka plana alınır. Kullanıcı uygulamanıza döndüğünde uygulamanız yeni bir active durum etkinliği alır. İstenmeyen bir reklam sunumunu veya bir reklamdan dönüldüğünde önbellekten bir uygulama açılış reklamının sunulduğu bir döngüyü önlemek için aşağıdakileri yapın:

  1. Tam ekran reklam göstermeden önce AppState etkinlik işleyicisini kaldırın.
  2. Kullanıcı reklamı kapattığında veya reklam gösterilemediğinde dinlemenin devam etmesini sağlamak için onAdDismissedFullScreenContent ve onAdFailedToShowFullScreenContent geri çağırmalarına AppState etkinlik işleyicisini tekrar ekleyin.

Ön plan etkinlik işleyicilerin ne zaman duraklatılıp devam ettirileceğini kontrol etmeyle ilgili eksiksiz bir örnek için AppOpenAdManager uygulamasına bakın.

Baştan başlatma ve yükleme ekranları hakkında bilgi edinme

Baştan başlatma, uygulamanız sıfırdan başlatıldığında gerçekleşir. Örneğin, bir kullanıcı uygulamanızı ilk kez açtığında veya cihaz, bellekte yer açmak için uygulamayı kapattıktan sonra. Baştan başlatma sırasında, bir sonraki gösterim için önceden yüklenmiş bir uygulama açılış reklamınız olmaz.

Reklam isteği gecikmeleri nedeniyle kullanıcılarınız, reklam gösterilmeden önce uygulamanızla etkileşime geçebilir. Uygulama açılış reklamlarını, baştan başlatmalarda yalnızca uygulama öğeleri yüklenirken yükleme ekranında gösterin. Öğelerin yüklenmesi tamamlanırsa ve kullanıcı reklam yüklenmeden önce ana içeriğe ulaşırsa reklamı göstermeyin.

Kaynakları temizleme

Bir ekran veya reklam birimi kimliği için önceden yükleme artık gerekli olmadığında (ör. reklamları önceden yükleyen bir ekrandan ayrılırken) önceden yükleyici kaynaklarını serbest bırakmak ve kullanılmayan reklam nesnelerinin bellekte tutulmasını önlemek için AppOpenAdPreloader.destroy yöntemini çağırın:

export function destroyAppOpenAdPreloader(preloadId: string) {
  AppOpenAdPreloader.destroy(preloadId);
}

Ön yükleyici sırasını yok etmenin yanı sıra, kullanıcı bir reklamı kapattığında veya reklam gösterilemediğinde tek tek yoklama yapılan reklam örneklerini de yok ettiğinizden emin olun. Ayrıntılı bilgi 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, yükleme sırasında önceden yüklemeye başlar, kullanılabilir reklam sayılarını izler ve önceden yüklenmiş uygulama açılış reklamlarını göstermek için kontroller sağlar:

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

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

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

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

  const handleShowAd = () => {
    setStatus('Showing preloaded ad...');
    showPreloadedAppOpenAd(PRELOAD_ID, {
      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 App Open 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={handleShowAd}
          disabled={numAdsAvailable === 0}
        />
      </View>
    </View>
  );
}

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

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

Sonraki adımlar

Uygulama açılış reklamlarını entegre ettikten sonra aşağıdaki konuları inceleyin: