Configura anuncios nativos

Los anuncios nativos te proporcionan recursos de anuncios individuales, como un título, imágenes y texto de solicitud, a los que puedes darles estilo y organizar para que coincidan con el diseño visual de tu app. Para controlar el seguimiento de clics, las impresiones y la reproducción de contenido multimedia, 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 cargar uno o varios anuncios nativos, administrar la memoria y los ciclos de vida de los anuncios, y habilitar la aceleración de hardware para los anuncios de video en Android.

Requisitos previos

Antes de continuar, haz lo siguiente:

Android

Formato ID de unidad de anuncios de muestra
Nativo ca-app-pub-3940256099942544/2247696110
Video nativo ca-app-pub-3940256099942544/1044960115

iOS

Formato ID de unidad de anuncios de muestra
Nativo ca-app-pub-3940256099942544/3986624511
Video nativo ca-app-pub-3940256099942544/2521693316

Carga un anuncio

Para cargar un anuncio nativo, llama al método NativeAd.load con un objeto NativeAdRequest que contenga tu ID de unidad de anuncios. Este método devuelve una promesa que se resuelve con el objeto NativeAd cargado o se rechaza con un objeto LoadAdError.

En el siguiente ejemplo, se carga un solo anuncio nativo, se devuelve el anuncio cargado si la operación se realiza correctamente y se registra un mensaje de error si falla:

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

Cuando cargues y administres anuncios nativos, te recomendamos que hagas lo siguiente:

  • Limita los anuncios cargados: Los recursos de anuncios nativos consumen memoria. Solo carga los anuncios que los usuarios están a punto de ver, como las próximas una o dos posiciones de anuncios, en lugar de cargar grandes lotes a la vez.
  • Limpia los anuncios que no se activaron: Cuando quites o reemplaces un anuncio de la pantalla, o cuando se desactive el componente que lo contiene, llama al método ad.destroy. Este método libera los recursos y la memoria que usa el anuncio.
  • Muestra los anuncios cargados en un plazo de una hora: Las creatividades de anuncios nativos vencen después de 60 minutos. Si no mostraste un anuncio cargado en una hora, destrúyelo y solicita otro.

Opcional: Carga varios anuncios

Para cargar varios anuncios en una sola solicitud, llama al método NativeAd.loadAds con un objeto NativeAdRequest, la cantidad de anuncios que se solicitarán y un objeto NativeAdLoadCallback. La solicitud puede contener hasta cinco anuncios.

En el siguiente ejemplo, se solicitan varios anuncios nativos y se controla cada anuncio cargado, los errores de carga de anuncios y la finalización de la solicitud con devoluciones de llamada:

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.');
    },
  });
}

Si muestras anuncios en un feed desplazable, cárgalos con anticipación. Este proceso permite la renderización de anuncios cuando los usuarios los visitan.

Habilita la aceleración de hardware

Para mostrar anuncios de video en tus vistas de anuncios nativos en Android, habilita la aceleración de hardware.

De forma predeterminada, Android habilita la aceleración de hardware. Las apps pueden inhabilitar la aceleración de hardware de forma global. Si tu app inhabilita la aceleración de hardware de forma global, habilita el parámetro de configuración para las clases Activity que muestran anuncios.

Si habilitas la aceleración de hardware de forma global y tu app no funciona como se espera, controla la aceleración de hardware para actividades individuales. Para habilitar o inhabilitar la aceleración de hardware, usa el atributo android:hardwareAccelerated para los elementos application y activity en tu archivo AndroidManifest.xml.

En el siguiente ejemplo, se habilita la aceleración de hardware de forma global para la app y se inhabilita el parámetro de configuración para una actividad:

<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óximos pasos

Después de cargar un anuncio, renderízalo en tu IU de React Native con los componentes NativeAdView y NativeAdMediaView. Para obtener más información, consulta Muestra anuncios nativos.