[React Native] Google AdMob 시작하기

 

invertase/react-native-firebase

...를 사용하여 구글의 애드몹을 붙여보자

 

공식문서는 https://rnfirebase.io/ 이거인 거 같은데, AdMob 관련자료는 https://rnfb-docs.netlify.app/admob/usage 여기에 있다(무슨 차인지 아시는 분 댓글 좀...)

 

React Native Firebase | React Native Firebase

문서의 Getting Started 부분에서 설명해주는데로 설정을 해주자

 

설치부터 시작해보자

yarn add @react-native-firebase/app

 

읽다보면 2. Android Setup에서 Firebase console에서 Android application을 추가하라고 알려준다

 

로그인 - Google 계정

Firebase console에 접근하기 위해서 로그인을 하고 프로젝트를 추가하자

 

프로젝트 만들기 3단계를 통해 프로젝트를 생성했다면,

앱 추가를 통해 우선 Android를 추가해주자

 

추가하다보면 google-services.json 파일을 다운받아 프로젝트에 추가하고 나머지 단계는 다음, 다음해서 추가를 완료한다

여기서 한가지 헷갈리는게 Firebase SDK를 설정하는게 나오는데 패스하면 된다

왜냐하면 우리는 지금 react-native-firebase를 사용하여 설정하기 때문이다

 

다시 react-native-firebase 문서로 돌아와서, Configure Firebase with Android credentials 부분부터 설정해주면 된다

/android/build.gradle 파일에 추가!

buildscript {
  dependencies {
    // ... other dependencies
    classpath 'com.google.gms:google-services:4.2.0'
  }
}

/android/app/build.gradle 파일에 추가!

apply plugin: 'com.android.application'
apply plugin: 'com.google.gms.google-services' // <- Add this line

 

 

다음으로 iOS도 동일하게 앱 추가를 통해 추가해주자

다운받은 GoogleService-Info.plist 파일부분부터 설정해주자

참고로 파일들은 언제든 다시 다운받을 수 있다

 

iOS도 Android와 동일하게 GoogleService-Info.plist 파일을 다운받아 프로젝트에 추가하고 나머지 단계는 다음, 다음해서 추가를 완료하자

 

다시 react-native-firebase 문서로 돌아와서, Configure Firebase with iOS credentials 부분의 설정을 추가하자

/ios/{projectName}AppDelegate.m 파일에 추가!

#import <Firebase.h>

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  // Add me --- \/
  if ([FIRApp defaultApp] == nil) {
    [FIRApp configure];
  }
  // ...
}

추가하면 아마 Xcode에서 에러가 나겠지만, 바로 아래에서 해결해주니 넘어가자

 

설정이 완료되었으면 문서의 4. Autoliking & rebuilding 부분처럼 앱을 실행해주자

# Android apps

yarn react-native run-android

 

# iOS apps

cd ios/

pod install --repo-update

cd ..

yarn react-native run-ios

 

 

잘 실행이 되는가?

실행에 문제가 없다면 이제 AdMob을 설치해보자

AdMob | React Native Firebase

문서의 AdMob 부분의 Installation 부분을 따라 설치해주자

yarn add @react-native-firebase/admob

 

Setting up Google AdMob 부분으로 이동하면 구글 애드몹 홈페이지로 이동하라고 한다

https://apps.admob.com/v2/home

AdMob

Google AdMob 페이지로 이동하여 Firebase에서 앱 추가했던 것처럼,

앱 > 앱 추가를 통해 iOS와 android를 어렵지 않게 추가할 수 있고,

추가하다보면 app_id를 얻을 수 있다

 

app_id를 얻었다면,

프로젝트 root에 firebase.json 파일을 생성해서 각 OS에 맞는 app_id로 바꿔주자

// <project-root>/firebase.json
{
  "react-native": {
    "admob_android_app_id": "ca-app-pub-xxxxxxxx~xxxxxxxx",
    "admob_ios_app_id": "ca-app-pub-xxxxxxxx~xxxxxxxx"
  }
}

 

 

다시 rebuild를 해서 문제 없으면 거의 다 왔다

# For iOS

cd ios/ && pod install

yarn react-native run-ios

 

# For Android

yarn react-native run-android

 

혹시 pod install 에서 아래와 같은 문제가 발생한다면,

Analyzing dependencies
[!] CocoaPods could not find compatible versions for pod "Firebase/AdMob":
  In Podfile:
    RNFBAdMob (from `../node_modules/@react-native-firebase/admob`) was resolved to 11.5.0, which depends on
      Firebase/AdMob (= 8.6.0)

None of your spec sources contain a spec satisfying the dependency: `Firebase/AdMob (= 8.6.0)`.

You have either:
 * mistyped the name or version.
 * not added the source repo that hosts the Podspec to your Podfile.

[!] NPM package '@react-native-firebase/admob' depends on '@react-native-firebase/app' v11.5.0 but found v12.7.1, this might cause build issues or runtime crashes.

[!] NPM package '@react-native-firebase/admob' depends on '@react-native-firebase/app' v11.5.0 but found v12.7.1, this might cause build issues or runtime crashes.

@react-native-firebase/app을 @react-native-firebase/admob와 동일한 v11.5.0 버전으로 맞추고,

yarn install

cd ios && rm Podfile.lock

pod install

cd ..

yarn react-native run-ios

빌드에 성공했는가

잘 되야한다(다른 문제는 있을 수 없...;; 미래에는 또 어떤 에러가 나올지 모르지만 성공하길 바라며)

 

 

admob().setRequestConfiguration 관련 부분은 꼭 필요한 지는 모르겠다(없어도 테스트는 되어서...)

 

Test ads에서 테스트 ID로 실행해 볼 수 있으니 먼저 해봐도 좋다

import { InterstitialAd, RewardedAd, BannerAd, TestIds } from '@react-native-firebase/admob';

# Interstitial
InterstitialAd.createForAdRequest(TestIds.INTERSTITIAL);

# Rewarded
RewardedAd.createForAdRequest(TestIds.REWARDED);

# Banners
<BannerAd unitId={TestIds.BANNER} />

 

실제 광고 ID는 Google AdMob 문서에서,

'앱 > 광고 단위'에서 원하는 광고를 선택해주면 된다

 

문서의 밑으로 쭉 내리다보면 Next Steps로 원하는 광고를 선택하여 붙일 수 있다

나머지 코드는 문서에 보면 잘 나와있어 어렵지 않게 추가할 수 있다

 

메뉴의 Displaying Adverts에서 보여주고 싶은 광고를 코드에 넣어주고 실행해보면 테스트 광고가 잘 나온다

 

막상 해보니 어렵진 않았는데, 중간에 SDK 설정하는 부분 때문에 잠시 헷갈려서 다음에 또 삽질하지 않기 위해 정리해둔다

 

 

끝.