Tek bir geçiş reklamı yükleme

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.

Bu kılavuzda, geçiş reklamlarını React Native uygulamasına nasıl entegre edeceğiniz gösterilmektedir.

Ön koşullar

Android 

ca-app-pub-3940256099942544/1033173712

iOS 

ca-app-pub-3940256099942544/4411468910

Reklam yükleme

Geçiş reklamı yüklemek için InterstitialAd sınıfında load yöntemini çağırın.

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

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

Reklam etkinliklerini dinleme

Reklamı göstermeden önce yüklenen InterstitialAd örneğinde adEventCallback dinleyicisini ayarlayın. Bu dinleyici, reklamın ekranda gösterilmesi veya bir kullanıcının reklama dokunması gibi reklam yaşam döngüsü olayları için geri çağırmalar alır. Kullanılabilir geri aramalar için AdEventCallback bölümüne bakın.

Aşağıdaki örnekte, reklam etkinliklerini dinlemek için geri çağırmalar ayarlanmaktadır:

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

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

Reklamı göster

Geçiş reklamı göstermek için yüklenen InterstitialAd örneğinde show yöntemini çağırın.

Aşağıdaki örnekte bir geçiş reklamı gösterilmektedir:

export function showInterstitialAd(ad: InterstitialAd) {
  ad.show();
}

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

Bu bölümde, bir geçiş reklamını React Native yerel uygulamasına entegre etmeyle ilgili tam örnek verilmektedir.

Aşağıdaki örnekte reklam bir React Native bileşenine entegre edilmekte, reklam örneği durumda yönetilmekte ve reklamı yükleyip görüntülemek için kontroller sağlanmaktadır:

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

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

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

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

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Interstitial 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

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