Wczytywanie pojedynczej reklamy z nagrodą

Reklamy z nagrodą dają użytkownikom zakupy w aplikacji w zamian za interakcje z reklamami wideo i reklamami demonstracyjnymi gier oraz za wypełnianie ankiet. Więcej informacji znajdziesz w artykule Przegląd jednostek reklamowych z nagrodą.

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

Wymagania wstępne

Zanim przejdziesz dalej, wykonaj te czynności:

Android 

ca-app-pub-3940256099942544/5224354917

iOS 

ca-app-pub-3940256099942544/1712485313

Wczytywanie reklamy

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

W poniższym przykładzie wczytywana jest reklama z nagrodą, a w razie niepowodzenia rejestrowany jest błąd:

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

Nasłuchiwanie zdarzeń reklamowych

Zanim wyświetlisz reklamę, ustaw detektor adEventCallback w załadowanej instancji RewardedAd. 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: RewardedAd) {
  ad.adEventCallback = {
    // Called when the ad is presented on screen.
    onAdShowedFullScreenContent: () => {
      console.log('Rewarded ad showed full screen content.');
    },
    // Called when the ad is closed by the user.
    onAdDismissedFullScreenContent: () => {
      console.log('Rewarded ad dismissed full screen content.');
      ad.destroy();
    },
    // Called when presentation fails.
    onAdFailedToShowFullScreenContent: (error) => {
      console.error('Failed to show rewarded ad:', error);
      ad.destroy();
    },
    // Called when an impression is recorded.
    onAdImpression: () => {
      console.log('Rewarded ad recorded an impression.');
    },
    // Called when the user taps the ad.
    onAdClicked: () => {
      console.log('Rewarded ad was clicked.');
    },
    // Called when the ad is estimated to have earned money.
    onAdPaid: (adValue) => {
      console.log(
        `Rewarded ad paid: ${adValue.amountMicros} ${adValue.currencyCode}`,
      );
    },
  };
}

W tym przykładzie wywoływana jest też metoda destroy, 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ę z nagrodą, wywołaj metodę show z wywołaniem zwrotnym, aby obsłużyć nagrodę, którą otrzymał użytkownik:

export function showRewardedAd(
  ad: RewardedAd,
  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.

Poniższy przykład ustawia ServerSideVerificationOptions (customData i userId) w obiekcie reklamy z nagrodą przed wyświetleniem reklamy:

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

Zobacz pełny przykład

W tej sekcji znajdziesz pełny przykład integracji reklamy z nagrodą z aplikacją 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 RewardedSingleLoadScreen() {
  const [ad, setAd] = useState<RewardedAd | 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 ad...');
    const loadedAd = await loadRewardedAd(REWARDED_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 ad loaded!');
    } else {
      setStatus('Failed to load Rewarded ad.');
    }
  };

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

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Rewarded Ad (Single Load)</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 reklamy z nagrodą zapoznaj się z tymi tematami: