Charger une seule annonce avec récompense

Les annonces avec récompense offrent aux utilisateurs des éléments intégrés lorsqu'ils interagissent avec des annonces vidéo, des annonces jouables et des enquêtes. Pour en savoir plus, consultez Présentation des blocs d'annonces avec récompense.

Ce guide vous explique comment intégrer des annonces avec récompense dans une application React Native.

Prérequis

Avant de continuer, procédez comme suit :

Android 

ca-app-pub-3940256099942544/5224354917

iOS 

ca-app-pub-3940256099942544/1712485313

Charger une annonce

Pour charger une annonce avec récompense, appelez la méthode load sur la classe RewardedAd.

L'exemple suivant charge une annonce avec récompense en cas de réussite et consigne une erreur en cas d'échec :

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

Écouter les événements d'annonce

Avant de diffuser l'annonce, définissez l'écouteur adEventCallback sur l'instance RewardedAd chargée. Cet écouteur reçoit des rappels pour les événements du cycle de vie de l'annonce, par exemple lorsque l'annonce s'affiche à l'écran ou qu'un utilisateur appuie dessus. Pour connaître les rappels disponibles, consultez AdEventCallback.

L'exemple suivant définit des rappels pour écouter les événements d'annonce :

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

Cet exemple appelle également la méthode destroy lorsqu'un utilisateur ferme l'annonce ou lorsque l'annonce ne s'affiche pas. Ce processus libère les ressources utilisées par l'annonce.

Diffuser l'annonce

Pour diffuser une annonce avec récompense, appelez la méthode show avec un rappel pour gérer la récompense obtenue par l'utilisateur :

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

Facultatif : Valider les rappels de validation côté serveur

Si votre application nécessite des paramètres de validation personnalisés, tels qu'un ID utilisateur ou des métadonnées de récompense personnalisées, dans les rappels de validation côté serveur, définissez la propriété serverSideVerificationOptions sur l'instance d'annonce chargée avant de diffuser l'annonce.

Les valeurs que vous définissez sont transmises aux paramètres de requête de rappel SSV :

  • userId : transmet au paramètre de requête user_id pour identifier l'utilisateur.
  • customData : transmet au paramètre de requête custom_data pour transférer des métadonnées personnalisées.

L'exemple suivant définit ServerSideVerificationOptions (customData et userId) sur un objet d'annonce avec récompense avant d'afficher une annonce :

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

Voir l'exemple complet

Cette section présente un exemple complet d'intégration d'une annonce avec récompense dans une application React Native.

L'exemple suivant intègre l'annonce dans un composant React Native, gère l'instance d'annonce dans l'état et fournit des commandes pour charger et afficher l'annonce :

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

Étapes suivantes

Après avoir intégré une annonce avec récompense, explorez les thèmes suivants :