단일 보상형 전면 광고 로드

보상형 전면 광고를 사용하면 화면 또는 게임 레벨 사이에 표시되는 광고에 대해 인앱 상품을 제공할 수 있습니다. 보상형 광고와 달리 사용자는 광고를 보기 위해 수신 동의를 하지 않아도 됩니다. 자세한 내용은 보상형 전면 광고 단위 개요를 참고하세요.

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

기본 요건

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

Android 

ca-app-pub-3940256099942544/5354046379

iOS 

ca-app-pub-3940256099942544/6978759866

광고 로드하기

보상형 전면 광고를 로드하려면 RewardedInterstitialAd 클래스의 load 메서드를 호출합니다.

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

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

광고 이벤트 수신 대기

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

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

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

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

광고 게재

보상형 전면 광고를 표시하려면 로드된 RewardedInterstitialAd 인스턴스에서 show를 호출하고 콜백을 전달하여 Reward를 수신합니다.

export function showRewardedInterstitialAd(
  ad: RewardedInterstitialAd,
  onRewardEarned: (reward: Reward) => void,
) {
  ad.show(onRewardEarned);
}

선택사항: 서버 측 확인 콜백 검사

서버 측 확인(SSV) 콜백에서 앱에 사용자 ID 또는 맞춤 리워드 메타데이터와 같은 맞춤 확인 매개변수가 필요한 경우 광고를 표시하기 전에 로드된 광고 인스턴스에서 serverSideVerificationOptions 속성을 설정하세요.

설정한 값은 SSV 콜백 쿼리 매개변수에 전달됩니다.

  • userId: 사용자를 식별하기 위해 user_id 쿼리 매개변수에 전달됩니다.
  • customData: custom_data 쿼리 매개변수에 전달하여 커스텀 메타데이터를 전달합니다.

다음 예에서는 광고를 표시하기 전에 보상형 전면 광고 객체에 ServerSideVerificationOptions(customData 및 userId)를 설정합니다.

export function setServerSideVerificationRewardedInterstitial(
  ad: RewardedInterstitialAd,
) {
  ad.serverSideVerificationOptions = {
    userId: 'user_123',
    customData: 'sample_custom_data',
  };
}

전체 예시 보기

이 섹션에서는 보상형 전면 광고를 React Native 앱에 통합하는 전체 예를 다룹니다.

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

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

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

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

  const handleShow = () => {
    if (ad) {
      showRewardedInterstitialAd(ad, (userReward) => {
        setReward(`${userReward.amount} ${userReward.type}`);
      });
      setIsLoaded(false);
    }
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Rewarded Interstitial Ad</Text>
      <Text style={styles.status}>Status: {status}</Text>
      {reward && <Text style={styles.rewardText}>Earned: {reward}</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>
  );
}

다음 단계

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