Tek bir uygulama açılış reklamı yükleme

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ılar için

Uygulama açılış reklamı rehberliği ve en iyi uygulamalar.

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 yükleme

Uygulama açılış reklamı yüklemek için load yöntemini çağırın.

Aşağıdaki örnekte, başarılı olduğunda uygulama açılış reklamı yüklenir ve başarısız olduğunda bir hata günlüğe kaydedilir:

export async function loadAppOpenAd(
  adUnitId: string,
): Promise<AppOpenAd | null> {
  try {
    const ad = await AppOpenAd.load({adUnitId});
    return ad;
  } catch (error) {
    const loadError = error as LoadAdError;
    console.error('Failed to load app open ad:', loadError.message);
    return null;
  }
}

Reklam etkinliklerini dinleme

Reklamı göstermeden önce yüklenen AppOpenAd örneğinde adEventCallback dinleyicisini ayarlayın. Bu dinleyici, reklamın ekranda gösterilmesi veya kullanıcının reklama dokunması gibi reklam yaşam döngüsü olaylarının geri çağırmalarını alır. Kullanılabilir geri aramalar 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: AppOpenAd) {
  ad.adEventCallback = {
    // Called when the ad is presented on screen.
    onAdShowedFullScreenContent: () => {
      console.log('App open ad showed full screen content.');
    },
    // Called when the ad is closed by the user.
    onAdDismissedFullScreenContent: () => {
      console.log('App open ad dismissed full screen content.');
      ad.destroy();
    },
    // Called when presentation fails.
    onAdFailedToShowFullScreenContent: (error) => {
      console.error('Failed to show app open ad:', error);
      ad.destroy();
    },
    // Called when an impression is recorded.
    onAdImpression: () => {
      console.log('App open ad recorded an impression.');
    },
    // Called when the user taps the ad.
    onAdClicked: () => {
      console.log('App open ad was clicked.');
    },
    // Called when the ad is estimated to have earned money.
    onAdPaid: (adValue) => {
      console.log(
        `App open ad paid: ${adValue.amountMicros} ${adValue.currencyCode}`,
      );
    },
  };
}

Bu örnekte, kullanıcı reklamı kapattığında veya reklam gösterilemediğinde destroy yöntemi de kullanılır. Bu işlem, reklamın kullandığı kaynakları serbest bırakır.

Reklamı göster

Uygulama açılış reklamı göstermek için show yöntemini çağırın:

export function showAppOpenAd(ad: AppOpenAd) {
  ad.show();
}

Reklamları uygulama düzeyinde yöneticiyle yönetme

Uygulama açılış reklamlarını, React bileşen ağacının dışında uygulama düzeyinde bir yöneticide yönetmenizi öneririz. Uygulama açılış reklamları, kullanıcı uygulamanızı açtığında veya uygulamanıza geri döndüğünde genel olarak gösterildiğinden, uygulama düzeyinde bir yönetici reklamları kullanıcı arayüzünden ayrı tutar.

Aşağıdaki örnekte, bir reklam yükleyen, reklam etkinliklerini dinleyen ve reklam kullanılabilirliğini kontrol eden bir SingleLoadAppOpenAdManager örneği oluşturulmaktadır:

export class SingleLoadAppOpenAdManager {
  private ad: AppOpenAd | null = null;
  private loadTime = 0;
  private isShowingAd = false;

  async loadAd(adUnitId: string) {
    // Avoid re-loading if an ad is already loaded or showing.
    if (this.ad) {
      return;
    }
    try {
      this.ad = await AppOpenAd.load({adUnitId});
      this.loadTime = Date.now();
      this.ad.adEventCallback = {
        onAdDismissedFullScreenContent: () => {
          this.ad?.destroy();
          this.ad = null;
          this.isShowingAd = false;
          // Preload the next ad for future foreground transitions.
          this.loadAd(adUnitId);
        },
        onAdFailedToShowFullScreenContent: () => {
          // An ad object that fails to present is consumed and cannot be reused.
          // Clean up native resources and preload a new ad for future events.
          this.ad?.destroy();
          this.ad = null;
          this.isShowingAd = false;
          this.loadAd(adUnitId);
        },
      };
    } catch (error) {
      console.error('Failed to load app open ad:', error);
    }
  }

  showAdIfAvailable() {
    if (!this.ad || !this.isAdAvailable()) {
      console.warn(
        'App open ad cannot be shown: ad is not loaded or has expired.',
      );
      return;
    }
    if (this.isShowingAd) {
      console.warn('App open ad cannot be shown: an ad is already displaying.');
      return;
    }

    this.ad.show();
    this.isShowingAd = true;
  }

  isAdAvailable(): boolean {
    // App Open ads expire after 4 hours per Google Mobile Ads policy.
    const FOUR_HOURS_IN_MS = 4 * 60 * 60 * 1000;
    return this.ad !== null && Date.now() - this.loadTime < FOUR_HOURS_IN_MS;
  }
}

Uygulama düzeyinde yönetici, aşağıdakileri yapmanıza yardımcı olur:

  • Reklam durumunu, ekranda gezinme ve bileşen yaşam döngülerinden bağımsız tutun.
  • Doğal iş parçacığı etkinlikleri genelinde reklam sunma durumunu izleme
  • Tekrarlanan reklamların gösterilmesini önlemek için uygulamanın ön plana geçişlerini yönetin.
  • Reklamları uygulamanız açıldığında kullanılabilir hale getirmek için arka planda önceden yükleyin.
  • Süresi dolmuş reklamların gösterilmesini önlemek için dört saatlik reklam geçerlilik süresi sınırını kontrol edin.
  • Reklam kaynaklarını yükleme, gösterme ve temizleme işlemlerini birleştirin.

Uygulamanın ön plana alma etkinliklerini dinleme

Uygulamanız ön plana döndüğünde görüntülü reklamlar göstermek için AppState modülünü kullanarak uygulamanızın kökündeki (ör. App.tsx dosyasında) uygulama durumu değişikliklerini dinleyin. Aşağıdakileri yapın:

  1. 'change' etkinliği için bir AppState işleyici kaydedin.
  2. Durum 'active' durumuna geçtiğinde reklam yöneticisi örneğinde showAdIfAvailable yöntemini çağırın.

Aşağıdaki örnekte, uygulama ön plan etkinlikleri dinlenir ve varsa bir reklam gösterilir:

export function setupAppOpenAdForegroundListener(adManager: {
  showAdIfAvailable: () => void;
}): NativeEventSubscription {
  return AppState.addEventListener('change', (nextAppState: AppStateStatus) => {
    if (nextAppState === 'active') {
      adManager.showAdIfAvailable();
    }
  });
}

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. Kullanıcı deneyiminin olumsuz etkilenmemesi için uygulama açılış reklamlarını sıfırdan 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.

Test ekranı oluşturma

Reklamları etkileşimli olarak test etmek veya belirli bir ekranda göstermek için reklam örneğini bileşen durumunda yönetin.

Aşağıdaki örnekte, useEffect temizleme kancasıyla bir React Native bileşenine uygulama açılış reklamı entegre edilmektedir. Bileşen, reklam gösterilmeden önce kaldırılırsa bu kanca yerel kaynakları serbest bırakır.

export function AppOpenSingleLoadScreen() {
  const [ad, setAd] = useState<AppOpenAd | null>(null);
  const [isLoaded, setIsLoaded] = useState(false);
  const [status, setStatus] = useState<string>('Idle');

  useEffect(() => {
    return () => {
      ad?.destroy();
    };
  }, [ad]);

  const handleLoad = async () => {
    setStatus('Loading App Open ad...');
    const loadedAd = await loadAppOpenAd(APP_OPEN_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('App Open ad loaded!');
    } else {
      setStatus('Failed to load App Open ad.');
    }
  };

  const handleShow = () => {
    if (ad) {
      showAppOpenAd(ad);
      setIsLoaded(false);
    }
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>App Open Ad</Text>
      <Text style={styles.status}>Status: {status}</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

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