React Native 앱에 Adrop SDK 연동하기

https://www.npmjs.com/package/adrop-ads-react-nativewww.npmjs.com

사전 준비사항

선호하는 에디터 또는 IDE를 준비해주세요.

Adrop은 다음의 환경에서 동작합니다.

• React Native:

  • 0.71 혹은 그 이상 버전을 사용

• 안드로이드 :

  • API 레벨 23(M) 혹은 그 이상을 타겟팅

  • Android 6.0 혹은 그 이상 버전을 사용

    • minSdkVersion 23

  • 다음의 버전을 충족하는 Jetpack (AndroidX)을 사용

    • com.android.tools.build:gradle v7.4.2 버전 이상

      • compileSdkVersion 34

  • Kotlin 1.8.20 버전 이상

• iOS:

  • iOS 13

  • Swift 5.0

• React Native - Setting up the development environment

이제 이메일 또는구글 계정을 통해 Adrop에 로그인하세요.

---

Adrop SDK 를 설치하기 전에, 앱에 연결할 플랫폼에 앱등록이 선행되어져야 해요.

*생성된 플랫폼이 없다면, 플랫폼 배포 가이드를 참고하여 플랫폼을 생성해 주세요. *애드컨트롤에 앱 서비스 등록이 안되어 있다면, 앱 등록 가이드 를 확인해주세요.

1. Adrop 설정 파일 추가하기

설정 파일 준비하기 가이드를 참고해 주세요.

2. 앱에 Adrop 라이브러리를 추가

1. React Native 프로젝트 디렉토리에서 하단의 커맨드를 실행시켜 플러그인을 설치해주세요.

npm install adrop-ads-react-native

1. 프레임워크 사용을 위해 CocoaPod 변경하기

• ./ios/Podfile 파일을 열고 타겟 안에 하단의 코드 한 줄을 추가하세요.

use_frameworks!

adrop-ads-react-native 는use_frameworks를 사용하는데, Flipper와의 호환성 문제가 있을 수 있어요.

Flipper 처리 방법: Podfile의 :flipper_configuration 코드 한 줄을 주석처리하여 Flipper를 비활성화해주세요. use_frameworks에 대한 자세한 처리 방법은 여기를 참고해주세요.

1. 프레임워크 사용을 위해 build.gradle 변경하기

• build.gradle 의 dependency를 업데이트 해주세요.

dependencies {
    ...
    classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:1.8.20" // 사용하시는 버전으로 바꾸셔도 됩니다
}

• app/build.gradle 에 아래 코드를 추가해주세요.

apply plugin: "kotlin-android"

1. Autolinking & rebuilding

위 단계가 완료되면 React Native Adrop 라이브러리를 프로젝트에 연결하고 애플리케이션을 다시 빌드해야 합니다.

React Native 0.60+ 사용자라면, 자동으로 "autolinking"에 액세스할 수 있으므로 추가 수동 설치 단계가 필요하지 않습니다. 패키지를 자동으로 연결하려면 프로젝트를 다시 빌드하세요.

# Android apps
npx react-native run-android

# iOS apps
cd ios/
pod install --repo-update
cd ..
npx react-native run-ios

3. 앱에서 Adrop 초기화(Initialize)하기

마지막으로, 초기화 코드를 앱에 추가해주세요.

Adrop라이브러리를 Import 하고 초기화해주세요.

import { Adrop } from 'adrop-ads-react-native';

// initialize 파라미터
// 첫번째 파라미터는 production 옵션입니다.
// 두번째 파라미터는 targetCountries 입니다.
// 세번째 파라미터는 useInAppBrowser 옵션 입니다. 
// -> 해당 옵션이 true인 경우, iOS에서 인앱브라우저로 destinationURL이 오픈됩니다.(false인 경우 외부브라우저)
Adrop.initialize(false, [], true)

Next Steps

1. 광고 유닛 등록하기

이제 광고 유닛을 등록하면 사용자에게 광고주의 직광고를 노출할 수 있어요.

광고 유닛 등록 방법을 알려드릴게요.

2. 광고 유닛 노출하기

이미 등록된 광고 유닛이 있다면 광고를 노출해 보세요.

광고 형식	아이콘	설명
React Native 배너 광고		서비스 화면 내에 특정 크기의 사각형 이미지로 표시되는 광고
React Native 전면 광고		사용자가 주요 화면을 전환할 때, 자연스럽게 전체 화면으로 표시되는 광고
React Native 보상형 광고		사용자에게 광고에 참여할 수 있는 기회를 제공하고 그 대가로 앱 내에서 보상을 지급하는 광고
React Native 네이티브 광고		노출되는 지면의 콘텐츠와 최대한 비슷한 방식으로 표시되는 광고
React Native 팝업 광고		사용자가 앱을 켤 때, 앱 홈 화면 위에서 팝업 형태로 표시할 수 있는 광고
React Native 스플래시 광고		사용자가 앱을 사용 중, 앱 화면이 나타나기 전후 전체 화면으로 표시되는 광고

---

(선택사항) Troubleshooting

# Add this line to your Podfile
use_frameworks!

# ...
post_install do |installer|
    installer.pods_project.targets.each do |target|
        target.build_configurations.each do |config|

        #...
        # Add this line to your Podfile
        config.build_settings['BUILD_LIBRARY_FOR_DISTRIBUTION'] = 'YES'
        end
    end
end