Los anuncios de banner ocupan una posición fija en el diseño de tu app, como en la parte superior o inferior de la pantalla del dispositivo. Estos anuncios permanecen en la pantalla mientras los usuarios interactúan con tu app y se actualizan después de un período que establezcas. Los banners adaptables fijos usan el tamaño del anuncio para cada dispositivo según el ancho que especificas.
En esta página, se explica cómo integrar anuncios de banner adaptables fijos en una aplicación nativa de React.
Requisitos previos
Antes de continuar, haz lo siguiente:
- Configura el Google Mobile Ads SDK for React Native.
- Habilita los anuncios de prueba y usa el siguiente ID de unidad de anuncios de prueba:
Android
ca-app-pub-3940256099942544/9214589741
iOS
ca-app-pub-3940256099942544/2435281174
Obtén el tamaño del anuncio
Para solicitar un anuncio de banner adaptable fijo, llama al método AdSize.getLargeAnchoredAdaptiveBannerAdSize con el ancho disponible del contenedor de anuncios en píxeles independientes de la densidad (dp). Este
método devuelve una promesa que se resuelve en un objeto AdSize.
En el siguiente ejemplo, se obtiene y devuelve el tamaño de un anuncio de banner adaptable fijo:
export async function getAdaptiveAdSize(width: number): Promise<AdSize> {
const adSize = await AdSize.getLargeAnchoredAdaptiveBannerAdSize(width);
return adSize;
}
Carga un anuncio
Después de obtener un objeto AdSize, llama al método load en la clase BannerAd con tu ID de unidad de anuncios y el tamaño del anuncio.
En el siguiente ejemplo, se carga un anuncio de banner adaptable fijo con el tamaño y el ID de unidad de anuncios, se recibe la instancia de BannerAd cargada si se realiza correctamente y se registra un error si falla:
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);
},
},
);
}
Actualiza un anuncio
Si configuraste tu unidad de anuncios para que se actualice, no es necesario que solicites otro anuncio cuando uno no se carga. El Google Mobile Ads SDK for React Native respeta cualquier frecuencia de actualización que hayas especificado en la IU de AdMob. Si no habilitaste la actualización, envía una nueva solicitud. Para obtener más detalles sobre la actualización de unidades de anuncios (por ejemplo, cómo establecer una frecuencia de actualización), consulta Cómo usar la actualización automática para los anuncios de banner.
Muestra un anuncio de banner
Para mostrar una instancia de BannerAd cargada, pasa la instancia del anuncio a la propiedad ad de un componente BannerAdView en tu jerarquía de vistas.
En el siguiente ejemplo, se muestra un anuncio y se destruye cuando se desmonta el componente:
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} />;
}
En este ejemplo, se llama al método destroy cuando se desmonta el componente o cuando se reemplaza la instancia del anuncio. Este proceso libera la memoria y los recursos que usa el anuncio.
Detecta eventos de anuncios
Para escuchar eventos de anuncios, como impresiones de anuncios y clics, configura devoluciones de llamada en el componente BannerAdView. Para
conocer todas las devoluciones de llamada, consulta BannerAdViewProps.
En el siguiente ejemplo, se configuran devoluciones de llamada para escuchar eventos de anuncios 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);
}}
/>
);
}
En este ejemplo, se escuchan eventos de anuncios, como descartes de anuncios, impresiones, clics, presentación de pantalla completa, ingresos publicitarios estimados y éxitos y fallas de actualización.
Observa el ejemplo completo
En esta sección, se muestra un ejemplo completo de cómo integrar un anuncio de banner en un componente de React Native.
En el siguiente ejemplo, se integra un anuncio de banner en un componente de React Native y se administra la instancia del anuncio en el estado:
Reemplaza BANNER_AD_UNIT_ID por tu ID de unidad de anuncios.
Próximos pasos
Después de integrar los anuncios de banner, explora los siguientes temas: