[React Native][Admob] react-native-google-mobile-ads

# react-native-google-mobile-ads를 사용해서 Admob 적용하기

- 개발을 완료한 앱을 서비스하고, 계속 유지보수하기 위해서는 수익모델이 필요합니다. 수익 모델은 여러 가지가 있지만, 광고를 붙이는 것은 무료로 배포가 가능해서 진입 장벽이 낮다보니, 많이 사용되는 수익모델입니다. 그리고 광고 수익 모델을 제공하는 다양한 서비스가 있지만, 가장 많이 사용하는 Admob을 선택하게 되는 경우가 많습니다. 본 포스팅에서는 react-native-google-mobile-ads 라이브러리를 사용해서 Admob 광고를 추가하는 과정을 소개하려고 합니다.

# Github 저장소

- 이 라이브러리는 Google이나 Admob에서 직접 개발한 라이브러리는 아니지만, react-native-firebae와 Notifee라는 좋은 라이브러리들을 개발한 곳이어서 망설임 없이 선택하였습니다.

GitHub - invertase/react-native-google-mobile-ads: React Native Google Mobile Ads enables you to monetize your app with AdMob.

 

# 사용법

- 문서 페이지가 잘 정리되어 있기 때문에, 순서대로 따라하기만 해도 큰 문제 없이 광고를 붙이실 수 있으니, 본 포스팅으로 부족한 내용은  문서를 참조하시거나 댓글 달아주세요. 그리고 Admob 계정이 활성화 되어 있어야 하며, 사용할 플랫폼의 앱과 광고단위가 생성되어 있어야 합니다. 대략적으로는 아래의 이미지와 같지만, 설정할 수 있는 옵션과 광고단위가 다양하기 때문에, 본 포스팅에서는 라이브러리에 기본 포함되어 있는 테스트 아이디를 사용해서 테스트 광고를 붙일 것입니다.

- 우선 언제나처럼 모듈을 설치해줍니디

# Install the admob module
yarn add react-native-google-mobile-ads

- 그리고 프로젝트의 루트 경로에 있는 app.json파일에 다음과 같이 추가해 줍니다. 각각의 앱 아이디는 위의 이미지에 있는 App ID 항목입니다. (참고로 App ID는  "~"이 포함되어 있고, 광고 단위는 "/"가 들어가므로 구분할 때 이를 확인하면 편합니다) 그리고 Admob광고는 앱별로 나누어서 넣어야 하므로 Android, IOS 두 개의 앱을 추가하고 각각 광고 단위를 추가해 주어야 합니다. 단, 테스트만 진행하실 경우에는 채워 넣지 않고도 진행하실 수 있습니다.

// <project-root>/app.json
{
  "react-native-google-mobile-ads": {
    "android_app_id": "ca-app-pub-xxxxxxxx~xxxxxxxx",
    "ios_app_id": "ca-app-pub-xxxxxxxx~xxxxxxxx"
  }
}

- 그리고 실행 전에 IOS는 필요한 패키지들을 설치할 수 있게 아래의 명렁어를 실행해주세요.

npx pod-install

-  사용 방법은 광고에 따라, 보여주는 타이밍에 따라서 다양하므로, 예시들은 문서 페이지를 참고해주세요. 아래의 코드는 제 앱에 추가한 화면 상단을 가로로 채우는 배너 광고입니다. 라이브러리에서 제공하는 BannerAdSize를 변경해서 원하는 크기로 조절하시고,  다른 광고 형태를 구현하실 때는 TestIds를 활용해서 적절한 타입으로 넘겨주시기 바랍니다. 주의 하실 점은 테스트가 아닌 아이디로 광고를 부르면, 어뷰징으로 처리되어 막힐 수 있기 때문에, 꼭 테스트 아이디를 사용해주세요

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

export const Banner = () => {
  return (
    <StyledView className="absolute self-center items-center">
      <BannerAd
        unitId={
          __DEV__ ? TestIds.BANNER : 'ca-app-pub-xxxxxxxxxxxxxxxx/yyyyyyyyyy'
        }
        size={BannerAdSize.ANCHORED_ADAPTIVE_BANNER}
        requestOptions={{
          requestNonPersonalizedAdsOnly: true,
        }}
      />
    </StyledView>
  );
};

 

---