React Native 팝업 광고

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

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

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

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

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

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

   

팝업 광고 노출하기

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

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

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

Pass AdropPopupAdColors parameter to customize colors

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('')
    }

    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

팝업 광고 Destroy

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

popupAd.destroy()

적용 확인하기

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

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

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