Carga un solo anuncio recompensado

Los anuncios recompensados otorgan a los usuarios elementos integrados en la app por interactuar con anuncios de video, anuncios con juego y encuestas. Para obtener más información, consulta la descripción general de las unidades de anuncios recompensados.

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

Requisitos previos

Antes de continuar, haz lo siguiente:

Android 

ca-app-pub-3940256099942544/5224354917

iOS 

ca-app-pub-3940256099942544/1712485313

Carga un anuncio

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

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

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

Detecta eventos de anuncios

Antes de mostrar el anuncio, configura el objeto de escucha adEventCallback en la instancia RewardedAd cargada. Este objeto de escucha recibe devoluciones de llamada para eventos del ciclo de vida del anuncio, como cuando se muestra el anuncio 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: 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}`,
      );
    },
  };
}

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 recompensado, llama al método show con una devolución de llamada para controlar la recompensa que obtuvo el usuario:

export function showRewardedAd(
  ad: RewardedAd,
  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 recompensado antes de mostrar un anuncio:

export function setServerSideVerificationRewarded(ad: RewardedAd) {
  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 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 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>
  );
}

Próximos pasos

Después de integrar un anuncio recompensado, explora los siguientes temas: