React Native 보상형 광고

사용자가 광고를 끝까지 시청하면 보상을 제공하는 광고입니다.

시작하기 전에

1. React Native SDK 설정을 완료하세요.

2. Adrop 콘솔에 배너 광고 유닛을 생성하고 Unit ID를 확인하세요.

1

광고 Unit ID 준비하기

Adrop 콘솔에서 생성한 광고 유닛 ID를 준비하세요. 개발 중에는 테스트 ID를 사용할 수 있습니다.

// 테스트용 Unit ID
const unitId = "PUBLIC_TEST_UNIT_ID_REWARDED"

// 프로덕션용 Unit ID (콘솔에서 발급)
const unitId = "YOUR_UNTI_ID" 

테스트 Unit ID 목록

형식	테스트 Unit ID
Rewarded	PUBLIC_TEST_UNIT_ID_REWARDED

주의: 테스트 Unit ID는 개발 중에만 사용하세요. 앱 출시 전 반드시 콘솔에서 발급받은 실제 Unit ID로 교체해야 합니다.

2

사용 방법

보상형 광고는 두 가지 방법으로 구현할 수 있습니다.

1. Hook 방식

import React, { useCallback, useEffect } from 'react';
import { View, Button, Alert } from 'react-native';
import { useAdropRewardedAd } from 'adrop-ads-react-native';

const RewardedExample = () => {
  const {
    load,
    show,
    reset,
    isLoaded,
    isReady,
    isEarnRewarded,
    reward,
    errorCode,
  } = useAdropRewardedAd('YOUR_UNIT_ID');

  // 보상 지급 처리
  useEffect(() => {
    if (isEarnRewarded && reward) {
      Alert.alert(
        '보상 획득!',
        `타입: ${reward.type}, 수량: ${reward.amount}`
      );
      // 서버에 보상 지급 요청
    }
  }, [isEarnRewarded, reward]);

  const handleLoad = useCallback(() => {
    if (isReady) {
      load();
    }
  }, [isReady, load]);

  return (
    <View>
      <Button title="광고 로드" onPress={handleLoad} />
      <Button
        title="광고 시청하고 보상받기"
        onPress={show}
        disabled={!isLoaded}
      />
      <Button title="리셋" onPress={reset} />
    </View>
  );
};

hook 반환값

Parameter	Type	Description
load	() ⇒ void	광고 로드
show	() ⇒ void	광고 표시
reset	() ⇒ void	광고 인스턴스 초기화
isReady	BOOLEAN	광고 준비 여부
isLoaded	BOOLEAN	광고 로드 여부
isOpened	BOOLEAN	광고 표시 여부
isClosed	BOOLEAN	광고 닫힘 여부
isClicked	BOOLEAN	광고 클릭 여부
isEarnRewarded	BOOLEAN	보상 획득 여부
reward	{ type: number; amount: number }	보상 정보
errorCode	STRING | UNDEFINED	에러 코드

2. Class 방식

import React, { useEffect, useState, useMemo } from 'react';
import { View, Button, Alert } from 'react-native';
import { AdropRewardedAd, type AdropListener } from 'adrop-ads-react-native';

const RewardedClassExample = () => {
  const [rewardedAd, setRewardedAd] = useState<AdropRewardedAd>();
  const [isLoaded, setIsLoaded] = useState(false);

  const listener: AdropListener = useMemo(() => ({
    onAdReceived: (ad) => {
      console.log('광고 로드됨:', ad.unitId);
      setIsLoaded(true);
    },
    onAdFailedToReceive: (ad, errorCode) => {
      console.log('광고 로드 실패:', errorCode);
    },
    onAdDidPresentFullScreen: (ad) => {
      console.log('광고 표시됨');
    },
    onAdDidDismissFullScreen: (ad) => {
      console.log('광고 닫힘');
    },
    onAdEarnRewardHandler: (ad, type, amount) => {
      console.log(`보상 획득! 타입: ${type}, 수량: ${amount}`);
      Alert.alert('보상 획득!', `타입: ${type}, 수량: ${amount}`);
      // 서버에 보상 지급 요청
    },
  }), []);

  useEffect(() => {
    const ad = new AdropRewardedAd('YOUR_UNIT_ID');
    ad.listener = listener;
    setRewardedAd(ad);

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

  const handleLoad = () => rewardedAd?.load();
  const handleShow = () => rewardedAd?.show();

  return (
    <View>
      <Button title="광고 로드" onPress={handleLoad} />
      <Button title="광고 시청" onPress={handleShow} disabled={!isLoaded} />
    </View>
  );
};

AdropRewardedAd 클래스

Properties

Parameter	Type	Description
unitId	STRING	광고 Unit ID
isLoaded	BOOLEAN	광고 로드 여부
creativeId	STRING	광고 소재 ID
txId	STRING	광고 트랜잭션 ID
campaignId	STRING	캠페인 ID
destinationURL	STRING	클릭 시 이동 URL
listener	AdropListener	이벤트 리스너

AdropListener 인터페이스

type AdropListener = {
  onAdReceived?: (ad: AdropAd) => void;   // 광고 로드 성공
  onAdClicked?: (ad: AdropAd) => void;    // 광고 클릭
  onAdImpression?: (ad: AdropAd) => void; // 광고 화면 노출
  onAdFailedToReceive?: (ad: AdropAd, errorCode?: string) => void; // 광고 로드 실패
  onAdDidPresentFullScreen?: (ad: AdropAd) => void;  // 광고 전면 노출
  onAdWillPresentFullScreen?: (ad: AdropAd) => void; // 광고 전면 노출 예정 (iOS only)
  onAdDidDismissFullScreen?: (ad: AdropAd) => void;  // 광고 닫힘
  onAdWillDismissFullScreen?: (ad: AdropAd) => void; // 광고 닫힘 예정 (iOS only)
  onAdFailedToShowFullScreen?: (ad: AdropAd, errorCode?: string) => void; // 광고 전면 노출 실패
  onAdEarnRewardHandler?: (
    ad: AdropAd,
    type: number,
    amount: number
  ) => void; // 광고 보상 지급
};

광고 로드 실패, 전면 노출 실패 시, AdropErrorCode 를 확인해주세요

보상 콜백 파라미터

파라미터	타입	설명
ad	AdropAd	광고 인스턴스
type	number	보상 타입
amount	number	보상 수량

---

광고 로드 및 표시 흐름

1. useAdropRewardedAd(unitId) 또는 new AdropRewardedAd(unitId)
   ↓
2. isReady === true 확인
   ↓
3. load() 호출
   ↓
4. onAdReceived 콜백 또는 isLoaded === true
   ↓
5. show() 호출
   ↓
6. onAdDidPresentFullScreen 콜백 또는 isOpened === true
   ↓
7. 사용자가 광고 끝까지 시청
   ↓
8. onAdEarnRewardHandler 콜백 또는 isEarnRewarded === true
   → 이 시점에 보상 지급!
   ↓
9. 사용자가 광고 닫음
   ↓
10. onAdDidDismissFullScreen 콜백
   ↓
11. 새 광고 필요시 reset() 호출 후 2번부터 반복

주의 사항

• 광고는 로드 후에만 표시 할 수 있습니다.

• 사용자가 광고를 끝까지 시청해야 보상이 지급됩니다.

• 한 번 표시된 광고는 재사용 불가합니다.

• 컴포넌트 언마운트 시 반드시 destroy() 를 호출하여 리소스를 해제하세요.

• Hook 사용 시 내부에서 자동으로 destroy를 처리합니다.