Konfigurowanie reklam pełnoekranowych

Reklamy pełnoekranowe wyświetlają się w punktach przejścia w aplikacji, np. między ekranami lub podczas przerwy między poziomami gry. Użytkownicy mogą kliknąć reklamę, aby przejść do miejsca docelowego, lub zamknąć ją i wrócić do aplikacji. Więcej informacji znajdziesz w wytycznych dotyczących reklam pełnoekranowych i studium przypadku.

Aby wyeliminować opóźnienia w wyświetlaniu i zapewnić dostępność reklamy w momencie przejścia, Google Mobile Ads SDK for React Native używa wstępnego ładowania reklam do zarządzania ładowaniem w tle, buforowaniem i uzupełnianiem bufora.

Z tego przewodnika dowiesz się, jak zintegrować reklamy pełnoekranowe z aplikacją React Native.

Wymagania wstępne

Zanim przejdziesz dalej, wykonaj te czynności:

Android 

ca-app-pub-3940256099942544/1033173712

iOS 

ca-app-pub-3940256099942544/4411468910

Wstępne ładowanie reklam

Wstępne ładowanie reklam w Google Mobile Ads SDK for React Native automatyzuje wczytywanie i buforowanie reklam.

Wstępne ładowanie reklam zapewnia te korzyści:

  • Zarządzanie plikami referencyjnymi: przechowuje pliki referencyjne do momentu wyświetlenia reklam.
  • Automatyczne ponowne wczytywanie: wczytuje nową reklamę, gdy zostanie pobrana z pamięci podręcznej.
  • Zarządzane ponowne próby: wczytuje nową reklamę, gdy nie uda się wczytać poprzedniej.
  • Obsługa wygasania: odświeża reklamy przed wygaśnięciem.
  • Optymalizacja pamięci podręcznej: optymalizuje kolejność w pamięci podręcznej, aby wyświetlać reklamy o najwyższym priorytecie.

Aby dowiedzieć się, jak wczytywać reklamy ręcznie, zapoznaj się z przewodnikiem Wczytywanie pojedynczej reklamy pełnoekranowej.

Rozpocznij wstępne wczytywanie

Aby rozpocząć wstępne wczytywanie reklam, wywołaj metodę InterstitialAdPreloader.start i przekaż wartość preloadId, ustawienia konfiguracji oraz wywołania zwrotne zdarzeń, aby monitorować zmiany stanu bufora:

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

Identyfikator wstępnego ładowania to ciąg znaków, który jednoznacznie identyfikuje konfigurację wstępnego ładowania reklam. Jeśli używasz identyfikatora jednostki reklamowej w jednej konfiguracji wstępnego wczytywania w aplikacji, użyj go jako identyfikatora wstępnego wczytywania. Jeśli aplikacja wymaga kilku modułów wstępnego wczytywania dla tego samego identyfikatora jednostki reklamowej, przekaż różne ciągi znaków dla każdego identyfikatora wstępnego wczytywania.

Gdy aplikacja pobiera wstępnie załadowaną reklamę z bufora, Google Mobile Ads SDK for React Native wysyła w tle żądanie reklamy zastępczej, aby ponownie wypełnić bufor. Jeśli w buforze nie ma już wstępnie załadowanych reklam, Google Mobile Ads SDK for React Native wywołuje wywołanie zwrotne onAdsExhausted.

Limity wstępnego buforowania

Google Mobile Ads SDK for React Native wymusza limit łącznej liczby wstępnie wczytanych reklam w całej aplikacji we wszystkich jednostkach reklamowych i identyfikatorach wstępnego wczytywania:

  • Domyślny limit: Google przechowuje w pamięci maksymalnie 6 wstępnie załadowanych reklam. Ten limit jest wspólny dla wszystkich formatów i identyfikatorów wstępnego wczytywania.
  • Zalecany bufor: 2 wstępnie załadowane reklamy na każdy identyfikator wstępnego ładowania.

Jeśli aplikacja osiągnie limit, żądania w tle dotyczące wstępnie załadowanych reklam zostaną wstrzymane do czasu pobrania istniejących reklam z pamięci podręcznej lub ich usunięcia. Wstępne wczytywanie jest też tymczasowo wstrzymywane, gdy na ekranie wyświetla się reklama pełnoekranowa.

Ankieta i wyświetlenie reklamy

Zanim wyświetlisz reklamę, sprawdź, czy jest ona dostępna, wywołując metodę InterstitialAdPreloader.isAdAvailable. Aby pobrać reklamę, wywołaj metodę InterstitialAdPreloader.pollAd.

Aby nasłuchiwać zdarzeń związanych z prezentacją, takich jak zamknięcie reklamy lub błąd wyświetlania, ustaw właściwość adEventCallback w instancji reklamy przed wywołaniem metody show.

W tym przykładzie sprawdzamy dostępność reklamy i nasłuchujemy zdarzeń wyświetlania na pełnym ekranie, zanim wyświetlimy reklamę:

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

Aby zwolnić pamięć i zasoby, wywołaj metodę ad.destroy w wywołaniach zwrotnych onAdDismissedFullScreenContent i onAdFailedToShowFullScreenContent.

Przeczytaj informacje o odpowiedzi.

Aby sprawdzić informacje o odpowiedzi na następną wstępnie załadowaną reklamę bez usuwania jej z pamięci podręcznej, wywołaj metodę 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);
    }
  }
}

Jeśli reklama jest dostępna, metoda peekAdResponseInfo zwraca obiekt ResponseInfo zawierający informacje o wczytanym źródle reklamy i kartach sieciowych.

Czyszczenie zasobów

Jeśli nie musisz już wyświetlać reklam dla określonego identyfikatora wstępnego wczytywania przez resztę sesji, wywołaj metodę InterstitialAdPreloader.destroy. Ten proces zatrzymuje wstępne wczytywanie dla danego identyfikatora i zwalnia nieużywane wstępnie wczytane reklamy z pamięci.

Poniższy przykład zatrzymuje wstępne wczytywanie:

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

Gdy użytkownik zamknie reklamę lub gdy nie uda się jej wyświetlić, zniszcz poszczególne instancje reklam, które zostały pobrane. Więcej informacji znajdziesz w sekcji Odpytywanie i wyświetlanie reklamy.

Zobacz pełny przykład

Poniższy przykładowy komponent rozpoczyna wstępne wczytywanie po zamontowaniu, śledzi liczbę dostępnych reklam i udostępnia elementy sterujące do wyświetlania wstępnie wczytanych reklam pełnoekranowych:

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

Zastąp te elementy:

  • INTERSTITIAL_AD_UNIT_ID identyfikatorem jednostki reklamowej.
  • PRELOAD_ID, podając identyfikator wstępnego ładowania.

Dalsze kroki

Po zintegrowaniu reklam pełnoekranowych zapoznaj się z tymi tematami: