Wczytywanie pojedynczej reklamy pełnoekranowej

Reklamy pełnoekranowe wyświetlają się w punktach przejścia w aplikacji, np. między ekranami lub podczas przerwy między poziomami gry. Użytkownicy mogą kliknąć reklamę, aby przejść do miejsca docelowego, lub zamknąć ją i wrócić do aplikacji. Więcej informacji znajdziesz w wytycznych dotyczących reklam pełnoekranowych i studium przypadku.

Z tego przewodnika dowiesz się, jak zintegrować reklamy pełnoekranowe z aplikacją React Native.

Wymagania wstępne

Android 

ca-app-pub-3940256099942544/1033173712

iOS 

ca-app-pub-3940256099942544/4411468910

Wczytywanie reklamy

Aby wczytać reklamę pełnoekranową, wywołaj metodę load w klasie InterstitialAd.

Poniższy przykład wczytuje reklamę pełnoekranową w przypadku powodzenia i rejestruje błąd w przypadku niepowodzenia:

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

Nasłuchiwanie zdarzeń reklamowych

Zanim wyświetlisz reklamę, ustaw detektor adEventCallback w instancji InterstitialAd. Ten detektor odbiera wywołania zwrotne dotyczące zdarzeń cyklu życia reklamy, takich jak wyświetlenie reklamy na ekranie lub kliknięcie jej przez użytkownika. Dostępne wywołania zwrotne znajdziesz w AdEventCallback.

W tym przykładzie ustawiono wywołania zwrotne, które nasłuchują zdarzeń reklamowych:

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

W tym przykładzie metoda destroy jest też wywoływana, gdy użytkownik zamknie reklamę lub gdy nie uda się jej wyświetlić. Ten proces zwalnia zasoby używane przez reklamę.

Wyświetl reklamę

Aby wyświetlić reklamę pełnoekranową, wywołaj metodę show w załadowanej instancji InterstitialAd.

Poniższy przykład pokazuje reklamę pełnoekranową:

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

Zobacz pełny przykład

W tej sekcji znajdziesz pełny przykład integracji reklamy pełnoekranowej z aplikacją natywną React Native.

Poniższy przykład integruje reklamę z komponentem React Native, zarządza instancją reklamy w stanie i udostępnia elementy sterujące do wczytywania i wyświetlania reklamy:

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

Dalsze kroki

Po zintegrowaniu reklam pełnoekranowych zapoznaj się z tymi tematami: