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

전면 광고 설정

전면 광고는 화면 간 전환 시점이나 게임에서 다음 레벨로 넘어갈 때처럼 앱의 전환 시점에 게재되는 전체 화면 광고입니다. 사용자는 광고를 탭하여 도착 페이지를 방문하거나 광고를 닫고 앱으로 돌아갈 수 있습니다. 자세한 내용은 전면 광고 가이드라인 및 우수사례를 참고하세요.

Google Mobile Ads SDK for React Native는 광고 사전 로드를 사용하여 백그라운드 로드, 캐싱, 버퍼 보충을 관리함으로써 표시 지연 시간을 없애고 전환이 발생할 때 광고를 사용할 수 있도록 합니다.

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

기본 요건

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

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

Android

ca-app-pub-3940256099942544/1033173712

iOS

ca-app-pub-3940256099942544/4411468910

광고 사전 로드 이해하기

Google Mobile Ads SDK for React Native의 광고 사전 로드는 광고 로드 및 캐싱을 자동화합니다.

광고 사전 로드의 이점은 다음과 같습니다.

참조 관리: 광고가 표시될 때까지 참조를 유지합니다.
자동 새로고침: 캐시에서 광고를 가져올 때 새 광고를 로드합니다.
관리형 재시도: 광고 로드에 실패하면 새 광고를 로드합니다.
만료 처리: 만료되기 전에 광고를 새로고침합니다.
캐시 최적화: 우선순위가 가장 높은 광고를 게재하도록 캐시 순서를 최적화합니다.

광고를 수동으로 로드하려면 단일 전면 광고 로드 가이드를 참고하세요.

미리 로드 시작

광고 미리 로드를 시작하려면 InterstitialAdPreloader.start 메서드를 호출하고 preloadId 값, 구성 설정, 이벤트 콜백을 전달하여 버퍼 상태 변경을 모니터링합니다.

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

사전 로드 ID는 광고 사전 로드 구성을 고유하게 식별하는 문자열입니다. 앱에서 단일 미리 로드 구성에 광고 단위 ID를 사용하는 경우 해당 광고 단위 ID를 미리 로드 ID로 사용합니다. 앱에서 동일한 광고 단위 ID에 여러 미리 로드 도구가 필요한 경우 각 미리 로드 ID에 고유한 문자열을 전달하세요.

앱이 버퍼에서 미리 로드된 광고를 폴링하면 Google Mobile Ads SDK for React Native가 백그라운드에서 대체 광고를 요청하여 버퍼를 다시 채웁니다. 버퍼에 미리 로드된 광고가 남아 있지 않으면 Google Mobile Ads SDK for React Native에서 onAdsExhausted 콜백을 호출합니다.

미리 로드 캐시 한도

Google Mobile Ads SDK for React Native는 모든 광고 단위 및 미리 로드 ID에서 미리 로드된 총 광고 수에 앱 전체 한도를 적용합니다.

기본 한도: Google은 메모리에 최대 6개의 미리 로드된 광고를 보관합니다. 이 한도는 모든 형식과 미리 로드 ID에 공유됩니다.
권장 버퍼: 각 미리 로드 ID에 대해 미리 로드된 광고 2개

앱이 앱 전체 한도에 도달하면 기존 광고가 캐시에서 폴링되거나 소멸될 때까지 미리 로드된 광고에 대한 백그라운드 요청이 일시중지됩니다. 전체 화면 광고가 화면에 활발하게 표시되는 동안에도 미리 로드가 일시적으로 일시중지됩니다.

폴링 및 광고 표시

광고를 표시하기 전에 InterstitialAdPreloader.isAdAvailable 메서드를 호출하여 광고가 사용 가능한지 확인합니다. 광고를 가져오려면 InterstitialAdPreloader.pollAd 메서드를 호출합니다.

광고 닫기 또는 표시 실패와 같은 표시 이벤트를 수신 대기하려면 show 메서드를 호출하기 전에 광고 인스턴스에서 adEventCallback 속성을 설정하세요.

다음 예에서는 광고를 표시하기 전에 광고 사용 가능 여부를 확인하고 전체 화면 표시 이벤트를 수신 대기합니다.

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

메모리와 리소스를 해제하려면 onAdDismissedFullScreenContent 및 onAdFailedToShowFullScreenContent 콜백에서 ad.destroy 메서드를 호출합니다.

대답 정보 읽기

캐시에서 광고를 삭제하지 않고 미리 로드된 다음 광고의 응답 정보를 검사하려면 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);
    }
  }
}

광고가 있으면 peekAdResponseInfo 메서드는 로드된 광고 소스 및 네트워크 어댑터에 관한 정보가 포함된 ResponseInfo 객체를 반환합니다.

리소스 삭제

세션의 나머지 부분에서 특정 미리 로드 ID에 대한 광고를 더 이상 표시할 필요가 없는 경우 InterstitialAdPreloader.destroy 메서드를 호출합니다. 이 프로세스는 해당 미리 로드 ID의 미리 로드를 중지하고 사용되지 않은 미리 로드된 광고를 메모리에서 해제합니다.

다음 예에서는 미리 로드를 중지합니다.

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

사용자가 광고를 닫거나 광고가 표시되지 않으면 개별 폴링된 광고 인스턴스를 소멸시킵니다. 자세한 내용은 광고 폴링 및 표시를 참고하세요.

전체 예시 보기

다음 예시 구성요소는 마운트 시 미리 로드를 시작하고, 사용 가능한 광고 수를 추적하며, 미리 로드된 전면 광고를 표시하는 컨트롤을 제공합니다.

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

다음을 바꿉니다.

INTERSTITIAL_AD_UNIT_ID를 광고 단위 ID로 교체
PRELOAD_ID를 미리 로드 도구 ID로 바꿉니다.

다음 단계

전면 광고를 통합한 후 다음 주제를 살펴보세요.

전면 광고 설정 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.