Einzelne Interstitial-Anzeige mit Prämie laden

Mit Interstitial-Anzeigen mit Prämie können Sie In-App-Artikel für Anzeigen anbieten, die zwischen Bildschirmen oder Spiellevels eingeblendet werden. Anders als bei Anzeigen mit Prämie müssen Nutzer nicht zustimmen, sich die Anzeige anzusehen. Weitere Informationen finden Sie unter Anzeigenblöcke für Interstitial-Anzeigen mit Prämie.

In diesem Leitfaden wird beschrieben, wie Sie Interstitial-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/5354046379

iOS 

ca-app-pub-3940256099942544/6978759866

Anzeige laden

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

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

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

Auf Anzeigenereignisse warten

Bevor Sie die Anzeige präsentieren, legen Sie den Listener adEventCallback für die geladene RewardedInterstitialAd-Instanz fest. Dieser Listener empfängt Callbacks für Lifecycle-Events von Anzeigen, z. B. wenn die Anzeige auf dem Bildschirm erscheint oder ein Nutzer darauf 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: 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}`,
      );
    },
  };
}

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 Interstitial-Anzeige mit Prämie präsentieren möchten, rufen Sie show für die geladene RewardedInterstitialAd-Instanz auf und übergeben Sie einen Callback, um die Reward zu erhalten:

export function showRewardedInterstitialAd(
  ad: RewardedInterstitialAd,
  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 Interstitial-Anzeigenobjekt mit Prämie festgelegt, bevor eine Anzeige eingeblendet wird:

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

Vollständiges Beispiel ansehen

In diesem Abschnitt finden Sie ein vollständiges Beispiel für die Einbindung einer Interstitial-Anzeige mit Prämie in eine React Native-App.

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

Nächste Schritte

Nachdem Sie Interstitial-Anzeigen mit Prämie eingebunden haben, können Sie sich mit den folgenden Themen beschäftigen: