Google AdMob 광고 적용하기 (1/2)

import { firebase } from '@react-native-firebase/admob';

AdMob

이 포스팅을 읽고 계시는 여러분....

react-native 를 통하여 앱을 제작하고, 앱스토어에 어플리케이션을 업로드 했거나, 업로드 예정일 것입니다. 

 

그렇다면, 이제 고민이 되는 것은, 바로..... 수익

모바일 앱의 수익 구조는 어떤 것이 있을까?

3가지 유형을 생각해 볼 수 있겠습니다. 

 

1.  유료 애플리케이션,
2.  구독 서비스,
3.  광고 수익
4. 그 밖의 많은 방법이 존재

이 중에서 이번 포스팅에서 광고수익에 대하여 포스팅 하겠습니다. 

 

---

광고 플랫폼 중에서 가장 잘 알려져 있는 것이 바로 AdMob 입니다. 

 

이러한 이유로 저 또한 AdMob을 선택하여 사용중입니다. 

(현 시점에서 Facebook 도 사용중입니다만, AdMob처럼 편리하지가 않습니다.)

 

google AdMob을 타겟으로 하는 이유는,

Android 기반 Application에 대한 예제와 자료가 풍부하고,

Firebase 등 다양한 서비스의 기능을 동시에 사용할 수 있기 때문입니다.. 

 

수익률 측면에서는 AdMob 보다 더 좋은 광고수익 서비스도 있을 수 있으나,

우선 AdMob을 경험해 보고 다른 서비스를 찾아가는 것이 시행착오를 줄일 수 있는 방법이라 생각한다. 

 

---

AdMob을 사용하기 위한 조건 및 단계는 아래와 같습니다.

 

[ 전제 조건 ]

1. 애플리케이션 개발이 완료이거나, 완료 직전 상태이다. 

2. 구글 개발자 등록 완료 (개발자 등록 하는데는, $25달러 결제만 하면 거의 바로 진행된다.)

3. Firebase 및 AdMob 가입 (구글 계정 및 개발자 등록이 되어 있으면, 바로 진행 가능)

 

[실제 적용 단계]

1. Firebase와 App간 연결 설정 (웹페이지 App ID)

2. AdMob과 App간 연결 (웹페이지 -> App ID 및 AdUnit ID 확보)

3. App Project의 Configure 설정 (android/build.gradle, android/app/build.gradle 등)

4. React Native에 광고 적용 (Test Unit ID)

 

우선 간략하게 큰그림으로 이미지 한번 쓱 보시죠~

---

1단계 : 구글 개발자 등록 단계 입니다.

google Developer Console에 방문하여 개발자 등록을 합니다. 

 $25 의 비용이 필요하며, 비용만 결재하면, 거의 바로 승인 받을 수 있습니다. 

 

 

2단계 : Firebase 등록 

 

---

3단계 : AdMob 등록

 

 

 

[ 실제 설정 및 적용 ]

 

사실 AdMob 등록/사용을 위해서 Firebase 등록이 필수적인것은 아닙니다. 

원래 AdMob은 별도로 분리된 모듈이었으나, 최근 Firebase의 서브모듈로 편입 되었습니다. 

다만, 최근 AdMob 라이브러리가 firebase로 포함이 되었는데, firebase를 사용하면 다양한 추가적인 기능을 사용할 수 있으며,

향후 유지 방향성 자체가 Firebase로 통합이므로 Firebase에 포함된 버전으로 AdMob을 진행하는 것을 권고 드립니다. 

 

Firebase 기반 AdMob을 사용하기 위해서,

 

우선 Firebase/app를 연결하고, 이후에 순차적으로 AdMob을 추가 설정합니다.

처음에는 각각을 개별 진행하지만, 몇번 사용하다 보면 해당 설정을 한꺼번에 진행 할 수 있을 것입니다. 

우선 설명을 위해서 순차 진행으로 포스팅 합니다.  

---

 

자.... 대략 적으로 큰그림을 보셨나요?

그럼 구글 개발자 등록은.... 흐음... Money가 들어 가고 뭐 어려울것 없으니, 

알아서 하셨을 거라 믿고 firebase 연결부터 해 보겠습니다. 

 

 

 

 

 

1) Firebase 연결

Firebase에서는 app에 대한 통계부터, 퍼포먼스 관리 및 App을 위한 Pre-built Function을 지원하는데,

이것을 위해서는 App과 연결이 되어 있어야 한다.

(어떤 App에 이 기능을 지원할지 매핑이 되어 있어야 하지 않겠는가?) 

Firebase에서 새로운 Project 생성

https://console.firebase.google.com/ 를 방문하여 로그인을 하면, 프로젝트 생성을 하는 대시보드를 볼 수 있습니다. 

 

아래와 같이 "Add Project"를 눌러서 새로운 프로젝트를 생성합니다. 

 

일단 프로젝트가 생성 되면, 프로젝트 내 기존 App가 존재할 때 App 추가합니다.

 

App를 추가하는 단계는 아래처럼 4단계로 구성됩니다.

• 1) 앱등록,
• 2) 구성파일 다운로드 (google-services.json),
• 3) Firebase SDK 추가,
• 4) 앱 실행/확인 으로 이루어진다.  

---

그중 첫 단계 입니다.

아래 그림처럼, Firebase에서 App를 추가하면, app에 대한 정보를 입력하는 “앱등록"단계가 진행됩니다. 

앱 등록과정에서는,

• App Package Name
• app 를 구분할 닉네임
• 앱 서명 -  footpring (Hash - SHA-1 / SHA 256 )

등록 단계에서는 단순 등록정보이며, 이 정보가 실제 앱과 일치하는지 여부(Validation) 체크하기 위한 정보라 하겠습니다.

 

어플의 패키지명을 입력합니다. 

 

앱 등록을 위한 전체적인 단계입니다.

 

---

2단계 : Firebase 연결

 어플의 정보를 모두 입력하였다면, 입력된 정보를 기반으로 Firebase가 설정 파일을 생성합니다. 

이 설정파일을 묶어서 google-services.json 파일로 제공(다운로드) 하고 있습니다. 

이 google-services.json 파일을 Firebase에서는 project credential이라고 부르고 있습니다. 

 

Firebase 라이브러리는 이 json 파일을 받아서 지정된 위치에 저장하고, 모듈을 실행하면 자동으로 설정되도록 해 두었습니다. 

 

실제 google-services.json을 열어서 살펴 보세요. 

json 파일 내부에는, 앞서 1단계에서 설정한 앱등록정보와 앱등록정보를 포함하여,

프로젝트 정보 및 유관서비스(oauth, firebase database, api key 등)의 정보가 담겨 있습니다.

따라서, 1단계에서 입력한 정보는 google-services.json 파일을 만들기 위한 과정이라고 할 수 있습니다. 

 

결국, 실제 Firebase와 APP의 연결은 google-service.json을 로드하여, SDK를 구동하는 과정입니다. 

Firebase SDK를 사용하면, 별다른 설정없이 google-service.json파일을 자동으로 읽어들여,

firebase와 app간 연결을 알아서 해 주기 때문에, 복잡한 과정을 내부적으로 처리해 주는 것이죠.

 

자 이제,  credential file (google-service.json)을 다운로드 하도록 합니다. 

여기서 중요한 것을 하나 집고 넘어 가면, 

firebase SDK가 google-service.json을 찾는 위치는 ./android/app 입니다. 

( ex. /android/app/google-services.json )

 

 

 

---

json 설정 파일을 사용하여 실제 React Native Code에 적용하는 부분은 조금 난이도가 상승합니다. 

따라서, 다음 포스팅으로 나누어 봤습니다. 

 

Google AdMob 광고 적용하기 (2/2)

https://windflex.tistory.com/82