Einzelne Anzeige mit Prämie laden

Bei Anzeigen mit Prämie erhalten Nutzer In-App-Artikel, wenn sie mit Videoanzeigen, spielbaren Anzeigen und Umfragen interagieren. Weitere Informationen finden Sie unter Anzeigenblöcke für Anzeigen mit Prämie.

In diesem Leitfaden erfahren Sie, wie Sie Anzeigen mit Prämie in eine React Native-App einbinden.

Vorbereitung

Bevor Sie fortfahren, führen Sie die folgenden Schritte aus:

Android 

ca-app-pub-3940256099942544/5224354917

iOS 

ca-app-pub-3940256099942544/1712485313

Anzeige laden

Rufen Sie zum Laden einer Anzeige mit Prämie die Methode load für die Klasse RewardedAd auf.

Im folgenden Beispiel wird bei Erfolg eine Anzeige mit Prämie geladen und bei einem Fehler ein Fehler protokolliert:

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

Auf Anzeigenereignisse warten

Bevor Sie die Anzeige präsentieren, legen Sie den adEventCallback-Listener für die geladene RewardedAd-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: 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}`,
      );
    },
  };
}

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

Wenn Sie eine Anzeige mit Prämie einblenden möchten, rufen Sie die Methode show mit einem Callback auf, um die Prämie zu verarbeiten, die der Nutzer erhalten hat:

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

Optional: Serverseitige Überprüfungs-Callbacks validieren

Wenn für Ihre App benutzerdefinierte Überprüfungsparameter wie eine Nutzer-ID oder benutzerdefinierte Prämienmetadaten in serverseitigen Überprüfungs-Callbacks (SSV) erforderlich sind, legen Sie die Property serverSideVerificationOptions für die geladene Anzeigeninstanz fest, bevor Sie die Anzeige einblenden.

Die von Ihnen festgelegten Werte werden an die SSV-Callback-Suchparameter übergeben:

  • userId: Wird an den Suchparameter user_id übergeben, um den Nutzer zu identifizieren.
  • customData: Wird an den Suchparameter custom_data übergeben, um benutzerdefinierte Metadaten weiterzuleiten.

Im folgenden Beispiel wird ServerSideVerificationOptions (customData und userId) für ein Anzeigenobjekt mit Prämie festgelegt, bevor eine Anzeige eingeblendet wird:

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

Vollständiges Beispiel ansehen

In diesem Abschnitt wird anhand eines vollständigen Beispiels beschrieben, wie Sie eine Anzeige mit Prämie 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 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>
  );
}

Nächste Schritte

Nachdem Sie eine Anzeige mit Prämie eingebunden haben, können Sie sich mit den folgenden Themen vertraut machen: