O Google usa tecnologia de IA na tradução de conteúdos para seu idioma de preferência. As traduções com IA podem ter erros.

Mostrar anúncios nativos

Quando um anúncio nativo é carregado, seu app recebe um objeto de anúncio que contém recursos, como imagens, texto e vídeos. Seu app é responsável por mostrar os recursos de anúncio em um layout de visualização de anúncio nativo. Para mostrar anúncios nativos de acordo com as políticas, o Google Mobile Ads SDK for React Native oferece 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 renderizar recursos de anúncios nativos, configurar conteúdo de mídia e processar eventos de anúncio usando Google Mobile Ads SDK for React Native.

Pré-requisitos

Antes de continuar, faça o seguinte:

Definir o componente de visualização do anúncio nativo

O componente NativeAdView é o contêiner de nível superior do layout do anúncio nativo. Esse componente une todas as visualizações de recursos individuais e as vincula à instância NativeAd carregada.

Ao encapsular os recursos no componente NativeAdView, você:

Registrar impressões quando o anúncio aparece na tela.
Registrar cliques e processar a navegação quando um usuário tocar em recursos interativos.
Mostre e posicione a sobreposição das Opções de Anúncios.

Atribuição de anúncio e Opções de Anúncios

A atribuição de anúncio e a sobreposição de Opções de Anúncios são requisitos da política obrigatórios para todas as implementações de anúncios nativos do Google.

Quando você envolve o layout em NativeAdView, o Google Mobile Ads SDK for React Native renderiza automaticamente o ícone Opções de Anúncios no canto superior direito da visualização do anúncio por padrão. Não é necessário adicionar códigos personalizados ou visualizações de recursos para que o ícone apareça.

Para personalizar o posicionamento do ícone no canto, consulte Definir recursos nativos avançados.

Preencher e registrar visualizações de recursos

Para registrar visualizações de recursos com Google Mobile Ads SDK for React Native, envolva cada componente de recurso com um wrapper NativeAdView.Asset e especifique o tipo de recurso usando o objeto NativeAdAssetNames. Cada wrapper NativeAdView.Asset precisa conter um único elemento host do React Native, como Text, Image ou View, que aceite a propriedade nativeID. Para detalhes sobre as propriedades de recursos disponíveis, consulte Classe NativeAd.

A tabela a seguir lista os tipos de recursos disponíveis, as propriedades de destino e exemplos de como registrar as visualizações de recursos:

Tipo de recurso	Descrição e exemplos
`ADVERTISER`	Propriedade de destino: `NativeAd.advertiser` {/* The advertiser or sponsor name (optional). */} {ad.advertiser && ( <NativeAdView.Asset type={NativeAdAssetNames.ADVERTISER}> <Text>{ad.advertiser}</Text> </NativeAdView.Asset> )}
`BODY`	Propriedade de destino: `NativeAd.body` {/* Detailed description text (optional). */} {ad.body && ( <NativeAdView.Asset type={NativeAdAssetNames.BODY}> <Text>{ad.body}</Text> </NativeAdView.Asset> )}
`CALL_TO_ACTION`	Propriedade de destino: `NativeAd.callToAction` {/* Action button text such as "Install" or "Shop Now" (optional). */} {ad.callToAction && ( <NativeAdView.Asset type={NativeAdAssetNames.CALL_TO_ACTION}> <View> <Text>{ad.callToAction}</Text> </View> </NativeAdView.Asset> )}
`HEADLINE`	Propriedade de destino: `NativeAd.headline` {/* The main title of the ad (required). */} <NativeAdView.Asset type={NativeAdAssetNames.HEADLINE}> <Text>{ad.headline}</Text> </NativeAdView.Asset>
`ICON`	Propriedade de destino: `NativeAd.icon` {/* The advertiser logo or app icon (optional). */} {ad.icon && ( <NativeAdView.Asset type={NativeAdAssetNames.ICON}> <Image source={{uri: ad.icon.uri}} /> </NativeAdView.Asset> )}
`PRICE`	Propriedade de destino: `NativeAd.price` {/* Price string for products or paid apps (optional). */} {ad.price && ( <NativeAdView.Asset type={NativeAdAssetNames.PRICE}> <Text>{ad.price}</Text> </NativeAdView.Asset> )}
`STAR_RATING`	Propriedade de destino: `NativeAd.starRating` {/* App rating score from 0 to 5 (optional). */} {ad.starRating !== undefined && ad.starRating > 0 && ( <NativeAdView.Asset type={NativeAdAssetNames.STAR_RATING}> <Text>★ {ad.starRating.toFixed(1)}</Text> </NativeAdView.Asset> )}
`STORE`	Propriedade de destino: `NativeAd.store` {/* App store source such as "Google Play" or "App Store" (optional). */} {ad.store && ( <NativeAdView.Asset type={NativeAdAssetNames.STORE}> <Text>{ad.store}</Text> </NativeAdView.Asset> )}

Sempre renderize condicionalmente as seguintes visualizações de recursos opcionais:

ad.icon
ad.body
ad.advertiser
ad.price
ad.store
ad.starRating

Quando um anúncio omite recursos opcionais, seu app não pode mostrar elementos de interface vazios.

Mostrar conteúdo de mídia

O componente NativeAdMediaView renderiza o recurso visual do anúncio, como vídeos e imagens. Se o anúncio tiver conteúdo de vídeo, a visualização de mídia vai armazenar em buffer e reproduzir o vídeo. Se o anúncio tiver apenas conteúdo de imagem, a visualização de mídia vai renderizar a imagem principal.

Aplicar o modo de redimensionamento de mídia

Para controlar como as imagens são dimensionadas no contêiner de visualização de mídia, aplique a propriedade resizeMode ao componente NativeAdMediaView:

      {/* Video or image media asset (optional). */}
      <NativeAdMediaView resizeMode={ResizeMode.COVER} />

Os valores de ResizeMode disponíveis incluem:

Definir a proporção da mídia

Para solicitar criativos do anúncio que correspondam à proporção do layout da visualização de mídia, especifique a propriedade aspectRatio na instância NativeAdRequest.

O exemplo a seguir solicita um anúncio nativo com uma proporção de mídia de paisagem, retorna o anúncio carregado em caso de sucesso e registra uma mensagem de erro em caso de falha:

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

Os valores de NativeMediaAspectRatio disponíveis incluem:

Detectar eventos de anúncios

Para receber notificações de eventos do ciclo de vida do anúncio, como impressões ou cliques, transmita callbacks de evento para o componente NativeAdView. Para ver todos os callbacks disponíveis, consulte AdEventCallback.

O exemplo a seguir transmite callbacks de eventos de anúncio, como exibição ou dispensas de conteúdo em tela cheia, para o componente NativeAdView:

export function NativeAdWithEvents({ad}: {ad: NativeAd}) {
  return (
    <NativeAdView
      ad={ad}
      // Called when the user taps the ad.
      onAdClicked={() => {
        console.log('Native ad was clicked.');
      }}
      // Called when an impression is recorded.
      onAdImpression={() => {
        console.log('Native ad recorded an impression.');
      }}
      // Called when the ad presents full-screen content.
      onAdShowedFullScreenContent={() => {
        console.log('Native ad showed full screen content.');
      }}
      // Called when full-screen content is dismissed.
      onAdDismissedFullScreenContent={() => {
        console.log('Native ad dismissed full screen content.');
      }}
      // Called when the ad is estimated to have earned money.
      onAdPaid={(adValue: AdValue) => {
        console.log(
          `Native ad paid: ${adValue.amountMicros} ${adValue.currencyCode}`,
        );
      }}
    />
  );
}

Ver o exemplo completo

Esta seção mostra o exemplo completo de como criar um componente de card de anúncio nativo reutilizável.

O exemplo a seguir define o componente NativeAdCard, que mostra um selo de atribuição de anúncio, renderiza e registra condicionalmente recursos de anúncios nativos individuais e renderiza o conteúdo de mídia com o componente NativeAdMediaView:

export function NativeAdCard({ad}: {ad: NativeAd}) {
  return (
    <NativeAdView ad={ad}>
      {/* 1. Ad Attribution Badge */}
      <View>
        <Text>Ad</Text>
      </View>

      {/* 2. Header: Icon, Headline, Advertiser, and Star Rating */}
      <View>
        {/* The advertiser logo or app icon (optional). */}
        {ad.icon && (
          <NativeAdView.Asset type={NativeAdAssetNames.ICON}>
            <Image source={{uri: ad.icon.uri}} />
          </NativeAdView.Asset>
        )}

        <View>
          {/* The main title of the ad (required). */}
          <NativeAdView.Asset type={NativeAdAssetNames.HEADLINE}>
            <Text>{ad.headline}</Text>
          </NativeAdView.Asset>

          {/* The advertiser or sponsor name (optional). */}
          {ad.advertiser && (
            <NativeAdView.Asset type={NativeAdAssetNames.ADVERTISER}>
              <Text>{ad.advertiser}</Text>
            </NativeAdView.Asset>
          )}

          {/* App rating score from 0 to 5 (optional). */}
          {ad.starRating !== undefined && ad.starRating > 0 && (
            <NativeAdView.Asset type={NativeAdAssetNames.STAR_RATING}>
              <Text>★ {ad.starRating.toFixed(1)}</Text>
            </NativeAdView.Asset>
          )}
        </View>
      </View>

      {/* 3. Media Content */}
      {/* Video or image media asset (optional). */}
      <NativeAdMediaView resizeMode={ResizeMode.COVER} />

      {/* 4. Body Text */}
      {/* Detailed description text (optional). */}
      {ad.body && (
        <NativeAdView.Asset type={NativeAdAssetNames.BODY}>
          <Text>{ad.body}</Text>
        </NativeAdView.Asset>
      )}

      {/* 5. Footer: Price, Store, and Call To Action */}
      <View>
        {/* Price string for products or paid apps (optional). */}
        {ad.price && (
          <NativeAdView.Asset type={NativeAdAssetNames.PRICE}>
            <Text>{ad.price}</Text>
          </NativeAdView.Asset>
        )}

        {/* App store source such as "Google Play" or "App Store" (optional). */}
        {ad.store && (
          <NativeAdView.Asset type={NativeAdAssetNames.STORE}>
            <Text>{ad.store}</Text>
          </NativeAdView.Asset>
        )}

        {/* Action button text such as "Install" or "Shop Now" (optional). */}
        {ad.callToAction && (
          <NativeAdView.Asset type={NativeAdAssetNames.CALL_TO_ACTION}>
            <View>
              <Text>{ad.callToAction}</Text>
            </View>
          </NativeAdView.Asset>
        )}
      </View>
    </NativeAdView>
  );
}

Mostrar anúncios nativos Mantenha tudo organizado com as coleções Salve e categorize o conteúdo com base nas suas preferências.