Configurare gli annunci nativi

Gli annunci nativi forniscono singoli asset annuncio, come un titolo, immagini e testo di richiesta, che puoi formattare e disporre in modo che corrispondano al design visivo della tua app. Per gestire il monitoraggio dei clic, le impressioni e la riproduzione dei contenuti multimediali, Google Mobile Ads SDK for React Native fornisce i seguenti componenti:

Per informazioni dettagliate sulla visualizzazione degli annunci nativi in modo conforme, consulta Annunci nativi che utilizzano il formato nativo avanzato.

Questa pagina spiega come caricare annunci nativi singoli e multipli, gestire la memoria e i cicli di vita degli annunci e attivare l'accelerazione hardware per gli annunci video su Android.

Prerequisiti

Prima di continuare, completa queste operazioni:

Android

Formato ID unità pubblicitaria di esempio
Nativo ca-app-pub-3940256099942544/2247696110
Video nativo ca-app-pub-3940256099942544/1044960115

iOS

Formato ID unità pubblicitaria di esempio
Nativo ca-app-pub-3940256099942544/3986624511
Video nativo ca-app-pub-3940256099942544/2521693316

Carica un annuncio

Per caricare un annuncio nativo, chiama il metodo NativeAd.load con un oggetto NativeAdRequest contenente l'ID unità pubblicitaria. Questo metodo restituisce una promessa che si risolve con l'oggetto NativeAd caricato o viene rifiutata con un oggetto LoadAdError.

L'esempio seguente carica un singolo annuncio nativo, restituisce l'annuncio caricato in caso di esito positivo e registra un messaggio di errore in caso di esito negativo:

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

Quando carichi e gestisci gli annunci nativi, ti consigliamo di procedere come segue:

  • Limita gli annunci caricati: gli asset annuncio nativi consumano memoria. Carica solo gli annunci che gli utenti stanno per visualizzare, ad esempio i successivi uno o due posizionamenti degli annunci, anziché caricare grandi gruppi di annunci contemporaneamente.
  • Esegui la pulizia degli annunci non montati: quando rimuovi o sostituisci un annuncio dallo schermo o quando il componente contenitore viene smontato, chiama il metodo ad.destroy. Questo metodo rilascia le risorse e la memoria utilizzate dall'annuncio.
  • Mostra gli annunci caricati entro un'ora: le creatività degli annunci nativi scadono dopo 60 minuti. Se non hai mostrato un annuncio caricato entro un'ora, eliminalo e richiedine un altro.

(Facoltativo) Carica più annunci

Per caricare più annunci in una singola richiesta, chiama il metodo NativeAd.loadAds con un oggetto NativeAdRequest, il numero di annunci da richiedere e un oggetto NativeAdLoadCallback. La richiesta può contenere fino a cinque annunci.

L'esempio seguente richiede più annunci nativi e gestisce ogni annuncio caricato, gli errori di caricamento degli annunci e il completamento della richiesta utilizzando i callback:

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

Se mostri annunci display in un feed scorrevole, caricali in anticipo. Questo processo consente di eseguire il rendering degli annunci quando gli utenti li visitano.

Attiva l'accelerazione hardware

Per mostrare annunci video nelle visualizzazioni degli annunci nativi su Android, attiva l'accelerazione hardware.

Per impostazione predefinita, Android attiva l'accelerazione hardware. Le app potrebbero disattivare l'accelerazione hardware a livello globale. Se la tua app disattiva l'accelerazione hardware a livello globale, attiva l'impostazione per le classi Activity che mostrano gli annunci.

Se attivi l'accelerazione hardware a livello globale e la tua app non funziona come previsto, controlla l'accelerazione hardware per le singole attività. Per attivare o disattivare l'accelerazione hardware, utilizza l'attributo android:hardwareAccelerated per gli elementi application e activity nel file AndroidManifest.xml.

L'esempio seguente attiva l'accelerazione hardware a livello globale per l'app e disattiva l'impostazione per un'attività:

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

Passaggi successivi

Dopo aver caricato un annuncio, esegui il rendering dell'annuncio nella UI di React Native utilizzando i componenti NativeAdView e NativeAdMediaView. Per maggiori dettagli, consulta Visualizza annunci nativi.