Configurar anúncios nativos

Os anúncios nativos oferecem recursos de anúncio individuais, como título, imagens e texto de solicitação, que você pode estilizar e organizar para combinar com o design visual do app. Para processar o rastreamento de cliques, as impressões e a reprodução de mídia, o Google Mobile Ads SDK for React Native fornece os seguintes componentes:

Para saber como exibir anúncios nativos de acordo com as políticas, consulte Anúncios nativos usando o formato nativo avançado.

Nesta página, mostramos como carregar um ou vários anúncios nativos, gerenciar a memória e os ciclos de vida dos anúncios e ativar a aceleração de hardware para anúncios em vídeo no Android.

Pré-requisitos

Antes de continuar, faça o seguinte:

Android

Formato Exemplo de ID do bloco de anúncios
Nativo ca-app-pub-3940256099942544/2247696110
Vídeo nativo ca-app-pub-3940256099942544/1044960115

iOS

Formato Exemplo de ID do bloco de anúncios
Nativo ca-app-pub-3940256099942544/3986624511
Vídeo nativo ca-app-pub-3940256099942544/2521693316

Carregar um anúncio

Para carregar um anúncio nativo, chame o método NativeAd.load com um objeto NativeAdRequest que contenha o ID do bloco de anúncios. Esse método retorna uma promessa que é resolvida com o objeto NativeAd carregado ou rejeitada com um objeto LoadAdError.

O exemplo a seguir carrega um único anúncio nativo, retorna o anúncio carregado em caso de sucesso e registra uma mensagem de erro em caso de falha:

export async function loadNativeAd(adUnitId: string): Promise<NativeAd | null> {
  try {
    const ad = await NativeAd.load({adUnitId});
    return ad;
  } catch (error) {
    const loadError = error as LoadAdError;
    console.error('Failed to load native ad:', loadError.message);
    return null;
  }
}

Ao carregar e gerenciar anúncios nativos, recomendamos que você faça o seguinte:

  • Limite os anúncios carregados: os recursos de anúncios nativos consomem memória. Carregue apenas os anúncios que os usuários estão prestes a ver, como as próximas uma ou duas posições, em vez de carregar grandes lotes de uma só vez.
  • Remover anúncios não montados: ao remover ou substituir um anúncio da tela ou quando o componente que o contém for desmontado, chame o método ad.destroy. Esse método libera os recursos e a memória usados pelo anúncio.
  • Mostre anúncios carregados em até uma hora: os criativos de anúncios nativos expiram após 60 minutos. Se você não exibir um anúncio carregado em uma hora, destrua-o e solicite outro.

Opcional: carregar vários anúncios

Para carregar vários anúncios em uma única solicitação, chame o método NativeAd.loadAds com um objeto NativeAdRequest, o número de anúncios a serem solicitados e um objeto NativeAdLoadCallback. A solicitação pode conter até cinco anúncios.

O exemplo a seguir solicita vários anúncios nativos e processa cada anúncio carregado, erros de carregamento de anúncios e conclusão de solicitação usando callbacks:

export function loadMultipleNativeAds(adUnitId: string, numAds: number): void {
  NativeAd.loadAds({adUnitId}, numAds, {
    // Called when an individual native ad finishes loading.
    onNativeAdLoad: (ad) => {
      console.log('Loaded native ad:', ad.headline);
    },
    // Called when an individual native ad fails to load.
    onAdFailedToLoad: (error) => {
      console.error('Failed to load native ad:', error.message);
    },
    // Called when all requested ads have finished loading.
    onAdLoadingCompleted: () => {
      console.log('All requested native ads finished loading.');
    },
  });
}

Se você exibe anúncios de display em um feed rolável, carregue os anúncios com antecedência. Esse processo permite a renderização do anúncio quando os usuários acessam os anúncios.

Ativar a aceleração de hardware

Para veicular anúncios em vídeo nas suas visualizações de anúncios nativos no Android, ative a aceleração de hardware.

Por padrão, o Android ativa a aceleração de hardware. Os apps podem desativar a aceleração de hardware globalmente. Se o app desativar a aceleração de hardware globalmente, ative a configuração para as classes Activity que mostram anúncios.

Se você ativar a aceleração de hardware globalmente e o app não funcionar como esperado, controle a aceleração de hardware para atividades individuais. Para ativar ou desativar a aceleração de hardware, use o atributo android:hardwareAccelerated para os elementos application e activity no arquivo AndroidManifest.xml.

O exemplo a seguir ativa a aceleração de hardware globalmente para o app e desativa a configuração para uma atividade:

<application android:hardwareAccelerated="true">
    <!-- For activities that use ads, hardwareAcceleration should be true. -->
    <activity android:hardwareAccelerated="true" />
    <!-- For activities that don't use ads, hardwareAcceleration can be false. -->
    <activity android:hardwareAccelerated="false" />
</application>

Próximas etapas

Depois de carregar um anúncio, renderize-o na interface do React Native usando os componentes NativeAdView e NativeAdMediaView. Para mais detalhes, consulte Mostrar anúncios nativos.