React Native 앱에 Adrop SDK 설치하기

npm: adrop-ads-react-nativenpm

사전 준비사항

선호하는 에디터 또는 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에 로그인하세요.

1. Adrop 설정 파일 추가하기

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

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

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

npm install adrop-ads-react-native

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

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

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. 광고 유닛 노출하기

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

(선택사항) 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