Carga un solo anuncio intersticial recompensado

Los anuncios intersticiales recompensados te permiten ofrecer elementos integrados en la app por los anuncios que aparecen entre pantallas o niveles de juego. A diferencia de los anuncios recompensados, los usuarios no necesitan habilitar ninguna función para ver el anuncio. Para obtener más detalles, consulta la descripción general de las unidades de anuncios intersticiales recompensados.

En esta guía, se explica cómo integrar anuncios intersticiales recompensados en una app de React Native.

Requisitos previos

Antes de continuar, haz lo siguiente:

Android 

ca-app-pub-3940256099942544/5354046379

iOS 

ca-app-pub-3940256099942544/6978759866

Carga un anuncio

Para cargar un anuncio intersticial recompensado, llama al método load en la clase RewardedInterstitialAd.

En el siguiente ejemplo, se carga un anuncio intersticial recompensado si se realiza correctamente y se registra un error si falla:

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

Detecta eventos de anuncios

Antes de mostrar el anuncio, configura el objeto de escucha adEventCallback en la instancia RewardedInterstitialAd cargada. Este objeto de escucha recibe devoluciones de llamada para los eventos del ciclo de vida del anuncio, como cuando se muestra en la pantalla o cuando un usuario lo presiona. Para conocer las devoluciones de llamada disponibles, consulta AdEventCallback.

En el siguiente ejemplo, se configuran devoluciones de llamada para escuchar eventos de anuncios:

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

En este ejemplo, también se llama al método destroy cuando un usuario cierra el anuncio o cuando este no se muestra. Este proceso libera los recursos que usó el anuncio.

Muestra el anuncio

Para mostrar un anuncio intersticial recompensado, llama a show en la instancia RewardedInterstitialAd cargada y pasa una devolución de llamada para recibir el objeto Reward:

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

Opcional: Valida las devoluciones de llamada de verificación del servidor

Si tu app requiere parámetros de verificación personalizados, como un ID de usuario o metadatos de recompensa personalizados, en las devoluciones de llamada de la verificación del servidor (SSV), establece la propiedad serverSideVerificationOptions en la instancia del anuncio cargado antes de mostrarlo.

Los valores que establezcas se pasarán a los parámetros de consulta de la devolución de llamada de SSV:

  • userId: Se pasa al parámetro de consulta user_id para identificar al usuario.
  • customData: Se pasa al parámetro de consulta custom_data para reenviar metadatos personalizados.

En el siguiente ejemplo, se establece ServerSideVerificationOptions (customData y userId) en un objeto de anuncio intersticial recompensado antes de mostrar un anuncio:

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

Observa el ejemplo completo

En esta sección, se incluye el ejemplo completo para integrar un anuncio intersticial recompensado en una app de React Native.

En el siguiente ejemplo, se integra el anuncio en un componente de React Native, se administra la instancia del anuncio en el estado y se proporcionan controles para cargar y mostrar el anuncio:

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

Próximos pasos

Después de integrar los anuncios intersticiales recompensados, explora los siguientes temas: