단일 전면 광고 로드

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

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

기본 요건

Android 

ca-app-pub-3940256099942544/1033173712

iOS 

ca-app-pub-3940256099942544/4411468910

광고 로드하기

전면 광고를 로드하려면 InterstitialAd 클래스에서 load 메서드를 호출합니다.

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

export async function loadInterstitialAd(
  adUnitId: string,
): Promise<InterstitialAd | null> {
  try {
    const ad = await InterstitialAd.load({adUnitId});
    return ad;
  } catch (error) {
    const loadError = error as LoadAdError;
    console.error('Failed to load interstitial ad:', loadError.message);
    return null;
  }
}

광고 이벤트 수신 대기

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

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

export function registerAdEvents(ad: InterstitialAd) {
  ad.adEventCallback = {
    // Called when the ad is presented on screen.
    onAdShowedFullScreenContent: () => {
      console.log('Interstitial ad showed full screen content.');
    },
    // Called when the ad is closed by the user.
    onAdDismissedFullScreenContent: () => {
      console.log('Interstitial ad dismissed full screen content.');
      ad.destroy();
    },
    // Called when presentation fails.
    onAdFailedToShowFullScreenContent: (error) => {
      console.error('Failed to show interstitial ad:', error);
      ad.destroy();
    },
    // Called when an impression is recorded.
    onAdImpression: () => {
      console.log('Interstitial ad recorded an impression.');
    },
    // Called when the user taps the ad.
    onAdClicked: () => {
      console.log('Interstitial ad was clicked.');
    },
    // Called when the ad is estimated to have earned money.
    onAdPaid: (adValue) => {
      console.log(
        `Interstitial ad paid: ${adValue.amountMicros}` +
          ` ${adValue.currencyCode}`,
      );
    },
  };
}

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

광고 게재

전면 광고를 표시하려면 로드된 InterstitialAd 인스턴스에서 show 메서드를 호출합니다.

다음 예에서는 전면 광고를 보여줍니다.

export function showInterstitialAd(ad: InterstitialAd) {
  ad.show();
}

전체 예시 보기

이 섹션에서는 전면 광고를 React Native 네이티브 앱에 통합하는 전체 예를 설명합니다.

다음 예에서는 광고를 React Native 구성요소에 통합하고, 상태에서 광고 인스턴스를 관리하며, 광고를 로드하고 표시하는 컨트롤을 제공합니다.

export function InterstitialSingleLoadScreen() {
  const [ad, setAd] = useState<InterstitialAd | null>(null);
  const [isLoaded, setIsLoaded] = useState(false);
  const [status, setStatus] = useState<string>('Idle');

  useEffect(() => {
    return () => {
      ad?.destroy();
    };
  }, [ad]);

  const handleLoad = async () => {
    setStatus('Loading Interstitial ad...');
    const loadedAd = await loadInterstitialAd(INTERSTITIAL_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('Interstitial ad loaded!');
    } else {
      setStatus('Failed to load Interstitial ad.');
    }
  };

  const handleShow = () => {
    if (ad) {
      showInterstitialAd(ad);
      setIsLoaded(false);
    }
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Interstitial 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>
  );
}

다음 단계

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