React Native 배너 광고

배너광고 노출하기

로컬 환경에서 배너 노출을 확인하고 싶다면, 하단의 TEST_UNIT_ID를 사용해주세요. 자세한 예시는 GIthub 예시 코드를 확인해 주세요.

Banner (375X80)	PUBLIC_TEST_UNIT_ID_375_80
Banner (320X50)	PUBLIC_TEST_UNIT_ID_320_50
Banner (320X100)	PUBLIC_TEST_UNIT_ID_320_100
Banner(캐러셀)	PUBLIC_TEST_UNIT_ID_CAROUSEL
Banner Video (16:9)	PUBLIC_TEST_UNIT_ID_BANNER_VIDEO_16_9
Banner Video (9:16)	PUBLIC_TEST_UNIT_ID_BANNER_VIDEO_9_16

import React, { useRef, useState } from 'react'
import { Button, Dimensions, StyleSheet, Text, View } from 'react-native'
import { AdropBanner } from 'adrop-ads-react-native'

interface IBanner {
    load: () => void
}

const BannerExample: React.FC = () => {
    const bannerRef = useRef<IBanner>(null)
    const screenWidth = Dimensions.get('window').width

    const loadBanner = () => {
        bannerRef.current?.load()
    }

    const onAdClicked = (unitId: string, creativeId: string) => {
        console.log('배너 광고 클릭됨', unitId, creativeId)
    }

    const onAdReceived = (unitId: string, creativeId: string) => {
        console.log('배너 광고 수신됨', unitId, creativeId)
    }

    const onAdFailedToReceive = (unitId: string, error?: string) => {
        console.log('배너 광고 수신 실패', unitId, error)
    }

    return (
        <View style={styles.container}>
            <Button title="배너 광고 로드" onPress={loadBanner} />
            
            <AdropBanner
                ref={bannerRef}
                unitId="YOUR_UNIT_ID"
                style={{ width: screenWidth, height: 50 }}
                autoLoad={false}
                onAdClicked={onAdClicked}
                onAdReceived={onAdReceived}
                onAdFailedToReceive={onAdFailedToReceive}
            />
        </View>
    )
}

export default BannerExample

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        padding: 16,
    }
})

적용 확인하기

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

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

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