React Native 보상형 광고

보상형 광고 노출하기

로컬 환경에서 배너 노출을 확인하고 싶다면, 아래의 TEST_UNIT_ID를 사용해주세요.

자세한 예시는 Github에서 확인하실 수 있습니다.

Ad type	Ad unit ID
Rewarded	PUBLIC_TEST_UNIT_ID_REWARDED

Class

// (선택사항) 이벤트 리스너 선언하기
const listener = {
        onAdReceived: (ad: AdropRewardedAd) =>
            console.log(`Adrop rewarded Ad load with unitId ${ad.unitId}!`),
        onAdFailedToReceive: (ad: AdropRewardedAd, errorCode: string) =>
            console.log(`error in ${ad.unitId} while load: ${errorCode}`),
        onAdFailedToShowFullScreen: (ad: AdropRewardedAd, errorCode: string) =>
            console.log(`error in ${ad.unitId} while showing: ${errorCode}`),
        onAdEarnRewardHandler: (ad: AdropRewardedAd, type: number, amount: number) =>
            console.log(`Adrop rewarded Ad earn rewards: ${ad.unitId}, ${type}, ${amount}`),
        ...
    }
    
const YourComponent: React.FC = () => {
    const [rewardedAd, setRewardedAd] = useState<AdropRewardedAd>(null)

    useEffect(() => {
        let adropRewardedAd = new AdropRewardedAd('YOUR_UNIT_ID')
        adropRewardedAd.listener = listener
        adropRewardedAd.load()
        setRewardedAd(adropRewardedAd)
    }, []);

    const show = () => {
        if (rewardedAd?.isLoaded) {
            rewardedAd?.show()
        } else {
            console.log('rewarded ad is loading...')
        }
    }

    return (
        <View>
            <Button title="display ad" onPress={show}/>
        </View>
    )
}

Hook

보상형 광고 Destroy

Class

useEffect(() => {
    return () => {
        rewardedAd.destroy()
    }
}, [])

Hook

적용 확인하기

console에서 발급받은 unitId가 한 번이라도 광고요청을 할 경우 성공적으로 연결됩니다.

광고 유닛에 연결된 광고가 없다면, 보상형 광고가 랜더링 되지 않습니다. 따라서 보상형 광고가 정상적으로 랜더링 되는지 확인하고 싶으면, TEST_UNIT_ID 를 사용해 주세요.

TEST_UNIT_ID 를 사용하면 보상형 광고 랜더링 확인은 할 수 있지만, console과 연결되지는 않습니다. 따라서 성공적인 연결을 확인하려면 콘솔에 등록한 광고 유닛의 아이디를 적용해 주시고, 하단 이미지 처럼 콘솔을 확인해 주세요.