Google utiliza tecnología de IA para traducir contenido a tu idioma preferido. Las traducciones realizadas con IA pueden contener errores.

Muestra anuncios nativos

Cuando se carga un anuncio nativo, tu app recibe un objeto de anuncio que contiene recursos del anuncio, como imágenes, texto y videos. Tu app es responsable de mostrar los recursos del anuncio en un diseño de vista de anuncio nativo. Para mostrar anuncios nativos de conformidad con las políticas, Google Mobile Ads SDK for React Native proporciona los siguientes componentes:

Para obtener detalles sobre cómo mostrar anuncios nativos de conformidad con las políticas, consulta Anuncios nativos que usan nativos avanzados.

En esta página, se explica cómo renderizar recursos de anuncios nativos, configurar contenido multimedia y controlar eventos de anuncios con Google Mobile Ads SDK for React Native.

Requisitos previos

Antes de continuar, haz lo siguiente:

Define el componente de vista de anuncio nativo

El componente NativeAdView es el contenedor de nivel superior para el diseño de tu anuncio nativo. Este componente une todas las vistas de recursos individuales y las vincula a la instancia de NativeAd cargada.

Unir tus recursos en el componente NativeAdView hace lo siguiente:

Registrar impresiones cuando el anuncio se muestra en pantalla
Registra los clics y controla la navegación cuando un usuario presiona los recursos interactivos.
Mostrar y posicionar la superposición de AdChoices

Atribución de anuncios y AdChoices

La atribución de anuncios y la superposición de AdChoices son requisitos de la política obligatorios para todas las implementaciones de anuncios nativos de Google.

Cuando unes tu diseño en NativeAdView, Google Mobile Ads SDK for React Native renderiza automáticamente el ícono de AdChoices en la esquina superior derecha de la vista del anuncio de forma predeterminada. No es necesario que agregues código personalizado ni vistas de recursos para que aparezca el ícono.

Para personalizar la ubicación del ícono en la esquina, consulta Configura funciones nativas avanzadas.

Completa y registra las vistas de recursos

Para registrar vistas de recursos con Google Mobile Ads SDK for React Native, une cada componente de recurso con un wrapper NativeAdView.Asset y especifica el tipo de recurso con el objeto NativeAdAssetNames. Cada wrapper NativeAdView.Asset debe contener un solo elemento host de React Native, como Text, Image o View, que acepte la propiedad nativeID. Para obtener detalles sobre las propiedades de los recursos disponibles, consulta Clase NativeAd.

En la siguiente tabla, se enumeran los tipos de recursos disponibles, las propiedades de destino y los ejemplos para registrar las vistas de recursos:

Tipo de recurso	Descripción y ejemplos
`ADVERTISER`	Propiedad de destino: `NativeAd.advertiser` {/* The advertiser or sponsor name (optional). */} {ad.advertiser && ( <NativeAdView.Asset type={NativeAdAssetNames.ADVERTISER}> <Text>{ad.advertiser}</Text> </NativeAdView.Asset> )}
`BODY`	Propiedad de destino: `NativeAd.body` {/* Detailed description text (optional). */} {ad.body && ( <NativeAdView.Asset type={NativeAdAssetNames.BODY}> <Text>{ad.body}</Text> </NativeAdView.Asset> )}
`CALL_TO_ACTION`	Propiedad 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`	Propiedad de destino: `NativeAd.headline` {/* The main title of the ad (required). */} <NativeAdView.Asset type={NativeAdAssetNames.HEADLINE}> <Text>{ad.headline}</Text> </NativeAdView.Asset>
`ICON`	Propiedad 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`	Propiedad 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`	Propiedad 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`	Propiedad 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> )}

Siempre renderiza de forma condicional las siguientes vistas de recursos opcionales:

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

Cuando un anuncio omite recursos opcionales, tu app no debe mostrar elementos de la IU vacíos.

Muestra contenido multimedia

El componente NativeAdMediaView renderiza el recurso visual del anuncio, como videos e imágenes. Si el anuncio contiene contenido de video, la vista de medios almacena en búfer y reproduce el video. Si el anuncio solo contiene contenido de imagen, la vista de medios renderiza la imagen principal.

Aplica el modo de cambio de tamaño del contenido multimedia

Para controlar cómo se ajustan las imágenes en el contenedor de vistas de medios, aplica la propiedad resizeMode en el componente NativeAdMediaView:

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

Los valores de ResizeMode disponibles incluyen los siguientes:

Establece la relación de aspecto de los medios

Para solicitar creatividades de anuncios que coincidan con la relación de aspecto de tu diseño de vista de medios, especifica la propiedad aspectRatio en la instancia NativeAdRequest.

En el siguiente ejemplo, se solicita un anuncio nativo con una relación de aspecto de medios horizontal, se devuelve el anuncio cargado si la solicitud se realiza correctamente y se registra un mensaje de error si falla:

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

Los valores NativeMediaAspectRatio disponibles incluyen los siguientes:

Escucha los eventos de anuncios

Para recibir notificaciones de eventos del ciclo de vida de los anuncios, como impresiones o clics, pasa devoluciones de llamada de eventos al componente NativeAdView. Para conocer todas las devoluciones de llamada disponibles, consulta AdEventCallback.

En el siguiente ejemplo, se pasan devoluciones de llamada de eventos para eventos de anuncios, como la visualización o el cierre de contenido de pantalla completa, al 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}`,
        );
      }}
    />
  );
}

Observa el ejemplo completo

En esta sección, se incluye el ejemplo completo de cómo compilar un componente de tarjeta de anuncio nativo reutilizable.

En el siguiente ejemplo, se define el componente NativeAdCard, que muestra una insignia de atribución del anuncio, renderiza y registra de forma condicional los recursos de anuncios nativos individuales, y renderiza el contenido multimedia con el 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>
  );
}

Muestra anuncios nativos Organiza tus páginas con colecciones Guarda y categoriza el contenido según tus preferencias.