Charger une seule annonce interstitielle avec récompense

Les annonces interstitielles avec récompense vous permettent de proposer des éléments intégrés pour les annonces qui s'affichent entre les écrans ou les niveaux de jeu. Contrairement aux annonces avec récompense, les utilisateurs n'ont pas besoin d'accepter de les visionner. Pour en savoir plus, consultez Présentation des blocs d'annonces interstitielles avec récompense.

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

Prérequis

Avant de continuer, procédez comme suit :

Android 

ca-app-pub-3940256099942544/5354046379

iOS 

ca-app-pub-3940256099942544/6978759866

Charger une annonce

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

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

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

Écouter les événements d'annonce

Avant de diffuser l'annonce, définissez l'écouteur adEventCallback sur l'instance RewardedInterstitialAd chargée. Cet écouteur reçoit des rappels pour les événements du cycle de vie des annonces, par exemple lorsqu'une 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: 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}`,
      );
    },
  };
}

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 interstitielle avec récompense, appelez show sur l'instance RewardedInterstitialAd chargée et transmettez un rappel pour recevoir l'Reward :

export function showRewardedInterstitialAd(
  ad: RewardedInterstitialAd,
  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 interstitielle avec récompense avant d'afficher une annonce :

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

Voir l'exemple complet

Cette section présente un exemple complet d'intégration d'un interstitiel 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 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>
  );
}

Étapes suivantes

Après avoir intégré des annonces interstitielles avec récompense, explorez les sujets suivants :