Configurar anúncios de banner

Os anúncios de banner ocupam uma posição fixa no layout do app, como na parte de cima ou de baixo da tela do dispositivo. Esses anúncios permanecem na tela enquanto os usuários interagem com o app e são atualizados após um período definido por você. Os banners adaptativos fixos usam o tamanho do anúncio para cada dispositivo com base em uma largura especificada.

Nesta página, mostramos como integrar anúncios de banner adaptativo fixo a um app nativo React.

Pré-requisitos

Antes de continuar, faça o seguinte:

Android 

ca-app-pub-3940256099942544/9214589741

iOS 

ca-app-pub-3940256099942544/2435281174

Definir o tamanho do anúncio

Para solicitar um anúncio de banner adaptativo fixo, chame o método AdSize.getLargeAnchoredAdaptiveBannerAdSize com a largura disponível do contêiner de anúncios em pixels independentes de densidade (dp). Esse método retorna uma promessa que é resolvida em um objeto AdSize.

O exemplo a seguir mostra e retorna o tamanho de um anúncio de banner adaptativo fixo:

export async function getAdaptiveAdSize(width: number): Promise<AdSize> {
  const adSize = await AdSize.getLargeAnchoredAdaptiveBannerAdSize(width);
  return adSize;
}

Carregar um anúncio

Depois de receber um objeto AdSize, chame o método load na classe BannerAd com o ID do bloco de anúncios e o tamanho do anúncio.

O exemplo a seguir carrega um anúncio de banner adaptativo fixo com o tamanho do anúncio e o ID do bloco de anúncios, recebe a instância BannerAd carregada em caso de sucesso e registra um erro em caso de falha:

export function loadBannerAd(
  adUnitId: string,
  adSize: AdSize,
  callback?: BannerAdLoadCallback,
): void {
  BannerAd.load(
    {adUnitId, adSize},
    {
      // Called when an ad has finished loading.
      onAdLoaded: (ad) => {
        console.log('Banner ad loaded successfully.');
        callback?.onAdLoaded?.(ad);
      },
      // Called when an ad request fails.
      onAdFailedToLoad: (error: LoadAdError) => {
        console.error('Failed to load banner ad:', error.message);
        callback?.onAdFailedToLoad?.(error);
      },
    },
  );
}

Atualizar um anúncio

Se você configurou o bloco de anúncios para ser atualizado, não é necessário solicitar outro anúncio quando ele não carrega. O Google Mobile Ads SDK for React Native respeita qualquer taxa de atualização especificada na interface da AdMob. Se você não tiver ativado a atualização, faça uma nova solicitação. Para mais detalhes sobre a atualização dos blocos de anúncios, como instruções para definir uma taxa de atualização, consulte Usar a atualização automática para seus anúncios de banner.

Mostrar um anúncio de banner

Para mostrar uma instância BannerAd carregada, transmita a instância do anúncio para a propriedade ad de um componente BannerAdView na sua hierarquia de visualização.

O exemplo a seguir mostra um anúncio e o destrói quando o componente é desmontado:

export function BannerAdViewComponent({ad}: {ad: BannerAd}): React.JSX.Element {
  useEffect(() => {
    // Destroy native resources when the component unmounts.
    return () => {
      ad.destroy();
    };
  }, [ad]);

  return <BannerAdView ad={ad} />;
}

Este exemplo chama o método destroy quando o componente é desmontado ou quando a instância do anúncio é substituída. Esse processo libera memória e recursos usados pelo anúncio.

Detectar eventos de anúncios

Para detectar eventos de anúncio, como impressões de anúncio e cliques, defina callbacks no componente BannerAdView. Para todos os callbacks, consulte BannerAdViewProps.

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

export function BannerEventsExample({ad}: {ad: BannerAd}): React.JSX.Element {
  return (
    <BannerAdView
      ad={ad}
      // Called when an impression is recorded for an ad.
      onAdImpression={() => {
        console.log('Banner ad recorded an impression.');
      }}
      // Called when a click is recorded for an ad.
      onAdClicked={() => {
        console.log('Banner ad clicked.');
      }}
      // Called when the ad opens an in-app overlay or landing page.
      onAdShowedFullScreenContent={() => {
        console.log('Banner ad opened overlay content.');
      }}
      // Called when the user dismisses the ad overlay.
      onAdDismissedFullScreenContent={() => {
        console.log('Banner ad overlay dismissed.');
      }}
      // Called when the ad is estimated to have earned money.
      onAdPaid={(adValue) => {
        console.log(
          `Banner ad paid: ${adValue.amountMicros} ${adValue.currencyCode}`,
        );
      }}
      // Called when the ad automatically refreshes.
      onAdRefreshed={() => {
        console.log('Banner ad refreshed.');
      }}
      // Called when the ad fails to automatically refresh.
      onAdFailedToRefresh={(error) => {
        console.error('Banner ad failed to refresh:', error.message);
      }}
    />
  );
}

Este exemplo detecta eventos de anúncio, como dispensas, impressões, cliques, apresentação em tela cheia, receita de publicidade estimada e sucessos e falhas de atualização.

Ver o exemplo completo

Esta seção mostra um exemplo completo de integração de um anúncio de banner a um componente do React Native.

O exemplo a seguir integra um anúncio de banner a um componente do React Native e gerencia a instância do anúncio no estado:

export function BannerScreen() {
  const {width} = useWindowDimensions();
  const insets = useSafeAreaInsets();
  const [ad, setAd] = useState<BannerAd | null>(null);
  const [status, setStatus] = useState('Idle');

  useEffect(() => {
    return () => {
      ad?.destroy();
    };
  }, [ad]);

  const handleLoadAd = async () => {
    setStatus('Loading adaptive banner ad...');
    try {
      const adaptiveSize = await getAdaptiveAdSize(width);
      loadBannerAd(BANNER_AD_UNIT_ID, adaptiveSize, {
        onAdLoaded: (loadedAd) => {
          setAd(loadedAd);
          setStatus('Banner ad loaded successfully.');
        },
        onAdFailedToLoad: (error: LoadAdError) => {
          setStatus(`Failed to load banner ad: ${error.message}`);
        },
      });
    } catch (error) {
      setStatus(`Failed to get adaptive ad size: ${error}`);
    }
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Anchored Adaptive Banner Ad</Text>
      <Text style={styles.status}>Status: {status}</Text>
      <View style={styles.buttonGroup}>
        <Button title="Load Banner Ad" onPress={handleLoadAd} />
      </View>
      {ad ? (
        <View style={[styles.bannerContainer, {bottom: insets.bottom}]}>
          <BannerAdView
            ad={ad}
            onAdImpression={() => setStatus('Banner ad recorded impression.')}
            onAdClicked={() => setStatus('Banner ad clicked.')}
            onAdShowedFullScreenContent={() =>
              setStatus('Banner ad showed overlay content.')
            }
            onAdDismissedFullScreenContent={() =>
              setStatus('Banner ad overlay dismissed.')
            }
          />
        </View>
      ) : null}
    </View>
  );
}

Substitua BANNER_AD_UNIT_ID pelo ID do seu bloco de anúncios.

Próximas etapas

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