Configurar anúncios intersticiais

Os anúncios intersticiais são anúncios de tela cheia que aparecem em momentos de transição no seu app, como entre telas ou durante a pausa entre os níveis de um jogo. Os usuários podem tocar no anúncio para acessar o destino ou fechá-lo e voltar ao app. Para mais detalhes, consulte as orientações sobre anúncios intersticiais e um estudo de caso.

Para eliminar a latência de apresentação e garantir que um anúncio esteja disponível quando uma transição ocorrer, o Google Mobile Ads SDK for React Native usa o pré-carregamento de anúncios para gerenciar o carregamento em segundo plano, o armazenamento em cache e o reabastecimento do buffer.

Neste guia, mostramos como integrar anúncios intersticiais a um app React Native.

Pré-requisitos

Antes de continuar, faça o seguinte:

Android 

ca-app-pub-3940256099942544/1033173712

iOS 

ca-app-pub-3940256099942544/4411468910

Entender o pré-carregamento de anúncios

O pré-carregamento de anúncios no Google Mobile Ads SDK for React Native automatiza o carregamento e o armazenamento em cache de anúncios.

O pré-carregamento de anúncios oferece os seguintes benefícios:

  • Gerenciamento de referências: mantém as referências até que os anúncios sejam mostrados.
  • Recarregamento automático: carrega um novo anúncio quando um é recuperado do cache.
  • Tentativas gerenciadas: carrega um novo anúncio quando um falha.
  • Tratamento de expiração: atualiza os anúncios antes que eles expirem.
  • Otimização de cache: otimiza a ordem do cache para exibir o anúncio de maior prioridade.

Para carregar anúncios manualmente, consulte o guia Carregar um único anúncio intersticial.

Iniciar pré-carregamento

Para começar a pré-carregar anúncios, chame o método InterstitialAdPreloader.start e transmita o valor de preloadId, as definições de configuração e os callbacks de evento para monitorar as mudanças no estado do buffer:

export function startPreloader(
  adUnitId: string,
  preloadId: string,
  customPreloadCallback?: PreloadCallback,
): boolean {
  try {
    const started = InterstitialAdPreloader.start(
      preloadId,
      {
        request: {adUnitId},
        bufferSize: 2,
      },
      {
        // Called when an ad is preloaded into the buffer.
        onAdPreloaded: (metadata) => {
          console.log(`Interstitial ad preloaded for ${metadata.preloadId}`);
          customPreloadCallback?.onAdPreloaded?.(metadata);
        },
        // Called when an ad fails to preload.
        onAdFailedToPreload: (error: LoadAdError) => {
          console.error('Failed to preload interstitial ad:', error.message);
          customPreloadCallback?.onAdFailedToPreload?.(error);
        },
        // Called when all preloaded ads in the buffer have been shown.
        onAdsExhausted: () => {
          console.log('Preload buffer exhausted for interstitial ads.');
          customPreloadCallback?.onAdsExhausted?.();
        },
      },
    );
    return started;
  } catch (error) {
    console.error('Error starting interstitial ad preloader:', error);
    return false;
  }
}

Um ID de pré-carregamento é uma string que identifica de forma exclusiva uma configuração de pré-carregamento de anúncios. Se você usa o ID do bloco de anúncios para uma única configuração de pré-carregamento no seu app, use esse ID como o ID de pré-carregamento. Se o app exigir vários pré-carregadores para o mesmo ID de bloco de anúncios, transmita strings diferentes para cada ID de pré-carregamento.

Quando o app busca um anúncio pré-carregado do buffer, o Google Mobile Ads SDK for React Native solicita um anúncio de substituição em segundo plano para preencher o buffer novamente. Se não houver anúncios pré-carregados no buffer, o Google Mobile Ads SDK for React Native vai invocar o callback onAdsExhausted.

Limites de cache de pré-carregamento

O Google Mobile Ads SDK for React Native aplica um limite em todo o app para o número total de anúncios pré-carregados em todos os blocos de anúncios e IDs de pré-carregamento:

  • Limite padrão: o Google mantém no máximo seis anúncios pré-carregados na memória. Esse limite é compartilhado entre todos os formatos e IDs de pré-carregamento.
  • Buffer recomendado: dois anúncios pré-carregados para cada ID de pré-carregamento.

Se o app atingir o limite, as solicitações em segundo plano para anúncios pré-carregados serão pausadas até que os anúncios atuais sejam consultados no cache ou destruídos. O pré-carregamento também é pausado temporariamente enquanto um anúncio de tela cheia é exibido na tela.

Sondar e mostrar o anúncio

Antes de mostrar um anúncio, verifique se ele está disponível chamando o método InterstitialAdPreloader.isAdAvailable. Para recuperar o anúncio, chame o método InterstitialAdPreloader.pollAd.

Para detectar eventos de apresentação, como dispensas de anúncios ou falhas de exibição, defina a propriedade adEventCallback na instância do anúncio antes de chamar o método show.

O exemplo a seguir verifica a disponibilidade do anúncio e detecta eventos de apresentação em tela cheia antes de mostrar o anúncio:

export function showPreloadedAd(
  preloadId: string,
  customAdEventCallback?: FullScreenAdEventCallback,
) {
  if (InterstitialAdPreloader.isAdAvailable(preloadId)) {
    const ad = InterstitialAdPreloader.pollAd(preloadId);
    if (ad) {
      ad.adEventCallback = {
        // Called when the ad is presented on screen.
        onAdShowedFullScreenContent: () => {
          console.log('Preloaded interstitial ad showed full screen content.');
          customAdEventCallback?.onAdShowedFullScreenContent?.();
        },
        // Called when the ad is closed by the user.
        onAdDismissedFullScreenContent: () => {
          console.log('Preloaded interstitial ad dismissed.');
          customAdEventCallback?.onAdDismissedFullScreenContent?.();
          ad.destroy();
        },
        // Called when presentation fails.
        onAdFailedToShowFullScreenContent: (error) => {
          console.error('Preloaded interstitial ad failed to show:', error);
          customAdEventCallback?.onAdFailedToShowFullScreenContent?.(error);
          ad.destroy();
        },
        // Called when an impression is recorded.
        onAdImpression: () => {
          console.log('Preloaded interstitial ad recorded an impression.');
          customAdEventCallback?.onAdImpression?.();
        },
        // Called when the user taps the ad.
        onAdClicked: () => {
          console.log('Preloaded interstitial ad was clicked.');
          customAdEventCallback?.onAdClicked?.();
        },
        // Called when the ad is estimated to have earned money.
        onAdPaid: (adValue) => {
          console.log(
            `Preloaded interstitial ad paid: ${adValue.amountMicros}` +
              ` ${adValue.currencyCode}`,
          );
          customAdEventCallback?.onAdPaid?.(adValue);
        },
      };
      ad.show();
    }
  } else {
    console.log('No preloaded interstitial ad available in buffer.');
  }
}

Para liberar memória e recursos, chame o método ad.destroy nos callbacks onAdDismissedFullScreenContent e onAdFailedToShowFullScreenContent.

Ler as informações da resposta

Para inspecionar as informações de resposta do próximo anúncio pré-carregado sem removê-lo do cache, chame o método InterstitialAdPreloader.peekAdResponseInfo:

export function peekPreloadedAdResponseInfo(preloadId: string) {
  if (InterstitialAdPreloader.isAdAvailable(preloadId)) {
    const responseInfo = InterstitialAdPreloader.peekAdResponseInfo(preloadId);
    if (responseInfo) {
      console.log('Next preloaded ad response info:', responseInfo);
    }
  }
}

Se um anúncio estiver disponível, o método peekAdResponseInfo vai retornar um objeto ResponseInfo com informações sobre a origem do anúncio carregado e os adaptadores de rede.

Limpar recursos

Se você não precisar mais mostrar anúncios de um ID de pré-carregamento específico pelo restante da sessão, chame o método InterstitialAdPreloader.destroy. Esse processo interrompe o pré-carregamento do ID em questão e libera da memória os anúncios pré-carregados não utilizados.

O exemplo a seguir interrompe o pré-carregamento:

export function destroyPreloader(preloadId: string) {
  InterstitialAdPreloader.destroy(preloadId);
}

Depois que o usuário dispensar o anúncio ou se ele não for mostrado, destrua as instâncias individuais de anúncios consultados. Para mais detalhes, consulte Sondar e mostrar o anúncio.

Ver o exemplo completo

O exemplo de componente a seguir inicia o pré-carregamento na montagem, rastreia as contagens de anúncios disponíveis e fornece controles para mostrar anúncios intersticiais pré-carregados:

export function InterstitialScreen() {
  const [numAdsAvailable, setNumAdsAvailable] = useState<number>(0);
  const [status, setStatus] = useState<string>('Initializing Preloader...');

  const refreshAdCount = () => {
    const count = InterstitialAdPreloader.getNumAdsAvailable(PRELOAD_ID);
    setNumAdsAvailable(count);
  };

  useEffect(() => {
    // Start preloading interstitial ads on component mount
    startPreloader(INTERSTITIAL_AD_UNIT_ID, PRELOAD_ID, {
      onAdPreloaded: () => {
        refreshAdCount();
        setStatus('Ad preloaded and ready!');
      },
      onAdFailedToPreload: (error) => {
        setStatus(`Preload failed: ${error.message}`);
      },
      onAdsExhausted: () => {
        refreshAdCount();
        setStatus('Preload buffer exhausted.');
      },
    });
    setStatus('Preloader started.');

    // Clean up preloader resources on component unmount
    return () => {
      destroyPreloader(PRELOAD_ID);
    };
  }, []);

  const handleShow = () => {
    showPreloadedAd(PRELOAD_ID, {
      onAdDismissedFullScreenContent: () => {
        setStatus('Ad dismissed.');
      },
      onAdFailedToShowFullScreenContent: (error) => {
        setStatus(`Failed to show ad: ${error.message}`);
      },
    });
    setStatus('Showing preloaded ad...');
    refreshAdCount();
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Preload Interstitial Ads</Text>
      <Text style={styles.status}>Status: {status}</Text>
      <Text style={styles.status}>Ads Available: {numAdsAvailable}</Text>
      <View style={styles.buttonGroup}>
        <Button
          title="Show Preloaded Ad"
          onPress={handleShow}
          disabled={numAdsAvailable === 0}
        />
      </View>
    </View>
  );
}

Substitua:

  • INTERSTITIAL_AD_UNIT_ID pelo ID do bloco de anúncios.
  • PRELOAD_ID pelo ID do pré-carregador.

Próximas etapas

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