Carga un solo anuncio intersticial

Los anuncios intersticiales son anuncios de pantalla completa que aparecen en los puntos de transición de tu app, como entre pantallas o durante la pausa entre los niveles de un juego. Tus usuarios pueden presionar el anuncio para visitar el destino o cerrarlo y volver a la app. Para obtener más detalles, consulta la guía de anuncios intersticiales y un caso de éxito.

En esta guía, se muestra cómo integrar anuncios intersticiales en una app de React Native.

Requisitos previos

Android 

ca-app-pub-3940256099942544/1033173712

iOS 

ca-app-pub-3940256099942544/4411468910

Carga un anuncio

Para cargar un anuncio intersticial, llama al método load en la clase InterstitialAd.

En el siguiente ejemplo, se carga un anuncio intersticial si se realiza correctamente y se registra un error si falla:

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

Detecta eventos de anuncios

Antes de mostrar el anuncio, configura el objeto de escucha adEventCallback en la instancia InterstitialAd cargada. Este objeto de escucha recibe devoluciones de llamada para eventos del ciclo de vida del anuncio, 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: InterstitialAd) {
  ad.adEventCallback = {
    // Called when the ad is presented on screen.
    onAdShowedFullScreenContent: () => {
      console.log('Interstitial ad showed full screen content.');
    },
    // Called when the ad is closed by the user.
    onAdDismissedFullScreenContent: () => {
      console.log('Interstitial ad dismissed full screen content.');
      ad.destroy();
    },
    // Called when presentation fails.
    onAdFailedToShowFullScreenContent: (error) => {
      console.error('Failed to show interstitial ad:', error);
      ad.destroy();
    },
    // Called when an impression is recorded.
    onAdImpression: () => {
      console.log('Interstitial ad recorded an impression.');
    },
    // Called when the user taps the ad.
    onAdClicked: () => {
      console.log('Interstitial ad was clicked.');
    },
    // Called when the ad is estimated to have earned money.
    onAdPaid: (adValue) => {
      console.log(
        `Interstitial ad paid: ${adValue.amountMicros}` +
          ` ${adValue.currencyCode}`,
      );
    },
  };
}

En este ejemplo, también se llama al 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 intersticial, llama al método show en la instancia InterstitialAd cargada.

En el siguiente ejemplo, se muestra un anuncio intersticial:

export function showInterstitialAd(ad: InterstitialAd) {
  ad.show();
}

Observa el ejemplo completo

En esta sección, se incluye el ejemplo completo para integrar un anuncio intersticial en una app de React Native.

En el siguiente ejemplo, se integra el anuncio en un componente de React Native, se administra la instancia del anuncio en el estado y se proporcionan controles para cargar y mostrar el anuncio:

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

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

  const handleLoad = async () => {
    setStatus('Loading Interstitial ad...');
    const loadedAd = await loadInterstitialAd(INTERSTITIAL_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('Interstitial ad loaded!');
    } else {
      setStatus('Failed to load Interstitial ad.');
    }
  };

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

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Interstitial 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 los anuncios intersticiales, explora los siguientes temas: