Google은 AI 기술을 사용하여 콘텐츠를 사용자의 기본 언어로 번역합니다. AI 번역에는 오류가 있을 수 있습니다.

단일 앱 오프닝 광고 로드

앱 오프닝 광고는 사용자가 앱을 열거나 앱으로 돌아갈 때 표시됩니다. 사용자는 언제든지 앱 오프닝 광고를 닫을 수 있습니다. 앱 로드 화면에서 수익을 창출하려면 앱 오프닝 광고를 사용하세요. 자세한 내용은 다음을 참고하세요.

앱 오프닝 광고 안내 및 권장사항

이 가이드에서는 앱 오프닝 광고를 React Native 앱에 통합하는 방법을 설명합니다.

기본 요건

계속하기 전에 다음을 수행하세요.

Google Mobile Ads SDK for React Native를 설정합니다.
테스트 광고를 사용 설정하고 다음 테스트 광고 단위를 사용합니다.

Android

ca-app-pub-3940256099942544/9257395921

iOS

ca-app-pub-3940256099942544/5575463023

광고 로드하기

앱 오프닝 광고를 로드하려면 load 메서드를 호출합니다.

다음 예에서는 성공 시 앱 오프닝 광고를 로드하고 실패 시 오류를 로깅합니다.

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

광고 이벤트 수신 대기

광고를 표시하기 전에 로드된 AppOpenAd 인스턴스에 adEventCallback 리스너를 설정합니다. 이 리스너는 화면에 표시되는 광고 또는 광고를 탭하는 사용자와 같은 광고 수명 주기 이벤트의 콜백을 수신합니다. 사용 가능한 콜백은 AdEventCallback를 참고하세요.

다음 예에서는 광고 이벤트를 수신 대기하도록 콜백을 설정합니다.

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

이 예에서는 사용자가 광고를 닫거나 광고가 표시되지 않을 때 destroy 메서드도 사용합니다. 이 프로세스는 광고에서 사용한 리소스를 해제합니다.

광고 게재

앱 오프닝 광고를 표시하려면 show 메서드를 호출합니다.

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

앱 수준 관리자로 광고 관리하기

React 구성요소 트리 외부의 앱 수준 관리자에서 앱 오프닝 광고를 관리하는 것이 좋습니다. 앱 오프닝 광고는 사용자가 앱을 열거나 앱으로 돌아올 때 전역적으로 표시되므로 앱 수준 관리자가 광고를 사용자 인터페이스와 별도로 유지합니다.

다음 예에서는 광고를 로드하고, 광고 이벤트를 수신 대기하고, 광고 사용 가능 여부를 확인하는 SingleLoadAppOpenAdManager 인스턴스를 만듭니다.

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

앱 수준 관리자는 다음 작업을 수행하는 데 도움이 됩니다.

광고 상태를 화면 탐색 및 구성요소 수명 주기와 독립적으로 유지합니다.
네이티브 스레드 이벤트 전반에서 광고 표시 상태를 추적합니다.
반복되는 광고가 표시되지 않도록 앱 포그라운드 전환을 처리합니다.
앱이 열릴 때 광고를 사용할 수 있도록 백그라운드에서 광고를 미리 로드합니다.
만료된 광고가 게재되지 않도록 4시간의 광고 만료 기한을 확인하세요.
광고 리소스 로드, 표시, 정리를 결합합니다.

앱 포그라운드 이벤트 수신 대기

앱이 포그라운드로 돌아올 때 광고를 표시하려면 AppState 모듈을 사용하여 앱의 루트(예: App.tsx 파일)에서 앱 상태 변경을 수신 대기합니다. 다음 단계를 따르세요.

'change' 이벤트의 AppState 리스너를 등록합니다.
상태가 'active' 상태로 전환되면 광고 관리자 인스턴스에서 showAdIfAvailable 메서드를 호출합니다.

다음 예에서는 앱 포그라운드 이벤트를 수신 대기하고 가능한 경우 광고를 표시합니다.

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

콜드 스타트 및 로드 화면 알아보기

콜드 스타트는 앱이 처음부터 실행될 때 발생합니다. 예를 들어 사용자가 앱을 처음으로 열거나 기기에서 메모리를 확보하기 위해 앱을 닫은 후에 발생합니다. 콜드 스타트 중에는 다음에 표시할 미리 로드된 앱 오프닝 광고가 없습니다.

광고 요청 지연으로 인해 광고가 표시되기 전에 사용자가 앱과 상호작용할 수 있습니다. 사용자 경험이 저하되지 않도록 하려면 콜드 스타트 시 앱 확장 소재가 로드되는 동안 로드 화면에서만 앱 오프닝 광고를 표시하세요. 애셋 로드가 완료되고 광고가 로드되기 전에 사용자가 기본 콘텐츠에 도달하면 광고를 표시하지 않습니다.

테스트 화면 설정

광고를 대화형으로 테스트하거나 특정 화면에 광고를 표시하려면 구성요소 상태에서 광고 인스턴스를 관리하세요.

다음 예에서는 useEffect 정리 후크를 사용하여 앱 오프닝 광고를 React Native 구성요소에 통합합니다. 광고가 표시되기 전에 구성요소가 마운트 해제되면 이 후크는 네이티브 리소스를 해제합니다.

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

다음 단계

앱 오프닝 광고를 통합한 후 다음 주제를 살펴보세요.

단일 앱 오프닝 광고 로드 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.