단일 보상형 광고 로드

보상형 광고는 동영상 광고, 플레이어블 광고, 설문조사와 상호작용하는 사용자에게 인앱 상품을 리워드로 제공합니다. 자세한 내용은 보상형 광고 단위 개요를 참고하세요.

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

기본 요건

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

Android 

ca-app-pub-3940256099942544/5224354917

iOS 

ca-app-pub-3940256099942544/1712485313

광고 로드하기

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

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

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

광고 이벤트 수신 대기

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

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

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

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

광고 게재

보상형 광고를 표시하려면 사용자가 획득한 보상을 처리하는 콜백과 함께 show 메서드를 호출합니다.

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

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

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

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

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

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

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

전체 예시 보기

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

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

export function RewardedSingleLoadScreen() {
  const [ad, setAd] = useState<RewardedAd | 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 ad...');
    const loadedAd = await loadRewardedAd(REWARDED_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 ad loaded!');
    } else {
      setStatus('Failed to load Rewarded ad.');
    }
  };

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

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Rewarded Ad (Single Load)</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>
  );
}

다음 단계

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