메인 콘텐츠로 건너뛰기

​
개요

Adrop React Native SDK를 사용하면 React Native 앱에서 다양한 광고 포맷을 쉽게 연동할 수 있습니다.

​
지원 광고 포맷

포맷설명
배너 광고화면 일부에 표시되는 직사각형 광고
네이티브 광고앱 콘텐츠와 자연스럽게 어우러지는 광고
전면 광고전체 화면을 덮는 광고
리워드 광고보상을 제공하는 전체 화면 광고
팝업 광고팝업 형태로 표시되는 광고

​
요구 사항

​
React Native

  • React Native 0.71 이상

​
Android

  • API 레벨 23 (Android 6.0) 이상
  • compileSdkVersion 34
  • Kotlin 1.8.20 이상
  • Gradle 8.0 이상

​
iOS

  • iOS 13.0 이상
  • Swift 5.0 이상

​
설치

​
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 플러그인과 백필 의존성을 추가합니다.
android/app/build.gradle
apply plugin: "kotlin-android"

dependencies {
    implementation 'io.adrop:adrop-ads-backfill:1.7.6'
}
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>
App ID 발급은 에이드랍에 문의해주세요.

​
3. iOS 설정

ios/Podfile을 수정합니다.
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 이상에서 광고 전환 추적에 필요
Info.plist
<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 발급은 에이드랍에 문의해주세요.

​
초기화

앱 시작 시 SDK를 초기화합니다. 일반적으로 App.tsx 또는 index.js에서 호출합니다.
App.tsx
import { Adrop } from 'adrop-ads-react-native';

// 앱 시작 시 초기화
Adrop.initialize(false); // false: 테스트 모드, true: 프로덕션 모드

​
초기화 옵션

Adrop.initialize(
  production,        // boolean: 프로덕션 모드 여부
  targetCountries,   // string[]?: 타겟 국가 코드 배열 (선택)
  useInAppBrowser    // boolean?: iOS 인앱 브라우저 사용 여부 (선택)
);
파라미터
파라미터타입필수설명
productionbooleanYtrue: 프로덕션 모드, false: 테스트 모드
targetCountriesstring[]N광고를 표시할 국가 코드 (예: ['KR', 'US'])
useInAppBrowserbooleanNiOS에서 인앱 브라우저 사용 여부 (기본값: 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
팝업 광고PUBLIC_TEST_UNIT_ID_POPUP
import { Adrop } from 'adrop-ads-react-native';

// 배너 광고 테스트
const testBannerUnitId = Adrop.PUBLIC_TEST_UNIT_ID_320_50;
프로덕션 배포 전에 반드시 실제 유닛 ID로 교체하세요.

​
에러 코드

SDK에서 발생할 수 있는 에러 코드입니다.
에러 코드설명
ERROR_CODE_NETWORK네트워크 오류
ERROR_CODE_INTERNAL내부 오류
ERROR_CODE_INITIALIZESDK 초기화 오류
ERROR_CODE_INVALID_UNIT유효하지 않은 유닛 ID
ERROR_CODE_NOT_TARGET_COUNTRY타겟 국가가 아님
ERROR_CODE_AD_INACTIVE비활성화된 광고
ERROR_CODE_AD_NO_FILL노출할 광고 없음
ERROR_CODE_AD_LOAD_DUPLICATED중복 로드 요청
ERROR_CODE_AD_LOADING로드 진행 중
ERROR_CODE_AD_EMPTY빈 광고
ERROR_CODE_AD_SHOWN이미 표시된 광고
ERROR_CODE_AD_HIDE_FOR_TODAY오늘 숨김 처리된 광고
ERROR_CODE_LANDSCAPE_UNSUPPORTED가로 모드 미지원
import { AdropErrorCode } from 'adrop-ads-react-native';

// 에러 처리 예시
if (errorCode === AdropErrorCode.adNoFill) {
  console.log('노출할 광고가 없습니다.');
}

​
문제 해결

​
iOS 빌드 오류

Swift 버전 호환성 문제가 발생할 경우, ios/Podfile의 post_install 블록에 다음을 추가하세요.
ios/Podfile
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 버전을 확인하세요.
android/build.gradle
buildscript {
    ext {
        kotlinVersion = '2.1.0'
    }
}

​
다음 단계

배너 광고

배너 광고 구현하기

네이티브 광고

네이티브 광고 구현하기

전면 광고

전면 광고 구현하기

리워드 광고

리워드 광고 구현하기

WebView 가이드

WebView에서 웹 광고 표시

UMP 연동

GDPR/CCPA 동의 관리