React Native 팝업 광고 노출하기

팝업 지면은 전면광고와 유사하게 앱을 완전히 덮으면서 노출됩니다. 팝업 지면은 위치에 따라 하단, 중앙 두가지 타입의 UI를 제공하고 있어 원하는 기획에 맞게 선택하여 연동할 수 있습니다.

Adrop 콘솔에서 광고 유닛 생성 할 때 타입을 선택할 수 있어요.

콘솔에서 광고 유닛 등록하기

자세한 가이드는, 광고 유닛 생성 가이드를 참고해 주세요.

1. Adrop 콘솔에서 팝업 광고 유닛을 생성합니다.

   
2. 광고 유닛 리스트에서 생성된 유닛 아이디를 복사합니다.

   

1단계: 팝업 광고 노출하기

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

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

Ad type	Ad unit ID
Popup (bottom)	PUBLIC_TEST_UNIT_ID_POPUP_BOTTOM
Popup (center)	PUBLIC_TEST_UNIT_ID_POPUP_CENTER

Pass AdropPopupAdColors parameter to customize colors

// (Optional) Construct event listener
const listener: AdropListener = {
        onAdReceived: (ad: AdropPopupAd) =>
            console.log(`Adrop popup Ad load with unitId ${ad.unitId}!`),
        onAdFailedToReceive: (ad: AdropPopupAd, errorCode: string) =>
            console.log(`error in ${ad.unitId} while load: ${errorCode}`),
        onAdFailedToShowFullScreen: (ad: AdropPopupAd, errorCode: string) =>
            console.log(`error in ${ad.unitId} while showing: ${errorCode}`),
        ...
    }
    
const YourComponent: React.FC = () => {
    const [popupAd, setPopupAd] = useState<AdropPopupAd>(null)

    useEffect(() => {
        let closeTextColor = your_color // option hex or rgba
        let hideForTodayTextColor = '#123' // option hex or rgba
        let backgroundColor: string = 'rgba(1,2,3,1)' // option hex or rgba
        let colors: AdropPopupAdColors = {
            closeTextColor, hideForTodayTextColor, backgroundColor
        }
    
        let adropPopupAd = new AdropPopupAd('YOUR_UNIT_ID', colors)
        adropPopupAd.listener = listener
        adropPopupAd.load()
        setPopupAd(adropPopupAd)
    }, []);

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

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

팝업 광고 Destroy

AdropRewardedView에 더 이상 액세스할 필요가 없으면 다음과 같이 Dispose해야 합니다.

popupAd.destroy()

적용 확인하기

console에서 발급받은 unitId가 한 번이라도 request 가 들어가면 성공적으로 연결됩니다.

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

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