Caricare un singolo annuncio interstitial con premio

Gli annunci interstitial con premio ti consentono di offrire articoli in-app per gli annunci che vengono visualizzati tra le schermate o i livelli di gioco. A differenza degli annunci con premio, gli utenti non devono attivare la visualizzazione dell'annuncio. Per maggiori dettagli, consulta Panoramica delle unità pubblicitarie interstitial con premio.

Questa guida spiega come integrare gli annunci interstitial con premio in un'app React Native.

Prerequisiti

Prima di continuare, completa queste operazioni:

Android 

ca-app-pub-3940256099942544/5354046379

iOS 

ca-app-pub-3940256099942544/6978759866

Carica un annuncio

Per caricare un annuncio interstitial con premio, chiama il metodo load nella classe RewardedInterstitialAd.

Il seguente esempio carica un annuncio interstitial con premio in caso di esito positivo e registra un errore in caso di esito negativo:

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

Ascolta gli eventi degli annunci

Prima di mostrare l'annuncio, imposta il listener adEventCallback sull'istanza RewardedInterstitialAd caricata. Questo listener riceve i callback per gli eventi del ciclo di vita degli annunci, ad esempio l'annuncio visualizzato sullo schermo o un utente che tocca l'annuncio. Per i callback disponibili, consulta AdEventCallback.

L'esempio seguente imposta i callback per ascoltare gli eventi annuncio:

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

Questo esempio chiama anche il metodo destroy quando un utente chiude l'annuncio o quando l'annuncio non viene mostrato. Questo processo rilascia le risorse utilizzate dall'annuncio.

Mostra l'annuncio

Per mostrare un annuncio interstitial con premio, chiama show nell'istanza RewardedInterstitialAd caricata e passa un callback per ricevere Reward:

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

(Facoltativo) Convalida i callback di verifica lato server

Se la tua app richiede parametri di verifica personalizzati, come un ID utente o metadati dei premi personalizzati, nei callback di verifica lato server (SSV), imposta la proprietà serverSideVerificationOptions nell'istanza dell'annuncio caricato prima di mostrare l'annuncio.

I valori impostati vengono trasmessi ai parametri di query di callback SSV:

  • userId: passa al parametro di query user_id per identificare l'utente.
  • customData: passa al parametro di query custom_data per inoltrare i metadati personalizzati.

L'esempio seguente imposta ServerSideVerificationOptions (customData e userId) su un oggetto annuncio interstitial con premio prima di mostrare un annuncio:

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

Visualizza l'esempio completo

Questa sezione illustra l'esempio completo per integrare un annuncio interstitial con premio in un'app React Native.

L'esempio seguente integra l'annuncio in un componente React Native, gestisce l'istanza dell'annuncio nello stato e fornisce i controlli per caricare e visualizzare l'annuncio:

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

Passaggi successivi

Dopo aver integrato gli annunci interstitial con premio, esplora i seguenti argomenti: