React Native 네이티브 광고 노출하기

1. 네이티브 광고 레이아웃 만들기

네이티브 광고 에서는 다음과 같은 view 의 종류들이 포함 될 수 있습니다.

• 프로필 로고

• 프로필 이름

• 제목

• 내용

• 소재 이미지

예를 들어, 소셜 피드 형식의 네이티브 광고를 구성한다면 다음과 같은 레이아웃을 만들 수 있습니다.

• AdropNativeAdView - parent view

  • AdropProfileLogoView - 프로필 로고

  • AdropProfileNameView - 프로필 이름

  • AdropHeadLineView - 제목

  • AdropBodyView - 내용

  • AdropMediaView - 소재 이미지

    • 제목, 내용, 소재 이미지는 컴포넌트를 제공하지만 자유롭게 사용하실 수 있도록 필드 데이터를 제공합니다.

  

<AdropNativeAdView
    nativeAd={nativeAd}
    style={{
        ...styles.adContainer,
        width: Dimensions.get('window').width,
    }}
>
    <View style={styles.rowContainer}>
        // 아래의 컴포넌트로 광고주 프로필을 표시하실 수 있지만, 필드 데이터로 자유롭게 구현하셔도 됩니다.
        <AdropProfileLogoView style={styles.icon} />
        <AdropProfileNameView style={styles.name} />
    </View>

    <AdropHeadLineView style={styles.headline} />
    <AdropBodyView style={styles.body} />
    
    // 아래의 컴포넌트로 소재 이미지를 랜더링 하실 수 있습니다.
    // 콘솔에서 정의하신 사이즈와 동일하게 소재 사이즈를 스타일링 해주세요.
    <AdropMediaView
        style={{
            ...styles.adStyle,
        }}
    />
</AdropNativeAdView>

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

2. 네이티브 광고 불러오기

Ad type	Ad unit ID
Test Native ID	PUBLIC_TEST_UNIT_ID_NATIVE

const YourComponent: React.FC = () => {
    const [nativeAd, setNativeAd] = useState<AdropNativeAd>()
    const [isLoaded, setIsLoaded] = useState(false)

    const initialize = useCallback(
        (unitId: string) => {
            let adropNativeAd = new AdropNativeAd(unitId)
            adropNativeAd.listener = listener
            setNativeAd((prev) => {
                prev?.destroy()
                return adropNativeAd
            })
        },
        [listener]
    )
    
    const listener = useMemo(
        (): AdropNativeAdListener => ({
            onAdReceived: (ad: AdropNativeAd) => {
                console.log(`nativeAd received ${ad.unitId}`, ad.properties) 
                // 커스텀 필드를 추가하셨다면, ad.properties.extra 에서 추가된 값들을 받으실 수 있습니다.
                setIsLoaded(true)
            },
            onAdFailedToReceive: (_, error) => {
                console.log('nativeAd onAdFailedToReceive', error)
            },
            onAdClicked: (ad) => console.log(`nativeAd clicked ${ad.unitId}`),
        }),
        []
    )
    
    useEffect(() => {
        initialize(testUnitId_native)
    }, [initialize])
    
    const load = () => nativeAd?.load()
    

    const adView = useMemo(() => {
        if (!isLoaded) return null

        return (
            <AdropNativeAdView
                nativeAd={nativeAd}
                style={{
                    ...styles.adContainer,
                    width: Dimensions.get('window').width,
                }}
            >
                <View style={styles.rowContainer}>
                    <AdropProfileLogoView style={styles.icon} />
                    <AdropProfileNameView style={styles.name} />
                </View>

                <AdropHeadLineView style={styles.headline} />
                <AdropBodyView style={styles.body} />

                <AdropMediaView
                    style={{
                        ...styles.adStyle,
                    }}
                />
            </AdropNativeAdView>
        )
    }, [isLoaded, nativeAd])
        
    return (
        <View>
            <View>
                <Button title={'nativeAd load'} onPress={load} />
            </View>
            <View>{adView}</View>
        </View>
    )
}
    

3. 커스텀 필드 데이터 추가 및 자유로운 이미지 소재 사용하기

예를 들어, t1, t2, t3 라는 커스텀 필드가 추가 되었을 경우에 대해 알아보겠습니다. * 텍스트 라벨은 광고주 콘솔에 입력되는 라벨입니다.

const YourComponent: React.FC = () => {
    const [nativeAd, setNativeAd] = useState<AdropNativeAd>()
    const [isLoaded, setIsLoaded] = useState(false)
    const [customContents, setCustomContents] = useState<Record<string, string>>()
    const [adAsset, setAdAsset] = useState<string>('');
    
    const initialize = useCallback(
        (unitId: string) => {
            let adropNativeAd = new AdropNativeAd(unitId)
            adropNativeAd.listener = listener
            setNativeAd((prev) => {
                prev?.destroy()
                return adropNativeAd
            })
        },
        [listener]
    )
    
    const listener = useMemo(
        (): AdropNativeAdListener => ({
            onAdReceived: (ad: AdropNativeAd) => {
                console.log(`nativeAd received ${ad.unitId}`, ad.properties) 
                // 커스텀 필드를 추가하셨다면, ad.properties.extra 에서 추가된 값들을 받으실 수 있습니다.
                // 이미지 소재를 커스텀하게 사용하시려면, ad.properties.asset 데이터를 사용하시면 됩니다.
                ...
                setCustomContents(ad.properties.extra)
                setAdAsset(ad.properties.asset)
            },
            onAdFailedToReceive: (_, error) => {
                console.log('nativeAd onAdFailedToReceive', error)
            },
            onAdClicked: (ad) => console.log(`nativeAd clicked ${ad.unitId}`),
        }),
        []
    )
    
    useEffect(() => {
        initialize(testUnitId_native)
    }, [initialize])
    
    const load = () => nativeAd?.load()
    
    const adView = useMemo(() => {
        if (!isLoaded) return null

        return (
            <AdropNativeAdView
                nativeAd={nativeAd}
                style={{
                    ...styles.adContainer,
                    width: Dimensions.get('window').width,
                }}
            >
                <View style={styles.rowContainer}>
                    <Text>{customContents['t1']}</Text>
                    <Text>{customContents['t2']}</Text>
                    <Text>{customContents['t3']}</Text>
                </View>
            </AdropNativeAdView>
        )
    }, [isLoaded, nativeAd])
        
    return (
        <View>
            <View>
                <Button title={'nativeAd load'} onPress={load} />
            </View>
            <View>{adView}</View>
        </View>
    )
}