React Native Expo 안드로이드 앱에 애드몹 배너 광고 넣기

React native & Expo로 만든 안드로이드 앱에 배너 광고를 넣어보자!

광고는 구글 애드몹을 통해 제공 받을 것이다.

 

1. 구글 플레이 스토어에 앱을 배포한다.

배포하기 전에 광고를 먼저 넣는 것도 가능하지만 훨씬 번거롭기 때문에

출시를 먼저 한 뒤에 광고를 넣는 것이 좋다. 앱을 일단 배포한다.

 

참고로 앱 배포 절차 중, 앱에서 광고 ID를 사용하냐는 질문에는 그렇다고 체크를 해줘야 한다.

만약 아니라고 체크하고 배포를 했다면

구글 플레이 콘솔>'정책 및 프로그램'의 [앱 콘텐츠] 메뉴 > [조치됨] 탭 > '광고ID' 항목의 [관리] 버튼을 눌러

선언을 수정할 수 있다.

 

2. 구글 애드몹에 가입하여 광고 단위를 만든다.

구글 애드몹 주소: https://admob.google.com

1) 가입해서 [시작하기]를 통해 앱을 등록한다.

2) [광고 단위 추가]를 선택하여 원하는 유형의 광고를 생성한다.

생성을 마치면 "ca-app-pub-.."라고 적힌 '앱 ID'와 '광고 단위 ID'가 적힌 화면이 뜰 것이다. 이 ID들을 사용할 것이다.

 

참고로 이 화면은 필요하면 언제든지 애드몹 메뉴의

'앱>광고단위>(광고단위 제목 선택)>구현안내'에서 확인할 수 있으니

완료 버튼을 누르고 화면을 벗어나도 문제 없다.

 

3. 애드몹 패키지를 설치한다.

터미널을 열고 아래 명령어를 입력하면 된다.

npm i react-native-google-mobile-ads

 

4. app.json에 앱 ID를 적어준다.

애드몹에서 생성되었던 ID 중 "~"가 들어간 ID가 앱 ID이다.

아래 코드에서 앱 ID 부분을 본인 앱의 앱 ID로 바꾸어서 app.json 파일에 써준다.

이때 "expo"의 괄호 밖에 써줘야 하니 헷갈리지 않게 주의!

 

*앱 ID는 구글 애드몹 > [앱]메뉴의 [앱 설정]메뉴 > '앱 정보'의 '앱 ID'에서도 확인할 수 있다.

 

{
  "expo": {
    
  },
  "react-native-google-mobile-ads": {
    "android_app_id": "ca-app-pub-xxxxxxxx~xxxxxxxx"
  }
}

 

5. Development build를 한다.

지금 단계에서 앱을 테스트하려고 기존처럼 expo start 등의 명령어로 앱을 실행하면

아래와 같은 오류가 뜰 것이다.

 

Invariant Violation: TurboModuleRegistry.getEnforcing(...): 'RNGoogleMobileAdsModule'

 

여기서부터는 앱을 테스트하려면 development build가 필요하다.

아래 절차를 따라보자.

 

1) EAS CLI를 설치한다.

우리는 EAS Build라는 방식으로 development build를 만들 것이다.

EAS Build는 앱 빌드를 쉽게 할 수 있도록 도와주는 서비스이다.

이를 위해, 터미널에서 EAS 서비스와 상호작용하는데 필요한 도구인 EAS CLI를 설치한다.

npm install -g eas-cli

 

2) expo-dev-client를 설치한다.

이는 development build를 초기화하는데 필요한 라이브러리이다.

터미널에 아래 명령어를 입력한다.

npx expo install expo-dev-client

 

+ App.js에 아래 import문을 추가하면, 개발할 때 좀 더 도움되는 에러 메시지가 뜬다고 한다.

import 'expo-dev-client';

 

3) Expo 계정에 로그인한다.

터미널에 아래 명령어를 입력하고 로그인한다.

 

eas login

 

*이미 로그인되어 있는 건 아닐까 궁금하다면? 아래 명령어로 확인할 수 있다.

eas whoami

 

4) eas.json에 빌드 프로필을 작성한다.

우선, 만약 최상위 디렉토리에 eas.json이라는 파일이 없는 경우

아래 명령어를 입력하면 생겨날 것이다.

eas build

 

다음으로 빌드 프로필을 쓸 것이다.

앱을 빌드할 때 빌드하는 목적(내부 테스트용, 배포용 등)에 따라 다르게 설정해야 하는 값들이 있을 텐데

빌드 프로필은 이를 정리해서 미리 작성해둔 것이라고 이해하면 쉽다.

 

eas.json을 보면 development, preview, production 이렇게 세 종류의 프로필이 기본으로 적혀 있을 텐데

우리는 development build를 할 것이므로 "development" 괄호 안에 필요한 값들을 적어주면 된다.

 

아래 코드처럼 적어준다.

디버그 빌드라는 것을 만들기 위해 developmentClient를 true로 해주고,

내부 배포를 하기 위해 distribution을 internal로 적는다.

{
  "build": {
    "development": {
      "developmentClient": true,
      "distribution": "internal"
    },
    "preview": {},
    "production": {}
  }
}

 

 

5) development build를 실행한다.

이제 빌드를 할 것이다. 터미널에 아래와 같이 입력한다.

위에서 만든 development 프로필을 이용해 android 앱을 빌드하라는 명령어이다.

eas build --profile development --platform android

 

5~10분정도 시간이 소요된다.

초반에 질문이 뜰 수 있는데 yes, no를 선택하는 경우는 대체로 yes를 하면 될 것이다.

 

 

6) 빌드한 앱을 설치한다.

빌드가 완료되면 터미널에 QR 코드가 표시될 것이다.

이를 테스트하려는 기기에 스캔하면, 앱 설치 버튼이 있는 사이트로 이동할 것이다.

[Install] 버튼을 눌러서 앱을 설치해준다.

 

7) 로컬 개발 서버를 실행한다.

다시 터미널에서 아래 명령어로 development server를 시작하고,

표시되는 QR코드를 기기로 스캔한다.

npx expo start --dev-client

 

이제 기기에서 앱이 정상적으로 실행될 것이다!

 

*참고

나중에 또 development build로 앱을 실행하고 싶을 경우

바로 7번 방법으로 개발 서버만 실행하면 되고,

만약 새로운 기기에서 테스트하거나 development build한 앱을 기기에서 삭제한 상태라면

5,6번 과정을 통해 앱을 설치해주고 개발 서버를 실행하면 된다.

 

 

5. 배너 광고를 넣는다.

광고를 넣으려는 App.js의 return문에 <BannerAd>컴포넌트를 추가해준다.

아래 코드에서 'ca-app-pub-... '로 적은 부분을 본인 앱의 '광고 단위 ID'로 바꾸어서 써주면 된다.

이번에는 '~'가 들어간 앱 ID가 아닌, '/'가 들어간 광고단위 ID이니 헷갈리지 않도록 주의하자!

 

*중요: 테스트용 광고단위 ID 사용하기!

개발자들이 앱에 광고를 넣고 나서 본인들이 직접 광고를 마구 눌러 돈을 번다면

돈을 내는 광고주는 억울할 것이다.

구글은 이를 방지하기 위해 개발 시 테스트용 광고단위 ID를 사용하게 하고 있다.

이것이 아래 코드의 3번째 줄의 내용인데,

개발용 빌드에서는 테스트용 광고단위 ID를 쓰고, 배포용 빌드에서는 실제 광고단위 ID를 쓰도록 하는 코드이다.

 

이렇게 하면 development build한 앱에서는 배너 부분에 실제 광고 대신

"Nice job! This is a test ad"라고 적힌 가상의 광고가 뜰 것이다.

그리고 앱을 스토어에 배포한 뒤 스토어에서 설치해서 볼 때는 실제 광고가 뜰 것이다.

 

참고로 development build에서 테스트용 ID를 쓰지 않고 실제 ID를 쓰면 실제 광고가 뜨긴 하는데,

개발자가 본인 기기에서 광고를 누르면 계정이 정지를 당한다고 하니 누르지는 말자!

import React from 'react';
import { BannerAd, BannerAdSize, TestIds } from 'react-native-google-mobile-ads';

const adUnitId = __DEV__ ? TestIds.BANNER : 'ca-app-pub-xxxxxxxxxxxxx/yyyyyyyyyyyyyy';

function App() {
  return (
    <BannerAd
      unitId={adUnitId}
      size={BannerAdSize.ANCHORED_ADAPTIVE_BANNER}
      requestOptions={{
        requestNonPersonalizedAdsOnly: true,
      }}
    />
  );
}

 

 

6. 앱을 배포한다.

광고 넣기를 성공했다면 앱 aab를 빌드하고 스토어에서 앱을 업데이트 해준다.

이제 당신도 앱으로 돈을 벌 수 있게 됐다!

 

 

참고: 광고 있는 앱 등록 시 해야 할 일 2가지