Carga un solo anuncio para inicio de aplicación

Los anuncios para inicio de aplicación aparecen cuando los usuarios abren tu app o regresan a ella, y pueden cerrarlos en cualquier momento. Para monetizar la pantalla de carga de tu app, usa anuncios para inicio de aplicación. Para obtener más información, consulta

Información y prácticas recomendadas sobre los anuncios para inicio de aplicación.

En esta guía, se explica cómo integrar anuncios de aplicación abierta en una app de React Native.

Requisitos previos

Antes de continuar, haz lo siguiente:

Android 

ca-app-pub-3940256099942544/9257395921

iOS 

ca-app-pub-3940256099942544/5575463023

Carga un anuncio

Para cargar un anuncio para inicio de aplicación, llama al método load.

En el siguiente ejemplo, se carga un anuncio para inicio de aplicación si se realiza correctamente y se registra un error si falla:

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

Escucha los eventos de anuncios

Antes de mostrar el anuncio, configura el objeto de escucha adEventCallback en la instancia AppOpenAd cargada. Este objeto de escucha recibe devoluciones de llamada de eventos del ciclo de vida de los anuncios, como cuando se muestra el anuncio en la pantalla o cuando un usuario lo presiona. Para conocer las devoluciones de llamada disponibles, consulta AdEventCallback.

En el siguiente ejemplo, se configuran devoluciones de llamada para escuchar eventos de anuncios:

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

En este ejemplo, también se usa el método destroy cuando un usuario cierra el anuncio o cuando este no se muestra. Este proceso libera los recursos que usó el anuncio.

Muestra el anuncio

Para mostrar un anuncio para inicio de aplicación, llama al método show:

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

Administra anuncios con un administrador a nivel de la app

Te recomendamos que administres los anuncios para inicio de aplicación en un administrador a nivel de la app fuera del árbol de componentes de React. Debido a que los anuncios para inicio de aplicación aparecen de forma global cuando el usuario abre tu app o regresa a ella, un administrador a nivel de la app mantiene los anuncios separados de la interfaz de usuario.

En el siguiente ejemplo, se crea una instancia de SingleLoadAppOpenAdManager que carga un anuncio, escucha los eventos de anuncios y verifica la disponibilidad de los anuncios:

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 administrador a nivel de la app te ayuda a hacer lo siguiente:

  • Mantén el estado del anuncio independiente de la navegación por la pantalla y los ciclos de vida de los componentes.
  • Realiza un seguimiento del estado de la presentación de anuncios en los eventos de subprocesos nativos.
  • Controla las transiciones de la app al primer plano para evitar que se muestren anuncios repetidos.
  • Carga previamente los anuncios en segundo plano para que estén disponibles cuando se abra tu app.
  • Verifica el límite de vencimiento de anuncios de cuatro horas para evitar que se muestren anuncios vencidos.
  • Combina la carga, la visualización y la liberación de recursos de anuncios.

Escucha los eventos de app en primer plano

Para mostrar anuncios gráficos cuando tu app vuelva al primer plano, usa el módulo AppState para detectar cambios de estado de la app en la raíz de tu app, por ejemplo, en el archivo App.tsx. Puedes hacer lo siguiente:

  1. Registra un objeto de escucha AppState para el evento 'change'.
  2. Cuando el estado cambie a 'active', llama al método showAdIfAvailable en la instancia del administrador de anuncios.

En el siguiente ejemplo, se escuchan los eventos en primer plano de la app y se muestra un anuncio si está disponible:

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

Más información sobre los inicios en frío y las pantallas de carga

Un inicio en frío se produce cuando tu app se inicia desde cero, por ejemplo, cuando un usuario la abre por primera vez o después de que el dispositivo la cierra para liberar memoria. Durante un inicio en frío, no tienes un anuncio para inicio de aplicación cargado previamente para mostrar a continuación.

Debido a las demoras en las solicitudes de anuncios, es posible que los usuarios interactúen con tu app antes de que aparezca un anuncio. Para evitar una mala experiencia del usuario, muestra anuncios para inicio de aplicación en los inicios en frío solo desde una pantalla de carga mientras se cargan los recursos de la app. Si los recursos terminan de cargarse y el usuario llega al contenido principal antes de que se cargue el anuncio, no lo muestres.

Configura una pantalla de prueba

Para probar los anuncios de forma interactiva o mostrarlos en una pantalla específica, administra la instancia del anuncio en el estado del componente.

En el siguiente ejemplo, se integra un anuncio para inicio de aplicación en un componente de React Native con un hook de limpieza useEffect. Si el componente se desinstala antes de que se muestre el anuncio, este hook libera los recursos nativos.

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

Próximos pasos

Después de integrar un anuncio para inicio de aplicación, explora los siguientes temas: