Configura los anuncios intersticiales

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.

Para eliminar la latencia de presentación y asegurarse de que haya un anuncio disponible cuando se produzca una transición, el Google Mobile Ads SDK for React Native usa la precarga de anuncios para administrar la carga en segundo plano, el almacenamiento en caché y la reposición del búfer.

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

Requisitos previos

Antes de continuar, haz lo siguiente:

Android 

ca-app-pub-3940256099942544/1033173712

iOS 

ca-app-pub-3940256099942544/4411468910

Información sobre la precarga de anuncios

La precarga de anuncios en Google Mobile Ads SDK for React Native automatiza la carga y el almacenamiento en caché de los anuncios.

La precarga de anuncios ofrece los siguientes beneficios:

  • Administración de referencias: Mantiene las referencias hasta que se muestran los anuncios.
  • Recarga automática: Carga un anuncio nuevo cuando se recupera uno de la caché.
  • Reintentos administrados: Carga un anuncio nuevo cuando no se puede cargar uno.
  • Administración de vencimientos: Actualiza los anuncios antes de que venzan.
  • Optimización de la caché: Optimiza el orden de la caché para publicar el anuncio con la prioridad más alta.

Para cargar anuncios de forma manual, consulta la guía Carga un solo anuncio intersticial.

Comienza a precargar

Para comenzar a precargar anuncios, llama al método InterstitialAdPreloader.start y pasa tu valor de preloadId, los parámetros de configuración y las devoluciones de llamada de eventos para supervisar los cambios de estado del búfer:

export function startPreloader(
  adUnitId: string,
  preloadId: string,
  customPreloadCallback?: PreloadCallback,
): boolean {
  try {
    const started = InterstitialAdPreloader.start(
      preloadId,
      {
        request: {adUnitId},
        bufferSize: 2,
      },
      {
        // Called when an ad is preloaded into the buffer.
        onAdPreloaded: (metadata) => {
          console.log(`Interstitial ad preloaded for ${metadata.preloadId}`);
          customPreloadCallback?.onAdPreloaded?.(metadata);
        },
        // Called when an ad fails to preload.
        onAdFailedToPreload: (error: LoadAdError) => {
          console.error('Failed to preload interstitial ad:', error.message);
          customPreloadCallback?.onAdFailedToPreload?.(error);
        },
        // Called when all preloaded ads in the buffer have been shown.
        onAdsExhausted: () => {
          console.log('Preload buffer exhausted for interstitial ads.');
          customPreloadCallback?.onAdsExhausted?.();
        },
      },
    );
    return started;
  } catch (error) {
    console.error('Error starting interstitial ad preloader:', error);
    return false;
  }
}

Un ID de precarga es una cadena que identifica de forma inequívoca una configuración de precarga de anuncios. Si usas el ID de unidad de anuncios para una sola configuración de carga previa en tu app, usa ese ID de unidad de anuncios como el ID de carga previa. Si tu app requiere varios precargadores para el mismo ID de unidad de anuncios, pasa cadenas distintas para cada ID de precarga.

Cuando tu app sondea un anuncio precargado del búfer, Google Mobile Ads SDK for React Native solicita un anuncio de reemplazo en segundo plano para volver a llenar el búfer. Si no quedan anuncios precargados en el búfer, Google Mobile Ads SDK for React Native invoca la devolución de llamada onAdsExhausted.

Límites de la caché de precarga

Google Mobile Ads SDK for React Native aplica un límite para toda la app en la cantidad total de anuncios precargados en todas las unidades de anuncios y los IDs de precarga:

  • Límite predeterminado: Google almacena un máximo de seis anuncios precargados en la memoria. Este límite se comparte entre todos los formatos y los IDs de carga previa.
  • Búfer recomendado: Dos anuncios precargados para cada ID de precarga.

Si tu app alcanza el límite de toda la app, las solicitudes en segundo plano de anuncios precargados se detendrán hasta que se sondeen los anuncios existentes de la caché o se destruyan. La carga previa también se detiene temporalmente mientras se muestra un anuncio de pantalla completa de forma activa.

Sondea y muestra el anuncio

Antes de mostrar un anuncio, llama al método InterstitialAdPreloader.isAdAvailable para verificar que haya un anuncio disponible. Para recuperar el anuncio, llama al método InterstitialAdPreloader.pollAd.

Para escuchar los eventos de presentación, como los descartes de anuncios o los errores de visualización, establece la propiedad adEventCallback en la instancia del anuncio antes de llamar al método show.

En el siguiente ejemplo, se verifica la disponibilidad de anuncios y se escuchan los eventos de presentación en pantalla completa antes de mostrar el anuncio:

export function showPreloadedAd(
  preloadId: string,
  customAdEventCallback?: FullScreenAdEventCallback,
) {
  if (InterstitialAdPreloader.isAdAvailable(preloadId)) {
    const ad = InterstitialAdPreloader.pollAd(preloadId);
    if (ad) {
      ad.adEventCallback = {
        // Called when the ad is presented on screen.
        onAdShowedFullScreenContent: () => {
          console.log('Preloaded interstitial ad showed full screen content.');
          customAdEventCallback?.onAdShowedFullScreenContent?.();
        },
        // Called when the ad is closed by the user.
        onAdDismissedFullScreenContent: () => {
          console.log('Preloaded interstitial ad dismissed.');
          customAdEventCallback?.onAdDismissedFullScreenContent?.();
          ad.destroy();
        },
        // Called when presentation fails.
        onAdFailedToShowFullScreenContent: (error) => {
          console.error('Preloaded interstitial ad failed to show:', error);
          customAdEventCallback?.onAdFailedToShowFullScreenContent?.(error);
          ad.destroy();
        },
        // Called when an impression is recorded.
        onAdImpression: () => {
          console.log('Preloaded interstitial ad recorded an impression.');
          customAdEventCallback?.onAdImpression?.();
        },
        // Called when the user taps the ad.
        onAdClicked: () => {
          console.log('Preloaded interstitial ad was clicked.');
          customAdEventCallback?.onAdClicked?.();
        },
        // Called when the ad is estimated to have earned money.
        onAdPaid: (adValue) => {
          console.log(
            `Preloaded interstitial ad paid: ${adValue.amountMicros}` +
              ` ${adValue.currencyCode}`,
          );
          customAdEventCallback?.onAdPaid?.(adValue);
        },
      };
      ad.show();
    }
  } else {
    console.log('No preloaded interstitial ad available in buffer.');
  }
}

Para liberar memoria y recursos, llama al método ad.destroy en las devoluciones de llamada onAdDismissedFullScreenContent y onAdFailedToShowFullScreenContent.

Lee la información de la respuesta

Para inspeccionar la información de respuesta del siguiente anuncio precargado sin quitarlo de la caché, llama al método InterstitialAdPreloader.peekAdResponseInfo:

export function peekPreloadedAdResponseInfo(preloadId: string) {
  if (InterstitialAdPreloader.isAdAvailable(preloadId)) {
    const responseInfo = InterstitialAdPreloader.peekAdResponseInfo(preloadId);
    if (responseInfo) {
      console.log('Next preloaded ad response info:', responseInfo);
    }
  }
}

Si hay un anuncio disponible, el método peekAdResponseInfo devuelve un objeto ResponseInfo que contiene información sobre la fuente del anuncio cargado y los adaptadores de red.

Limpia los recursos

Si ya no necesitas mostrar anuncios para un ID de carga previa específico durante el resto de la sesión, llama al método InterstitialAdPreloader.destroy. Este proceso detiene la carga previa para ese ID de carga previa y libera de la memoria los anuncios precargados que no se usaron.

En el siguiente ejemplo, se detiene la precarga:

export function destroyPreloader(preloadId: string) {
  InterstitialAdPreloader.destroy(preloadId);
}

Después de que el usuario descarte el anuncio o este no se muestre, destruye las instancias individuales de anuncios sondeados. Para obtener más información, consulta Sondea y muestra el anuncio.

Observa el ejemplo completo

En el siguiente ejemplo, el componente inicia la precarga en el montaje, hace un seguimiento de los recuentos de anuncios disponibles y proporciona controles para mostrar anuncios intersticiales precargados:

export function InterstitialScreen() {
  const [numAdsAvailable, setNumAdsAvailable] = useState<number>(0);
  const [status, setStatus] = useState<string>('Initializing Preloader...');

  const refreshAdCount = () => {
    const count = InterstitialAdPreloader.getNumAdsAvailable(PRELOAD_ID);
    setNumAdsAvailable(count);
  };

  useEffect(() => {
    // Start preloading interstitial ads on component mount
    startPreloader(INTERSTITIAL_AD_UNIT_ID, PRELOAD_ID, {
      onAdPreloaded: () => {
        refreshAdCount();
        setStatus('Ad preloaded and ready!');
      },
      onAdFailedToPreload: (error) => {
        setStatus(`Preload failed: ${error.message}`);
      },
      onAdsExhausted: () => {
        refreshAdCount();
        setStatus('Preload buffer exhausted.');
      },
    });
    setStatus('Preloader started.');

    // Clean up preloader resources on component unmount
    return () => {
      destroyPreloader(PRELOAD_ID);
    };
  }, []);

  const handleShow = () => {
    showPreloadedAd(PRELOAD_ID, {
      onAdDismissedFullScreenContent: () => {
        setStatus('Ad dismissed.');
      },
      onAdFailedToShowFullScreenContent: (error) => {
        setStatus(`Failed to show ad: ${error.message}`);
      },
    });
    setStatus('Showing preloaded ad...');
    refreshAdCount();
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Preload Interstitial Ads</Text>
      <Text style={styles.status}>Status: {status}</Text>
      <Text style={styles.status}>Ads Available: {numAdsAvailable}</Text>
      <View style={styles.buttonGroup}>
        <Button
          title="Show Preloaded Ad"
          onPress={handleShow}
          disabled={numAdsAvailable === 0}
        />
      </View>
    </View>
  );
}

Reemplaza lo siguiente:

  • INTERSTITIAL_AD_UNIT_ID por tu ID de unidad de anuncios
  • PRELOAD_ID por tu ID de precargador.

Próximos pasos

Después de integrar los anuncios intersticiales, explora los siguientes temas: