Einzelne Interstitial-Anzeige laden

Interstitial-Anzeigen sind Vollbildanzeigen, die an Übergangspunkten in Ihrer App eingeblendet werden, z. B. zwischen Bildschirmen oder während der Pause zwischen Levels in einem Spiel. Nutzer können auf die Anzeige tippen, um die Zielseite aufzurufen, oder die Anzeige schließen und zur App zurückkehren. Weitere Informationen finden Sie im Leitfaden für Interstitial-Anzeigen und in einer Fallstudie.

In diesem Leitfaden erfahren Sie, wie Sie Interstitial-Anzeigen in eine React Native-App einbinden.

Vorbereitung

Android 

ca-app-pub-3940256099942544/1033173712

iOS 

ca-app-pub-3940256099942544/4411468910

Anzeige laden

Rufen Sie zum Laden einer Interstitial-Anzeige die Methode load für die Klasse InterstitialAd auf.

Im folgenden Beispiel wird bei Erfolg eine Interstitial-Anzeige geladen und bei einem Fehler ein Fehler protokolliert:

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;
  }
}

Auf Anzeigenereignisse warten

Bevor Sie die Anzeige präsentieren, legen Sie den adEventCallback-Listener für die geladene InterstitialAd-Instanz fest. Dieser Listener empfängt Callbacks für Anzeigen-Lifecycle-Ereignisse, z. B. wenn die Anzeige auf dem Bildschirm erscheint oder ein Nutzer auf die Anzeige tippt. Informationen zu verfügbaren Callbacks finden Sie unter AdEventCallback.

Im folgenden Beispiel werden Callbacks festgelegt, um auf Anzeigenereignisse zu warten:

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}`,
      );
    },
  };
}

In diesem Beispiel wird auch die Methode destroy aufgerufen, wenn ein Nutzer die Anzeige schließt oder die Anzeige nicht ausgeliefert werden kann. Dadurch werden die von der Anzeige verwendeten Ressourcen freigegeben.

Anzeige einblenden

Rufen Sie zum Schalten einer Interstitial-Anzeige die Methode show für die geladene InterstitialAd-Instanz auf.

Das folgende Beispiel zeigt eine Interstitial-Anzeige:

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

Vollständiges Beispiel ansehen

In diesem Abschnitt wird anhand eines vollständigen Beispiels beschrieben, wie Sie eine Interstitial-Anzeige in eine React Native-App einbinden.

Im folgenden Beispiel wird die Anzeige in eine React Native-Komponente eingebunden, die Anzeigeninstanz im Status verwaltet und Steuerelemente zum Laden und Anzeigen der Anzeige bereitgestellt:

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>
  );
}

Nächste Schritte

Nachdem Sie Interstitial-Anzeigen eingebunden haben, können Sie sich mit den folgenden Themen befassen: