React Native 네이티브 광고
앱의 UI에 자연스럽게 통합되는 맞춤형 광고입니다. 광고의 각 요소(제목, 본문, 이미지 등)를 개별적으로 배치하여 앱의 디자인에 맞게 표시할 수 있습니다.
시작하기 전에
React Native SDK 설정을 완료하세요.
Adrop 콘솔에 배너 광고 유닛을 생성하고 Unit ID를 확인하세요.
기본 구조
네이티브 광고는 다음 구성요소로 이루어집니다.
AdropNativeAd: 광고 데이터를 관리하는 클래스AdropNativeAdView: 광고를 감싸는 컨테이너 뷰개별 뷰 컴포넌트: 헤드라인, 본문, 아이콘, 미디어 등
광고 Unit ID 준비하기
Adrop 콘솔에서 생성한 광고 유닛 ID를 준비하세요. 개발 중에는 테스트 ID를 사용할 수 있습니다.
// 테스트용 Unit ID
const unitId = "PUBLIC_TEST_UNIT_ID_NATIVE"
// 프로덕션용 Unit ID (콘솔에서 발급)
const unitId = "YOUR_UNTI_ID" 테스트 Unit ID 목록
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
주의: 테스트 Unit ID는 개발 중에만 사용하세요. 앱 출시 전 반드시 콘솔에서 발급받은 실제 Unit ID로 교체해야 합니다.
네이티브 광고 구현하기
import React, { useEffect, useState, useMemo } from 'react';
import { View, StyleSheet, Dimensions } from 'react-native';
import {
AdropNativeAd,
AdropNativeAdView,
AdropHeadLineView,
AdropBodyView,
AdropProfileLogoView,
AdropProfileNameView,
AdropMediaView,
type AdropNativeAdListener,
} from 'adrop-ads-react-native';
const NativeAdExample = () => {
const [nativeAd, setNativeAd] = useState<AdropNativeAd>();
const [isLoaded, setIsLoaded] = useState(false);
const listener: AdropNativeAdListener = useMemo(() => ({
onAdReceived: (ad) => {
console.log('광고 로드됨:', ad.properties);
setIsLoaded(true);
},
onAdFailedToReceive: (ad, errorCode) => {
console.log('광고 로드 실패:', errorCode);
},
onAdClicked: (ad) => {
console.log('광고 클릭됨');
},
onAdImpression: (ad) => {
console.log('광고 노출됨');
},
}), []);
useEffect(() => {
const ad = new AdropNativeAd('YOUR_UNIT_ID');
ad.listener = listener;
setNativeAd(ad);
return () => {
ad.destroy();
};
}, [listener]);
const handleLoad = () => nativeAd?.load();
if (!isLoaded) {
return (
<View>
<Button title="네이티브 광고 로드" onPress={handleLoad} />
</View>
);
}
return (
<AdropNativeAdView
nativeAd={nativeAd}
style={{ width: Dimensions.get('window').width }}
>
<View style={styles.adContainer}>
<View style={styles.header}>
<AdropProfileLogoView style={styles.logo} />
<AdropProfileNameView style={styles.profileName} />
</View>
<AdropHeadLineView style={styles.headline} />
<AdropBodyView style={styles.body} />
{/* Backfill 광고인 경우 AdropMediaView 사용 */}
{nativeAd.isBackfilled ? (
<AdropMediaView style={styles.media} />
) : (
/* 일반 광고인 경우 WebView로 크리에이티브 표시 */
<WebView
source={{ html: nativeAd.properties.creative ?? '' }}
style={styles.media}
javaScriptEnabled={true}
onNavigationStateChange={(event) => {
if (event.url && !event.url.startsWith('data:')) {
openUrl(event.url);
}
}}
/>
)}
</View>
</AdropNativeAdView>
);
};
const styles = StyleSheet.create({
adContainer: {
padding: 16,
},
header: {
flexDirection: 'row',
alignItems: 'center',
marginBottom: 8,
},
logo: {
width: 40,
height: 40,
marginRight: 8,
},
profileName: {
fontSize: 14,
fontWeight: 'bold',
},
headline: {
fontSize: 18,
fontWeight: 'bold',
marginBottom: 8,
},
body: {
fontSize: 14,
color: '#666',
marginBottom: 12,
},
media: {
width: '100%',
height: 200,
},
});nativeAd
AdropNativeAd
O
네이티브 광고 인스턴스
style
ViewStyle
X
컨테이너 스타일
개별 뷰 컴포넌트
AdropHeadLineView
광고 제목
TextStyle
AdropBodyView
광고 본문
TextStyle
AdropProfileLogoView
광고주 로고
ImageStyle
AdropProfileNameView
광고주 이름
TextStyle
AdropCallToActionView
CTA 버튼 텍스트
TextStyle
AdropNativeAd
const nativeAd = new AdropNativeAd(
unitId: string,
useCustomClick?: boolean // 커스텀 클릭 사용 여부 (기본값: false)
);Properties
unitId
string
광고 Unit ID
isLoaded
boolean
광고 로드 여부
creativeId
string
광고 소재 ID
txId
string
광고 트랜잭션 ID
campaignId
string
캠페인 ID
isBackfilled
boolean
Backfill 광고 여부
useCustomClick
boolean
커스텀 클릭 사용여부
properties
AdropNativeProperties
광고 콘텐츠 데이터
listener
AdropNativeAdListener
이벤트 리스너
AdropNativeProperties 타입
type AdropNativeProperties = {
headline?: string; // 제목
body?: string; // 본문
creative?: string; // 크리에이티브 HTML
asset?: string; // 에셋
destinationURL?: string; // 클릭 시 이동 URL
callToAction?: string; // CTA 텍스트
profile?: {
displayName: string; // 프로필 이름
displayLogo: string; // 프로필 로고 URL
};
extra?: Record<string, string>; // 추가 데이터
isBackfilled?: boolean; // Backfill 광고 여부
};AdropNativeAdListener 인터페이스
interface AdropNativeAdListener {
onAdReceived?: (ad: AdropNativeAd) => void; // 광고 로드 성공
onAdClicked?: (ad: AdropNativeAd) => void; // 광고 클릭
onAdImpression?: (ad: AdropNativeAd) => void; // 광고 화면 노출
onAdFailedToReceive?: (ad: AdropNativeAd, errorCode?: string) => void; // 광고 로드 실패
}광고 로드 실패 시, AdropErrorCode 를 확인해주세요
미디어 렌더링: 직광고 vs Backfill 광고
네이티브 광고의 미디어 영역은 광고 유형에 따라 다르게 렌더더링해야 합니다.
직광고
false
WebView 로 properties.creative HTML 랜더링
Backfill 광고
true
AdropMediaView 컴포넌트 사용
중요: Backfill 광고에서
AdropMediaView대신 WebView를 사용하면 이벤트 집계가 되지 않습니다.
예를 들어, t1, t2, t3 라는 커스텀 필드가 추가 되었을 경우에 대해 알아보겠습니다. * 텍스트 라벨은 광고주 콘솔에 입력되는 라벨입니다.
커스텀 필드 데이터 사용
extra 필드를 이용하여 커스텀 필드를 노출할 수 있습니다. 예를 들어, t1, t2, t3 라는 커스텀 필드가 추가 되었을 경우에 대해 알아보겠습니다.
* 텍스트 라벨은 광고주 콘솔에 입력되는 라벨입니다.
<AdropNativeAdView
nativeAd={nativeAd}
style={{
...styles.adContainer,
width: Dimensions.get('window').width,
}}
>
<View style={styles.rowContainer}>
<Text>{nativeAd.properties.extra['t1']}</Text>
<Text>{nativeAd.properties.extra['t2']}</Text>
<Text>{nativeAd.properties.extra['t3']}</Text>
</View>
</AdropNativeAdView>
useCustomClick 옵션
클릭 이벤트 호출 시 destinationURL 로 자동이동을 막기위해 사용합니다.
주의: 비디오 광고를 노출할 때, 재생 컨트롤을 사용하기 위해
useCustomClick을true로 설정해야합니다.
주의사항
반드시
AdropNativeAdView로 광고 요소들을 감싸야 합니다.컴포넌트 언마운트 시
destroy()를 호출하여 리소스를 해제하세요.미디어 랜더링 필수 분기
직광고 (
isBackfilled = false):WebView로properties.creative랜더링Backfill 광고 (
isBackfilled = true):AdropMediaView사용 (필수)WebView사용 시react-native-webview설치 필요
Last updated