Caricare un singolo annuncio apertura app

Gli annunci apertura app vengono visualizzati quando gli utenti aprono o tornano alla tua app. Gli utenti possono chiudere gli annunci apertura app in qualsiasi momento. Per monetizzare la schermata di caricamento dell'app, utilizza gli annunci apertura app. Per maggiori dettagli, vedi

Indicazioni e best practice per gli annunci apertura app.

Questa guida spiega come integrare gli annunci apertura app in un'app React Native.

Prerequisiti

Prima di continuare, completa queste operazioni:

Android 

ca-app-pub-3940256099942544/9257395921

iOS 

ca-app-pub-3940256099942544/5575463023

Carica un annuncio

Per caricare un annuncio apertura app, chiama il metodo load.

L'esempio seguente carica un annuncio apertura app in caso di esito positivo e registra un errore in caso di esito negativo:

export async function loadAppOpenAd(
  adUnitId: string,
): Promise<AppOpenAd | null> {
  try {
    const ad = await AppOpenAd.load({adUnitId});
    return ad;
  } catch (error) {
    const loadError = error as LoadAdError;
    console.error('Failed to load app open ad:', loadError.message);
    return null;
  }
}

Ascolta gli eventi degli annunci

Prima di mostrare l'annuncio, imposta il listener adEventCallback sull'istanza AppOpenAd caricata. Questo listener riceve i callback degli eventi del ciclo di vita dell'annuncio, ad esempio l'annuncio visualizzato sullo schermo o un utente che tocca l'annuncio. Per i callback disponibili, consulta AdEventCallback.

L'esempio seguente imposta i callback per ascoltare gli eventi annuncio:

export function registerAdEvents(ad: AppOpenAd) {
  ad.adEventCallback = {
    // Called when the ad is presented on screen.
    onAdShowedFullScreenContent: () => {
      console.log('App open ad showed full screen content.');
    },
    // Called when the ad is closed by the user.
    onAdDismissedFullScreenContent: () => {
      console.log('App open ad dismissed full screen content.');
      ad.destroy();
    },
    // Called when presentation fails.
    onAdFailedToShowFullScreenContent: (error) => {
      console.error('Failed to show app open ad:', error);
      ad.destroy();
    },
    // Called when an impression is recorded.
    onAdImpression: () => {
      console.log('App open ad recorded an impression.');
    },
    // Called when the user taps the ad.
    onAdClicked: () => {
      console.log('App open ad was clicked.');
    },
    // Called when the ad is estimated to have earned money.
    onAdPaid: (adValue) => {
      console.log(
        `App open ad paid: ${adValue.amountMicros} ${adValue.currencyCode}`,
      );
    },
  };
}

Questo esempio utilizza anche il metodo destroy quando un utente chiude l'annuncio o quando l'annuncio non viene mostrato. Questo processo rilascia le risorse utilizzate dall'annuncio.

Mostra l'annuncio

Per mostrare un annuncio apertura app, chiama il metodo show:

export function showAppOpenAd(ad: AppOpenAd) {
  ad.show();
}

Gestisci gli annunci con un gestore a livello di app

Ti consigliamo di gestire gli annunci apertura app in un gestore a livello di app al di fuori dell'albero dei componenti React. Poiché gli annunci apertura app vengono visualizzati a livello globale quando l'utente apre o torna all'app, un gestore a livello di app mantiene gli annunci separati dall'interfaccia utente.

L'esempio seguente crea un'istanza SingleLoadAppOpenAdManager che carica un annuncio, rimane in ascolto degli eventi relativi agli annunci e verifica la disponibilità degli annunci:

export class SingleLoadAppOpenAdManager {
  private ad: AppOpenAd | null = null;
  private loadTime = 0;
  private isShowingAd = false;

  async loadAd(adUnitId: string) {
    // Avoid re-loading if an ad is already loaded or showing.
    if (this.ad) {
      return;
    }
    try {
      this.ad = await AppOpenAd.load({adUnitId});
      this.loadTime = Date.now();
      this.ad.adEventCallback = {
        onAdDismissedFullScreenContent: () => {
          this.ad?.destroy();
          this.ad = null;
          this.isShowingAd = false;
          // Preload the next ad for future foreground transitions.
          this.loadAd(adUnitId);
        },
        onAdFailedToShowFullScreenContent: () => {
          // An ad object that fails to present is consumed and cannot be reused.
          // Clean up native resources and preload a new ad for future events.
          this.ad?.destroy();
          this.ad = null;
          this.isShowingAd = false;
          this.loadAd(adUnitId);
        },
      };
    } catch (error) {
      console.error('Failed to load app open ad:', error);
    }
  }

  showAdIfAvailable() {
    if (!this.ad || !this.isAdAvailable()) {
      console.warn(
        'App open ad cannot be shown: ad is not loaded or has expired.',
      );
      return;
    }
    if (this.isShowingAd) {
      console.warn('App open ad cannot be shown: an ad is already displaying.');
      return;
    }

    this.ad.show();
    this.isShowingAd = true;
  }

  isAdAvailable(): boolean {
    // App Open ads expire after 4 hours per Google Mobile Ads policy.
    const FOUR_HOURS_IN_MS = 4 * 60 * 60 * 1000;
    return this.ad !== null && Date.now() - this.loadTime < FOUR_HOURS_IN_MS;
  }
}

Un amministratore a livello di app ti aiuta a:

  • Mantieni lo stato dell'annuncio indipendente dalla navigazione sullo schermo e dai cicli di vita dei componenti.
  • Monitora lo stato di presentazione degli annunci negli eventi dei thread nativi.
  • Gestisci le transizioni dell'app in primo piano per evitare di mostrare annunci ripetuti.
  • Precarica gli annunci in background per renderli disponibili all'apertura dell'app.
  • Controlla il limite di scadenza degli annunci di quattro ore per evitare di mostrare annunci scaduti.
  • Combina il caricamento, la visualizzazione e la pulizia delle risorse degli annunci.

Ascolta gli eventi che mettono in primo piano l'app

Per visualizzare gli annunci display quando l'app torna in primo piano, utilizza il modulo AppState per rimanere in ascolto delle modifiche dello stato dell'app nella directory principale dell'app, ad esempio nel file App.tsx. Segui questi passaggi:

  1. Registra un listener AppState per l'evento 'change'.
  2. Quando lo stato passa a 'active', chiama il metodo showAdIfAvailable nell'istanza di Ad Manager.

L'esempio seguente ascolta gli eventi in primo piano dell'app e mostra un annuncio, se disponibile:

export function setupAppOpenAdForegroundListener(adManager: {
  showAdIfAvailable: () => void;
}): NativeEventSubscription {
  return AppState.addEventListener('change', (nextAppState: AppStateStatus) => {
    if (nextAppState === 'active') {
      adManager.showAdIfAvailable();
    }
  });
}

Scopri di più sugli avvii completi e sulle schermate di caricamento

Un avvio a freddo si verifica quando l'app viene avviata da zero, ad esempio quando un utente apre l'app per la prima volta o dopo che il dispositivo chiude l'app per liberare memoria. Durante un avvio a freddo, non hai un annuncio apertura app caricato in precedenza da mostrare successivamente.

A causa dei ritardi delle richieste di annunci, gli utenti potrebbero interagire con la tua app prima che venga visualizzato un annuncio. Per evitare un'esperienza utente negativa, mostra gli annunci apertura app con avvio a freddo solo da una schermata di caricamento mentre vengono caricati gli asset dell'app. Se il caricamento degli asset termina e l'utente raggiunge i contenuti principali prima del caricamento dell'annuncio, non mostrare l'annuncio.

Configura una schermata di test

Per testare gli annunci in modo interattivo o visualizzarli su una schermata specifica, gestisci l'istanza dell'annuncio nello stato del componente.

L'esempio seguente integra un annuncio apertura app in un componente React Native con un hook di pulizia useEffect. Se il componente viene smontato prima della visualizzazione dell'annuncio, questo hook rilascia le risorse native.

export function AppOpenSingleLoadScreen() {
  const [ad, setAd] = useState<AppOpenAd | null>(null);
  const [isLoaded, setIsLoaded] = useState(false);
  const [status, setStatus] = useState<string>('Idle');

  useEffect(() => {
    return () => {
      ad?.destroy();
    };
  }, [ad]);

  const handleLoad = async () => {
    setStatus('Loading App Open ad...');
    const loadedAd = await loadAppOpenAd(APP_OPEN_AD_UNIT_ID);
    if (loadedAd) {
      registerAdEvents(loadedAd);
      const onDismiss =
        loadedAd.adEventCallback?.onAdDismissedFullScreenContent;
      loadedAd.adEventCallback = {
        ...loadedAd.adEventCallback,
        onAdDismissedFullScreenContent: () => {
          onDismiss?.();
          setStatus('Ad dismissed.');
        },
      };
      setAd((prevAd) => {
        prevAd?.destroy();
        return loadedAd;
      });
      setIsLoaded(true);
      setStatus('App Open ad loaded!');
    } else {
      setStatus('Failed to load App Open ad.');
    }
  };

  const handleShow = () => {
    if (ad) {
      showAppOpenAd(ad);
      setIsLoaded(false);
    }
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>App Open Ad</Text>
      <Text style={styles.status}>Status: {status}</Text>
      <View style={styles.buttonGroup}>
        <Button title="Load Ad" onPress={handleLoad} />
        <View style={styles.spacerSmall} />
        <Button title="Show Ad" onPress={handleShow} disabled={!isLoaded} />
      </View>
    </View>
  );
}

Passaggi successivi

Dopo aver integrato un annuncio apertura app, consulta i seguenti argomenti: