Adrop React Native SDK를 사용하면 React Native 앱에서 다양한 광고 포맷을 쉽게 연동할 수 있습니다.
지원 광고 포맷
포맷 설명 배너 광고 화면 일부에 표시되는 직사각형 광고 네이티브 광고 앱 콘텐츠와 자연스럽게 어우러지는 광고 전면 광고 전체 화면을 덮는 광고 보상형 광고 보상을 제공하는 전체 화면 광고 팝업 광고 팝업 형태로 표시되는 광고 스플래시 광고 앱 실행 시 표시되는 광고
요구 사항
React Native
Android
API 레벨 23 (Android 6.0) 이상
compileSdkVersion 34
Kotlin 2.1.0 이상
Gradle 8.7 이상
iOS
1. 패키지 설치
npm install adrop-ads-react-native
2. Android 설정 android/settings.gradle.kts에 백필 광고 저장소를 추가합니다.android/settings.gradle.kts
dependencyResolutionManagement {
repositoriesMode. set (RepositoriesMode.FAIL_ON_PROJECT_REPOS)
repositories {
google ()
mavenCentral ()
maven { url = uri ( "https://artifact.bytedance.com/repository/pangle" ) }
}
}
android/app/build.gradle에 Kotlin 플러그인과 백필 의존성을 추가합니다.apply plugin: "kotlin-android"
dependencies {
implementation 'io.adrop:adrop-ads-backfill:1.8.0'
}
android/app/src/main/AndroidManifest.xml에 백필 App ID를 추가합니다.android/app/src/main/AndroidManifest.xml
< manifest >
< application >
<!-- Backfill App ID -->
< meta-data
android:name = "com.google.android.gms.ads.APPLICATION_ID"
android:value = "ca-app-pub-xxxxxxxxxxxxxxxx~yyyyyyyyyy" />
</ application >
</ manifest >
3. iOS 설정 ios/Podfile을 수정합니다.use_frameworks!
target 'YourApp' do
# 기타 의존성...
# 백필 광고 SDK
pod 'adrop-ads-backfill'
end
Pod을 설치합니다. cd ios && pod install --repo-update && cd ..
4. Info.plist 설정 백필 광고를 위해 ios/YourApp/Info.plist에 다음 설정을 추가합니다.
GADApplicationIdentifier : 백필 광고용 App ID
SKAdNetworkItems : iOS 14 이상에서 광고 전환 추적에 필요
< key > GADApplicationIdentifier </ key >
< string > ca-app-pub-xxxxxxxxxxxxxxxx~yyyyyyyyyy </ string >
< key > SKAdNetworkItems </ key >
< array >
< dict >
< key > SKAdNetworkIdentifier </ key >
< string > cstr6suwn9.skadnetwork </ string >
</ dict >
< dict >
< key > SKAdNetworkIdentifier </ key >
< string > 4fzdc2evr5.skadnetwork </ string >
</ dict >
< dict >
< key > SKAdNetworkIdentifier </ key >
< string > 4pfyvq9l8r.skadnetwork </ string >
</ dict >
< dict >
< key > SKAdNetworkIdentifier </ key >
< string > 2fnua5tdw4.skadnetwork </ string >
</ dict >
< dict >
< key > SKAdNetworkIdentifier </ key >
< string > ydx93a7ass.skadnetwork </ string >
</ dict >
< dict >
< key > SKAdNetworkIdentifier </ key >
< string > 5a6flpkh64.skadnetwork </ string >
</ dict >
< dict >
< key > SKAdNetworkIdentifier </ key >
< string > p78axxw29g.skadnetwork </ string >
</ dict >
< dict >
< key > SKAdNetworkIdentifier </ key >
< string > v72qych5uu.skadnetwork </ string >
</ dict >
< dict >
< key > SKAdNetworkIdentifier </ key >
< string > ludvb6z3bs.skadnetwork </ string >
</ dict >
< dict >
< key > SKAdNetworkIdentifier </ key >
< string > cp8zw746q7.skadnetwork </ string >
</ dict >
</ array >
SKAdNetworkItems 전체 목록과 App ID 발급은 에이드랍에 문의해주세요.
2. Config Plugin 생성 프로젝트 루트에 plugins/withAdropService.js 파일을 생성합니다. 이 Expo config plugin은 npx expo prebuild 시 네이티브 프로젝트에 adrop_service.json을 자동으로 생성합니다.
Android: android/app/src/main/assets/adrop_service.json
iOS: ios/{projectName}/adrop_service.json
plugins/withAdropService.js
const { withDangerousMod } = require ( '@expo/config-plugins' )
const fs = require ( 'fs' )
const path = require ( 'path' )
function withAdropServiceAndroid ( config , props ) {
return withDangerousMod ( config , [
'android' ,
async ( config ) => {
const projectRoot = config . modRequest . projectRoot
const androidAssetsPath = path . join ( projectRoot , 'android' , 'app' , 'src' , 'main' , 'assets' )
if ( ! fs . existsSync ( androidAssetsPath )) fs . mkdirSync ( androidAssetsPath , { recursive: true })
const serviceConfig = { app_key: props . android ?. appKey || props . appKey || '' }
fs . writeFileSync ( path . join ( androidAssetsPath , 'adrop_service.json' ), JSON . stringify ( serviceConfig , null , 2 ))
return config
},
])
}
function withAdropServiceIOS ( config , props ) {
return withDangerousMod ( config , [
'ios' ,
async ( config ) => {
const projectRoot = config . modRequest . projectRoot
const projectName = config . modRequest . projectName
const iosPath = path . join ( projectRoot , 'ios' , projectName )
if ( ! fs . existsSync ( iosPath )) fs . mkdirSync ( iosPath , { recursive: true })
const serviceConfig = { app_key: props . ios ?. appKey || props . appKey || '' }
fs . writeFileSync ( path . join ( iosPath , 'adrop_service.json' ), JSON . stringify ( serviceConfig , null , 2 ))
return config
},
])
}
module . exports = function withAdropService ( config , props = {}) {
config = withAdropServiceAndroid ( config , props )
config = withAdropServiceIOS ( config , props )
return config
}
3. app.json 설정 app.json의 plugins에 다음 두 개의 플러그인을 등록합니다.{
"expo" : {
"plugins" : [
[
"expo-build-properties" ,
{
"android" : { "compileSdkVersion" : 35 , "targetSdkVersion" : 35 , "minSdkVersion" : 24 },
"ios" : { "deploymentTarget" : "15.1" }
}
],
[
"./plugins/withAdropService" ,
{
"android" : { "appKey" : "<YOUR_ANDROID_APP_KEY>" },
"ios" : { "appKey" : "<YOUR_IOS_APP_KEY>" }
}
]
]
}
}
expo-build-properties : Android minSdkVersion 24 이상, iOS deploymentTarget 15.1 이상 필요
withAdropService : Adrop 콘솔에서 발급받은 appKey를 플랫폼별로 전달
초기화
앱 시작 시 SDK를 초기화합니다. 일반적으로 App.tsx 또는 index.js에서 호출합니다.
import { Adrop } from 'adrop-ads-react-native' ;
// 앱 시작 시 초기화
Adrop . initialize ( false ); // false: 테스트 모드, true: 프로덕션 모드
초기화 옵션
Adrop . initialize (
production , // boolean: 프로덕션 모드 여부
targetCountries , // string[]?: 타겟 국가 코드 배열 (선택)
useInAppBrowser // boolean?: iOS 인앱 브라우저 사용 여부 (선택)
);
파라미터
파라미터 타입 필수 설명 productionbooleanY true: 프로덕션 모드, false: 테스트 모드targetCountriesstring[]N 광고를 표시할 국가 코드 (예: ['KR', 'US']) useInAppBrowserbooleanN iOS에서 인앱 브라우저 사용 여부 (기본값: false)
예제
// 기본 초기화 (테스트 모드)
Adrop . initialize ( false );
// 프로덕션 모드 + 특정 국가 타겟팅
Adrop . initialize ( true , [ 'KR' , 'JP' , 'US' ]);
// 프로덕션 모드 + iOS 인앱 브라우저 사용
Adrop . initialize ( true , undefined , true );
테마 설정
광고 UI 테마를 설정합니다.
import { Adrop , AdropTheme } from 'adrop-ads-react-native' ;
// 테마 설정
Adrop . setTheme ( AdropTheme . auto ); // 시스템 설정 따름
Adrop . setTheme ( AdropTheme . light ); // 라이트 모드
Adrop . setTheme ( AdropTheme . dark ); // 다크 모드
테마 설명 AdropTheme.auto시스템 설정에 따라 자동 전환 AdropTheme.light라이트 모드 AdropTheme.dark다크 모드
사용자 식별자 설정
타겟팅 광고를 위해 사용자 식별자(UID)를 설정합니다.
import { Adrop } from 'adrop-ads-react-native' ;
Adrop . setUID ( 'user_123' );
UID는 SHA-256으로 해시되어 전송됩니다. 이메일, 전화번호 등 개인정보를 직접 전달하지 마세요.
테스트 유닛 ID
개발 및 테스트 시 다음 테스트 유닛 ID를 사용하세요.
포맷 테스트 유닛 ID 배너 (320x50) PUBLIC_TEST_UNIT_ID_320_50배너 (320x100) PUBLIC_TEST_UNIT_ID_320_100네이티브 PUBLIC_TEST_UNIT_ID_NATIVE전면 광고 PUBLIC_TEST_UNIT_ID_INTERSTITIAL보상형 광고 PUBLIC_TEST_UNIT_ID_REWARDED팝업 (Bottom) PUBLIC_TEST_UNIT_ID_POPUP_BOTTOM팝업 (Center) PUBLIC_TEST_UNIT_ID_POPUP_CENTER스플래시 PUBLIC_TEST_UNIT_ID_SPLASH
// 배너 광고 테스트
const testBannerUnitId = 'PUBLIC_TEST_UNIT_ID_320_50' ;
프로덕션 배포 전에 반드시 실제 유닛 ID로 교체하세요.
에러 코드
SDK에서 발생할 수 있는 에러 코드입니다.
에러 코드 설명 AdropErrorCode.network네트워크 오류 AdropErrorCode.internal내부 오류 AdropErrorCode.initializeSDK 초기화 오류 AdropErrorCode.invalidUnit유효하지 않은 유닛 ID AdropErrorCode.notTargetCountry타겟 국가가 아님 AdropErrorCode.inactive비활성화된 광고 AdropErrorCode.adNoFill노출할 광고 없음 AdropErrorCode.adDuplicated중복 로드 요청 AdropErrorCode.adLoading로드 진행 중 AdropErrorCode.adEmpty빈 광고 AdropErrorCode.adShown이미 표시된 광고 AdropErrorCode.adHideForToday오늘 숨김 처리된 광고 AdropErrorCode.adLandscapeUnsupported가로 모드 미지원 AdropErrorCode.backfillNoFill백필 광고 없음
import { AdropErrorCode } from 'adrop-ads-react-native' ;
// 에러 처리 예시
if ( errorCode === AdropErrorCode . adNoFill ) {
console . log ( '노출할 광고가 없습니다.' );
}
문제 해결
iOS 빌드 오류
Swift 버전 호환성 문제가 발생할 경우, ios/Podfile의 post_install 블록에 다음을 추가하세요.
post_install do | installer |
installer. pods_project . targets . each do | target |
target. build_configurations . each do | config |
config. build_settings [ 'BUILD_LIBRARY_FOR_DISTRIBUTION' ] = 'YES'
end
end
end
Android 빌드 오류
Kotlin 버전이 맞지 않는 경우, android/build.gradle에서 Kotlin 버전을 확인하세요.
buildscript {
ext {
kotlinVersion = '2.1.0'
}
}
다음 단계