React Native 팝업 광고

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

1

Unit ID 설정하기

Ad type	Ad unit ID
Popup (bottom)	PUBLIC_TEST_UNIT_ID_POPUP_BOTTOM
Popup Video (bottom 16:9)	PUBLIC_TEST_UNIT_ID_POPUP_BOTTOM_VIDEO_16_9
Popup Video (bottom 9:16)	PUBLIC_TEST_UNIT_ID_POPUP_BOTTOM_VIDEO_9_16
Popup (center)	PUBLIC_TEST_UNIT_ID_POPUP_CENTER
Popup Video (center 16:9)	PUBLIC_TEST_UNIT_ID_POPUP_CENTER_VIDEO_16_9
Popup Video (center 9:16)	PUBLIC_TEST_UNIT_ID_POPUP_CENTER_VIDEO_9_16

2

팝업 광고 구현하기

import React, { useCallback, useEffect, useMemo, useState } from 'react'
import { Button, StyleSheet, Text, View } from 'react-native'
import {
    AdropListener,
    AdropPopupAd,
    AdropPopupAdColors,
} from 'adrop-ads-react-native'

const PopupAdExample: React.FC = () => {
    const [popupAd, setPopupAd] = useState<AdropPopupAd>()
    const [isLoaded, setIsLoaded] = useState(false)
    const [isShown, setIsShown] = useState(false)
    const [errorCode, setErrorCode] = useState('')

    // 광고 이벤트 리스너 설정
    const listener: AdropListener = useMemo(() => {
        return {
            onAdReceived: (ad: AdropPopupAd) => {
                setIsLoaded(true)
                console.log('팝업 광고 수신됨', ad.unitId)
                setErrorCode('')
            },
            onAdFailedToReceive: (_: AdropPopupAd, error: any) => {
                console.log('팝업 광고 수신 실패', error)
                setErrorCode(error)
            },
            onAdClicked: (ad: AdropPopupAd) => {
                console.log('팝업 광고 클릭됨', ad.unitId)
            },
            onAdDidPresentFullScreen: (ad: AdropPopupAd) => {
                console.log('팝업 광고 표시됨', ad.unitId)
            },
            onAdDidDismissFullScreen: (ad: AdropPopupAd) => {
                console.log('팝업 광고 닫힘', ad.unitId)
            },
            onAdFailedToShowFullScreen: (_: AdropPopupAd, error: any) => {
                setErrorCode(error)
            },
        } as AdropListener
    }, [])

    // 팝업 광고 초기화
    const initialize = useCallback((unitId: string) => {
        const adropPopupAd = new AdropPopupAd(unitId)
        adropPopupAd.listener = listener
        setPopupAd((prev) => {
            prev?.destroy()
            return adropPopupAd
        })
    }, [listener])

    useEffect(() => {
        initialize('YOUR_POPUP_UNIT_ID')
        
        // 컴포넌트 언마운트 시 정리
        return () => {
            popupAd?.destroy()
        }
    }, [initialize])

    const load = () => popupAd?.load()
    
    const show = () => {
        popupAd?.show()
        setIsShown(true)
    }

    const reset = () => {
        initialize('YOUR_POPUP_UNIT_ID')
        setIsLoaded(false)
        setIsShown(false)
        setErrorCode('')
        popupAd.destroy()
    }

    return (
        <View style={styles.container}>
            <Button title="팝업 광고 로드" onPress={load} />
            
            <Button
                disabled={!isLoaded}
                title="팝업 광고 표시"
                onPress={show}
            />
            
            <Button
                disabled={!(errorCode || isShown)}
                title="팝업 광고 리셋"
                onPress={reset}
            />

            {errorCode && (
                <Text style={styles.error}>에러: {errorCode}</Text>
            )}
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        gap: 16,
    },
    error: {
        color: 'red',
        marginTop: 10,
        textAlign: 'center',
    },
})

export default PopupAdExample