Wczytywanie pojedynczej reklamy pełnoekranowej z nagrodą

Reklamy pełnoekranowe z nagrodą umożliwiają oferowanie zakupów w aplikacji w zamian za oglądanie reklam, które pojawiają się między ekranami lub poziomami gry. W przeciwieństwie do reklam z nagrodą użytkownicy nie muszą wyrazić zgody na wyświetlenie reklamy. Więcej informacji znajdziesz w artykule Przegląd jednostek pełnoekranowych reklam z nagrodą.

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

Wymagania wstępne

Zanim przejdziesz dalej, wykonaj te czynności:

Android 

ca-app-pub-3940256099942544/5354046379

iOS 

ca-app-pub-3940256099942544/6978759866

Wczytywanie reklamy

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

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

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

Nasłuchiwanie zdarzeń reklamowych

Zanim wyświetlisz reklamę, ustaw detektor adEventCallback we wczytanej instancji RewardedInterstitialAd. 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: RewardedInterstitialAd) {
  ad.adEventCallback = {
    // Called when the ad is presented on screen.
    onAdShowedFullScreenContent: () => {
      console.log('Rewarded interstitial ad showed full screen content.');
    },
    // Called when the ad is closed by the user.
    onAdDismissedFullScreenContent: () => {
      console.log('Rewarded interstitial ad dismissed full screen content.');
      ad.destroy();
    },
    // Called when presentation fails.
    onAdFailedToShowFullScreenContent: (error) => {
      console.error('Failed to show rewarded interstitial ad:', error);
      ad.destroy();
    },
    // Called when an impression is recorded.
    onAdImpression: () => {
      console.log('Rewarded interstitial ad recorded an impression.');
    },
    // Called when the user taps the ad.
    onAdClicked: () => {
      console.log('Rewarded interstitial ad was clicked.');
    },
    // Called when the ad is estimated to have earned money.
    onAdPaid: (adValue) => {
      console.log(
        `Rewarded 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ą z nagrodą, wywołaj metodę show w instancji RewardedInterstitialAd i przekaż wywołanie zwrotne, aby otrzymać Reward:

export function showRewardedInterstitialAd(
  ad: RewardedInterstitialAd,
  onRewardEarned: (reward: Reward) => void,
) {
  ad.show(onRewardEarned);
}

Opcjonalnie: sprawdzanie wywołań zwrotnych weryfikacji po stronie serwera

Jeśli Twoja aplikacja wymaga niestandardowych parametrów weryfikacji, takich jak identyfikator użytkownika lub niestandardowe metadane nagrody, w wywołaniach zwrotnych weryfikacji po stronie serwera (SSV), ustaw właściwość serverSideVerificationOptions w załadowanej instancji reklamy przed jej wyświetleniem.

Ustawione przez Ciebie wartości są przekazywane do parametrów zapytania wywołania zwrotnego SSV:

  • userId: przekazuje do parametru zapytania user_id, aby zidentyfikować użytkownika.
  • customData: przekazuje do parametru zapytania custom_data, aby przekazywać niestandardowe metadane.

W tym przykładzie ustawiamy ServerSideVerificationOptions (customData i userId) w obiekcie reklamy pełnoekranowej z nagrodą przed wyświetleniem reklamy:

export function setServerSideVerificationRewardedInterstitial(
  ad: RewardedInterstitialAd,
) {
  ad.serverSideVerificationOptions = {
    userId: 'user_123',
    customData: 'sample_custom_data',
  };
}

Zobacz pełny przykład

W tej sekcji znajdziesz pełny przykład integracji reklamy pełnoekranowej z nagrodą 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 RewardedInterstitialSingleLoadScreen() {
  const [ad, setAd] = useState<RewardedInterstitialAd | null>(null);
  const [isLoaded, setIsLoaded] = useState(false);
  const [status, setStatus] = useState<string>('Idle');
  const [reward, setReward] = useState<string | null>(null);

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

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

  const handleShow = () => {
    if (ad) {
      showRewardedInterstitialAd(ad, (userReward) => {
        setReward(`${userReward.amount} ${userReward.type}`);
      });
      setIsLoaded(false);
    }
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Rewarded Interstitial Ad</Text>
      <Text style={styles.status}>Status: {status}</Text>
      {reward && <Text style={styles.rewardText}>Earned: {reward}</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 z nagrodą zapoznaj się z tymi tematami: