react native에서 구글 애드몹(admob) 적용하기

시작하기

구글의 광고플랫폼으로 웹에서는 구글 애드센스, 어플리케이션에서는 구글 애드몹을 사용합니다.
수익을 창출 할 수 있는 간편한 플랫폼입니다.

설치하기

기존 firebase admob 설치를 검색하면 구버전의 경우가 많고 현재(2023년 01년 10일 기준) 패키지들 대부분
deprecate가 되었습니다.
@react-native-admob/admob 패키지 설명에보면 react-native-google-mobile-ads로 패키지 변경되었다는 문구를 확인 할 수 있습니다.

패키지를 확인해보고 react-native-google-mobile-ads를 설치해보도록 하겠습니다.
firebase 설치 없이 간단하게 admob 적용이 가능합니다.

npm i react-native-google-mobile-ads

설정

admob 사이트에 로그인을 합니다.
이후 ios, android 앱을 추가합니다.

android_app_id 와 ios_app_id 부분에 admob에서 추가한 값을 가져옵니다.

자세한 내용은 docs에서 확인할 수 있습니다.

다양한 방법으로 광고를 게시할 수 있습니다. 앱에 최대한 방해가 되지 않도록 하기 위해 광고 단위를 배너로 설정 해보도록 하겠습니다.

원하는 이름으로 지어줍니다.

광고 단위 생성후 나오는 ca-app-pub코드를 사용합니다. 복사 해두도록 합니다.

ios와 android 각각 광고단위를 설정해주어야 합니다.
설정이 완료되었다면 코드를 입력해보도록 하겠습니다.

프로그램 작성

app.json파일에 다음 코드를 입력해줍니다.

// <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"
  }
}

admob banner를 실행할 컴포넌트를 만들어줍니다.

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

const unitID =
  Platform.select({
    ios: 'ca-app-pub-복사한ID',
    android: 'ca-app-pub-복사한ID',
  }) || '';

const adUnitId = __DEV__ ? TestIds.BANNER : unitID;

const Admob = () => {
  return (
    <View style={styles.admob}>
      <BannerAd
        unitId={adUnitId}
        size={BannerAdSize.FULL_BANNER}
        requestOptions={{
          requestNonPersonalizedAdsOnly: true,
        }}
      />
    </View>
  );
};
const styles = StyleSheet.create({
  admob: {
    height: 60,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
  },
});
export default Admob;

import React from 'react';
import Admob from './Admob';

const App = () => {
  return (
    <View>
      <View>
        <Text>Admob 테스트</Text>
      </View>
      <Admob />
    </View>
  );
};
export default App;

이후 테스트 해보도록 합니다.

결과

현재 제작중인 어플에 광고가 들어간 것을 확인 할 수 있습니다.