Caricare un singolo annuncio con premio

Gli annunci con premio offrono agli utenti articoli in-app per l'interazione con annunci video, annunci demo e sondaggi. Per maggiori dettagli, consulta Panoramica delle unità pubblicitarie con premio.

Questa guida mostra come integrare gli annunci con premio in un'app nativa React Native.

Prerequisiti

Prima di continuare, completa queste operazioni:

Android 

ca-app-pub-3940256099942544/5224354917

iOS 

ca-app-pub-3940256099942544/1712485313

Carica un annuncio

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

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

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

Ascolta gli eventi degli annunci

Prima di mostrare l'annuncio, imposta il listener adEventCallback sull'istanza RewardedAd caricata. Questo listener riceve callback per gli eventi del ciclo di vita degli annunci, ad esempio la visualizzazione dell'annuncio sullo schermo o il tocco dell'annuncio da parte di un utente. Per i callback disponibili, consulta AdEventCallback.

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

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

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 con premio, chiama il metodo show con un callback per gestire il premio guadagnato dall'utente:

export function showRewardedAd(
  ad: RewardedAd,
  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 con premio prima di mostrare un annuncio:

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

Visualizza l'esempio completo

Questa sezione illustra l'esempio completo per integrare un annuncio 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 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>
  );
}

Passaggi successivi

Dopo aver integrato un annuncio con premio, esplora i seguenti argomenti: