Gli annunci banner occupano una posizione fissa nel layout dell'app, ad esempio nella parte superiore o inferiore dello schermo del dispositivo. Questi annunci rimangono sullo schermo mentre gli utenti interagiscono con l'app e vengono aggiornati dopo un periodo di tempo impostato da te. I banner adattivi ancorati utilizzano le dimensioni dell'annuncio per ogni dispositivo utilizzando una larghezza dell'annuncio specificata da te.
Questa pagina spiega come integrare gli annunci banner adattivi ancorati in un'app nativa React Native.
Prerequisiti
Prima di continuare, completa queste operazioni:
- Configura Google Mobile Ads SDK for React Native.
- Attiva gli annunci di prova e utilizza il seguente ID unità pubblicitaria di test:
Android
ca-app-pub-3940256099942544/9214589741
iOS
ca-app-pub-3940256099942544/2435281174
Ottieni le dimensioni dell'annuncio
Per richiedere un annuncio banner adattivo ancorato, chiama il metodo AdSize.getLargeAnchoredAdaptiveBannerAdSize con la larghezza del contenitore dell'annuncio disponibile in pixel indipendenti dalla densità (dp). Questo metodo restituisce una promessa che si risolve in un oggetto AdSize.
L'esempio seguente recupera e restituisce le dimensioni di un annuncio banner adattivo ancorato:
export async function getAdaptiveAdSize(width: number): Promise<AdSize> {
const adSize = await AdSize.getLargeAnchoredAdaptiveBannerAdSize(width);
return adSize;
}
Carica un annuncio
Dopo aver ottenuto un oggetto AdSize, chiama il metodo load nella classe BannerAd con l'ID unità pubblicitaria e le dimensioni dell'annuncio.
L'esempio seguente carica un annuncio banner adattivo ancorato con le dimensioni dell'annuncio e l'ID unità pubblicitaria, riceve l'istanza BannerAd caricata in caso di esito positivo e registra un errore in caso di esito negativo:
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);
},
},
);
}
Aggiorna un annuncio
Se hai configurato l'unità pubblicitaria per l'aggiornamento, non è necessario richiedere un altro annuncio quando l'annuncio non viene caricato. Google Mobile Ads SDK for React Native rispetta qualsiasi frequenza di aggiornamento specificata nell'interfaccia utente di AdMob. Se non hai attivato l'aggiornamento, invia una nuova richiesta. Per maggiori dettagli sull'aggiornamento delle unità pubblicitarie, ad esempio sull'impostazione di una frequenza di aggiornamento, consulta Utilizza l'aggiornamento automatico per gli annunci banner.
Visualizza un annuncio banner
Per visualizzare un'istanza BannerAd caricata, passa l'istanza dell'annuncio alla proprietà ad di un componente BannerAdView nella gerarchia di oggetti View.
L'esempio seguente mostra un annuncio e lo elimina quando il componente viene smontato:
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} />;
}
Questo esempio chiama il metodo destroy quando il componente viene smontato o quando l'istanza dell'annuncio viene sostituita. Questo processo libera la memoria e le risorse utilizzate dall'annuncio.
Ascolta gli eventi degli annunci
Per rimanere in ascolto degli eventi dell'annuncio, come le impressioni dell'annuncio e i clic, imposta i callback sul componente BannerAdView. Per tutti i callback, consulta BannerAdViewProps.
L'esempio seguente imposta i callback per ascoltare gli eventi degli annunci 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);
}}
/>
);
}
Questo esempio rimane in ascolto degli eventi degli annunci, come chiusure, impressioni, clic, presentazione a schermo intero, entrate pubblicitarie stimate e aggiornamenti riusciti e non riusciti.
Visualizza l'esempio completo
Questa sezione illustra l'esempio completo di integrazione di un annuncio banner in un componente React Native.
L'esempio seguente integra un annuncio banner in un componente React Native e gestisce l'istanza dell'annuncio nello stato:
Sostituisci BANNER_AD_UNIT_ID con l'ID unità pubblicitaria.
Passaggi successivi
Dopo aver integrato gli annunci banner, esplora i seguenti argomenti: