Wczytywanie pojedynczej reklamy wyświetlanej przy otwarciu aplikacji

Reklamy wyświetlane przy otwarciu aplikacji pojawiają się, gdy użytkownicy otwierają aplikację lub do niej wracają. Użytkownicy mogą w każdej chwili zamknąć te reklamy. Aby zarabiać na ekranie wczytywania aplikacji, używaj reklam wyświetlanych przy otwarciu aplikacji. Więcej informacji:

Wskazówki i sprawdzone metody dotyczące reklam wyświetlanych przy otwarciu aplikacji

Z tego przewodnika dowiesz się, jak zintegrować reklamy wyświetlane przy otwarciu aplikacji z aplikacją React Native.

Wymagania wstępne

Zanim przejdziesz dalej, wykonaj te czynności:

Android 

ca-app-pub-3940256099942544/9257395921

iOS 

ca-app-pub-3940256099942544/5575463023

Wczytywanie reklamy

Aby wczytać reklamę wyświetlaną przy otwarciu aplikacji, wywołaj metodę load.

Poniższy przykład wczytuje reklamę wyświetlaną przy otwarciu aplikacji w przypadku powodzenia i rejestruje błąd w przypadku niepowodzenia:

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

Nasłuchiwanie zdarzeń reklamowych

Zanim wyświetlisz reklamę, ustaw detektor adEventCallback w załadowanej instancji AppOpenAd. Ten detektor odbiera wywołania zwrotne zdarzeń cyklu życia reklamy, takich jak wyświetlenie reklamy na ekranie lub kliknięcie jej przez użytkownika. Dostępne wywołania zwrotne znajdziesz w AdEventCallback.

W tym przykładzie ustawiono wywołania zwrotne, które nasłuchują zdarzeń reklamowych:

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

W tym przykładzie użyto też metody destroy, gdy użytkownik zamknie reklamę lub gdy nie uda się jej wyświetlić. Ten proces zwalnia zasoby używane przez reklamę.

Wyświetl reklamę

Aby wyświetlić reklamę wyświetlaną przy otwarciu aplikacji, wywołaj metodę show:

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

Zarządzanie reklamami za pomocą menedżera na poziomie aplikacji

Zalecamy zarządzanie reklamami wyświetlanymi przy otwarciu aplikacji w menedżerze na poziomie aplikacji poza drzewem komponentów React. Reklamy wyświetlane przy otwarciu aplikacji pojawiają się globalnie, gdy użytkownik otwiera aplikację lub do niej wraca, dlatego menedżer na poziomie aplikacji oddziela reklamy od interfejsu użytkownika.

W tym przykładzie tworzymy instancję SingleLoadAppOpenAdManager, która wczytuje reklamę, nasłuchuje zdarzeń reklamowych i sprawdza dostępność reklamy:

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

Menedżer na poziomie aplikacji umożliwia:

  • Stan reklamy powinien być niezależny od nawigacji po ekranie i cyklu życia komponentu.
  • Śledzenie stanu prezentacji reklamy w ramach zdarzeń wątku natywnego.
  • Obsługuj przejścia aplikacji na pierwszy plan, aby uniknąć wyświetlania powtarzających się reklam.
  • Wstępnie wczytuj reklamy w tle, aby były dostępne po otwarciu aplikacji.
  • Sprawdź, czy reklamy nie wygasają po 4 godzinach, aby uniknąć wyświetlania wygasłych reklam.
  • Połącz wczytywanie, wyświetlanie i czyszczenie zasobów reklamowych.

Nasłuchiwanie zdarzeń przełączenia aplikacji na pierwszy plan

Aby wyświetlać reklamy displayowe, gdy aplikacja wraca na pierwszy plan, użyj modułu AppState do nasłuchiwania zmian stanu aplikacji w jej katalogu głównym, np. w pliku App.tsx. Wykonaj te czynności:

  1. Zarejestruj detektor AppState dla zdarzenia 'change'.
  2. Gdy stan zmieni się na 'active', wywołaj metodę showAdIfAvailable w instancji menedżera reklam.

W tym przykładzie nasłuchiwane są zdarzenia przełączenia aplikacji na pierwszy plan i wyświetlana jest reklama, jeśli jest dostępna:

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

Informacje o uruchomieniach „na zimno” i ekranach wczytywania

Zimny start ma miejsce, gdy aplikacja uruchamia się od zera, np. gdy użytkownik otwiera ją po raz pierwszy lub po tym, jak urządzenie zamknęło ją, aby zwolnić pamięć. Podczas uruchamiania „na zimno” nie masz wcześniej wczytanej reklamy wyświetlanej przy otwarciu aplikacji, którą można by wyświetlić.

Z powodu opóźnień w żądaniach reklamy użytkownicy mogą wejść w interakcję z aplikacją, zanim pojawi się reklama. Aby zapewnić użytkownikom wygodę, wyświetlaj reklamy przy otwarciu aplikacji podczas uruchamiania „na zimno” tylko na ekranie wczytywania, gdy komponenty aplikacji są ładowane. Jeśli zasoby zostaną wczytane, a użytkownik dotrze do głównej treści, zanim reklama się wczyta, nie wyświetlaj reklamy.

Konfigurowanie ekranu testowego

Aby testować reklamy interaktywnie lub wyświetlać je na konkretnym ekranie, zarządzaj instancją reklamy w stanie komponentu.

W przykładzie poniżej reklama wyświetlana przy otwarciu aplikacji jest zintegrowana z komponentem React Native za pomocą elementu hook czyszczenia useEffect. Jeśli komponent zostanie odłączony przed wyświetleniem reklamy, ten hook zwolni zasoby natywne.

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

Dalsze kroki

Po zintegrowaniu reklamy wyświetlanej przy otwarciu aplikacji zapoznaj się z tymi tematami: