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>
2. 네이티브 광고 불러오기
Native
PUBLIC_TEST_UNIT_ID_NATIVE
Native Video (16:9)
PUBLIC_TEST_UNIT_ID_NATIVE_VIDEO_16_9
Native Video (9:16)
PUBLIC_TEST_UNIT_ID_NATIVE_VIDEO_9_16
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import { View, Button, Dimensions } from 'react-native'
import { WebView } from 'react-native-webview'
import {
AdropNativeAd,
AdropNativeAdListener,
AdropNativeAdView,
AdropProfileLogoView,
AdropProfileNameView,
AdropHeadLineView,
AdropBodyView,
} from '@adrop/react-native-ads'
const YourComponent: React.FC = () => {
const [nativeAd, setNativeAd] = useState<AdropNativeAd>()
const [isLoaded, setIsLoaded] = useState(false)
const initialize = useCallback(
(unitId: string) => {
// 비디오 광고 컨트롤 활성화를 위해 useCustomClick을 true로 설정
let adropNativeAd = new AdropNativeAd(unitId, true)
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()
// WebView로 비디오/이미지 광고 렌더링
const renderMediaContent = () => {
if (!nativeAd?.properties?.creative) return null
return (
<WebView
source={{ html: nativeAd.properties.creative }}
style={styles.adStyle}
javaScriptEnabled={true}
domStorageEnabled={true}
allowsInlineMediaPlayback={true}
mediaPlaybackRequiresUserAction={false}
// 비디오 광고를 위한 설정
allowsFullscreenVideo={true}
bounces={false}
scrollEnabled={false}
onShouldStartLoadWithRequest={() => true}
/>
)
}
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 대신 WebView 사용 */}
{renderMediaContent()}
</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>
)
}
비디오 광고 설정
비디오 광고의 재생 컨트롤(play, pause 등)을 활성화하려면 useCustomClick을 true로 설정해야 합니다.
적용 확인하기
console에서 발급받은 unitId가 한 번이라도 광고요청을 할 경우 성공적으로 연결됩니다.
Last updated