Carregar um único anúncio intersticial premiado

Com os anúncios intersticiais premiados, você pode oferecer itens no app em troca de anúncios que aparecem entre telas ou níveis de jogos. Diferente dos anúncios premiados, os usuários não precisam ativar a visualização do anúncio. Para mais detalhes, consulte Visão geral dos blocos de anúncios intersticiais premiados.

Este guia explica como integrar anúncios intersticiais premiados a um app React Native.

Pré-requisitos

Antes de continuar, faça o seguinte:

Android 

ca-app-pub-3940256099942544/5354046379

iOS 

ca-app-pub-3940256099942544/6978759866

Carregar um anúncio

Para carregar um anúncio intersticial premiado, chame o método load na classe RewardedInterstitialAd.

O exemplo a seguir carrega um anúncio intersticial premiado em caso de sucesso e registra um erro em caso de falha:

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

Detectar eventos de anúncios

Antes de mostrar o anúncio, defina o listener adEventCallback na instância RewardedInterstitialAd carregada. Esse listener recebe callbacks para eventos de ciclo de vida do anúncio, como a exibição dele na tela ou um usuário tocando nele. Para ver os callbacks disponíveis, consulte AdEventCallback.

O exemplo a seguir define callbacks para detectar eventos de anúncio:

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

Esse exemplo também chama o método destroy quando um usuário fecha o anúncio ou quando ele não é exibido. Esse processo libera os recursos usados pelo anúncio.

Mostrar o anúncio

Para mostrar um anúncio intersticial premiado, chame show na instância RewardedInterstitialAd carregada e transmita um callback para receber o Reward:

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

Opcional: validar callbacks de verificação do lado do servidor

Se o app exigir parâmetros de verificação personalizados, como um ID do usuário ou metadados de recompensa personalizados, em callbacks de verificação do lado do servidor (SSV), defina a propriedade serverSideVerificationOptions na instância do anúncio carregado antes de mostrá-lo.

Os valores definidos são transmitidos aos parâmetros de consulta de callback de SSV:

  • userId: transmite para o parâmetro de consulta user_id para identificar o usuário.
  • customData: transmite para o parâmetro de consulta custom_data para encaminhar metadados personalizados.

O exemplo a seguir define ServerSideVerificationOptions (customData e userId) em um objeto de anúncio intersticial premiado antes de mostrar um anúncio:

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

Ver o exemplo completo

Esta seção mostra um exemplo completo de como integrar um anúncio intersticial premiado a um app nativo React Native.

O exemplo a seguir integra o anúncio a um componente do React Native, gerencia a instância do anúncio no estado e fornece controles para carregar e mostrar o anúncio:

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óximas etapas

Depois de integrar os anúncios intersticiais premiados, confira os seguintes tópicos: