Adrop에 React Native 앱 등록하기

사전 준비사항

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

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

  • React Native:

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

  • 안드로이드 :

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

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

      • minSdkVersion 23

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

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

        • compileSdkVersion 33

    • Kotlin 1.7.10 버전 이상

  • iOS:

    • iOS 13

    • Swift 5.0

  • React Native - Setting up the development environment

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

1. Adrop 프로젝트 생성

먼저 React Native 앱에 연결할 Adrop 프로젝트를 만들어주세요.

2. Adrop에 앱 등록하기

React Native를 위한 Adrop 콘솔을 사용하기 위해 '프로젝트'에 React Native 앱 등록이 먼저 필요합니다.

앱에서 실제로 사용하는 앱 패키지 명을 정확히 입력했는지 한 번 더 확인해주세요. 앱 패키지 명은 대소문자를 구분하며 한번 등록된 후에는 Adrop 안드로이드 앱에 대해 변경할 수 없습니다.

React Native 앱 빌더 사용방법

  1. Adrop console로 이동해주세요.

  2. 프로젝트 페이지 상단 중앙에 React 아이콘을 클릭해서 설치를 시작해주세요.

  3. React package name 입력란에 앱 패키지 명을 입력해주세요.

  • 앱 패키지 명은 사용자의 디바이스 및 Google Play Store 또는 App Store에서 앱을 고유하게 식별하는 이름입니다. 종종 애플리케이션 ID라고도 합니다.

  1. 앱 닉네임을 입력해주세요.

  • 앱 닉네임 : Adrop 콘솔에서 본인에게만 표시되는 내부 편의를 위한 식별자입니다.

  1. '앱 등록'을 클릭하세요. 안드로이드와 iOS앱이 각각 만들어졌는지 확인해주세요.

안드로이드 앱 빌더 사용하기

iOS 앱 빌더 사용하기

3. Adrop 설정 파일 추가하기

  1. adrop_service.json을 다운로드하고 Adrop 안드로이드 플랫폼 설정 파일을 받으세요.

  2. 설정 파일을 에셋 디렉토리로 이동시켜주세요. android/app/src/main/assets/adrop_service.json

4. 앱에 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. 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

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

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

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

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

// ..
Adrop.initialize(production);

  1. 만약 @react-navigation 를 사용하신다면, 광고 노출수(impressions)를 측정할 수 있도록 AdropNavigatorObserver 를 추가해주세요.

<NavigationContainer
    onStateChange={AdropNavigatorObserver.onStateChange}
>

다음 단계

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

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

(선택사항) 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
PreviousAdrop에 Flutter 앱 등록하기NextAdrop에 웹앱 등록하기

Last updated