React Native Expo에 google AdMob을 넣어보자

google admob

1. react-native-google-ads

expo 앱에 google admob을 추가할 때 expo-ads-admob 라이브러리를 사용했지만, Expo SDK 46을 기준으로 더 이상 지원하지 않습니다.

현재 포스팅일(2024.10) 기준 Expo SDK 버전은 51입니다.
@Expo Version

https://github.com/expo/expo-ads-admob

GitHub - expo/expo-ads-admob

https://github.com/expo/expo-ads-admob

 

공식 문서에서 추천하는 react-native-google-mobile-ads 라이브러리를 사용할 것입니다.

https://github.com/invertase/react-native-google-mobile-ads

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

전체 과정을 단계별로 나누어 본다면 아래와 같습니다.

< AdMob>
1. admob 가입
2. 앱 추가
3. 광고 단위 추가
4. 앱 ID, 광고 단위 ID 발급
</ AdMob>
<Expo>
1. app.json 앱 ID 추가
2. react-native-google-mobile-ads 코드 추가
3. prebuild
4. npx expo run
</Expo>

 

2. google admob

2-1. admob 가입

https://admob.google.com/home/

Google AdMob: 모바일 앱 수익 창출

google에 로그인한 뒤 admob에 가입을 해야 하는데 거주 국가 선택 및 약관 동의, 전화번호 인증까지 하면 가입은 간단하게 완료됩니다.

가입: 약관 동의

가입: 전화번호 인증

2-2. 앱 추가

중앙의 앱 추가 버튼을 클릭합니다.

엡 추가

앱 플랫폼을 선택하고, 현재 앱이 Play Store 혹은 App Store에 등록이 되어있는지 체크해 줍니다.

플랫폼

등록이 되어있지 않다면 앱 이름을 임의로 설정해 주시고, 이미 배포가 되어있다면 배포된 앱을 선택해 주시면 됩니다.

배포되지 않은 앱

배포된 앱

2-3. 광고 단위 추가

앱이 정상적으로 추가되었다면 광고 단위를 추가해주어야 합니다.

광고 단위 추가

우선 Banner (배너) 광고를 추가해 보겠습니다.

광고 단위 종류

해당 포스트에선 Expo SDK 51 + react-native-google-mobile-ads 14.2.5 버전을 기준으로
Banner (배너), Rewared (리워드) 광고만 확인해 보았습니다. 그 외 나머지 광고들은 테스트가 필요합니다.

 

광고 단위 이름을 입력하고 생성하면 완료됩니다.

banner 광고 단위 추가

2-4. 앱 ID, 광고 단위 ID 발급

광고 단위 추가가 완료되면 중간에 ~가 들어가는 앱 ID와 /가 들어가는 광고 단위 ID를 발급받을 수 있습니다.

ID 발급

두 ID를 발급 받았다면 AdMob에서 작업은 모두 완료되었습니다.

 

3. Expo AdMob

3-1. app.json 수정

일반적으로 react native에서 google admob을 사용하려면 네이티브를 직접 수정해 적용할 수 있지만, Expo는 eject 하지 않고 네이티브 코드를 수정할 수 없습니다. 하지만 react-native-google-ads는 react native cli와 Expo 둘 다 사용 가능한 라이브러리이기 때문에 eject 하지 않아도, 네이티브 코드를 수정하지 않아도 적용이 가능합니다.

https://docs.page/invertase/react-native-google-mobile-ads

React Native Google Mobile Ads

 

공식문서 설치 방법대로 우선 라이브러리를 설치해 줍니다.

npx expo install react-native-google-mobile-ads

라이브러리 설치

앱 ID를 Expo 앱에 등록하기 위해 app.json 파일에 아까 발급 받은 앱 ID를 추가해 주세요.

추가할 때 경로에 주의하시기 바랍니다.

앱 ID는 중간에 '~'이 들어갑니다.
만약 iOS도 추가하고 싶다면, 2-2 단계에서 플랫폼 중 iOS를 선택 해 추가해 주세요.

// app.json

{
  "expo": {
    "plugins": [
      [
        "react-native-google-mobile-ads",
        {
          "androidAppId": "ca-app-pub-xxxxxxxx~xxxxxxxx",
          "iosAppId": "ca-app-pub-xxxxxxxx~xxxxxxxx"
        }
      ]
    ]
  }
}

 

앱 ID 명시

 

* iOS 플랫폼을 사용하는 경우 아래 코드를 추가해 주세요.

iOS는 일반적으로 동적 프레임워크를 사용하는데, 앱 메모리 관리, 성능 향상을 위해 정적 프레임워크를 사용하는 경우도 있습니다.

 

// app.json

{
  "expo": {
    "plugins": [
      [
        "expo-build-properties",
        {
          "ios": {
            "useFrameworks": "static"
          }
        }
      ]
    ]
  }
}

 

iOS 정적 프레임워크 적용

 

3-2. 코드 추가

베너가 항상 보이게 탭 네비게이션 하단에 추가해 보았습니다. (tabs/_layout.tsx)

// 예제 코드

import {Tabs} from 'expo-router';
import React, {useRef} from 'react';
import {TabBarIcon} from '@/components/navigation/TabBarIcon';
import {Colors} from '@/constants/Colors';
import {useColorScheme} from '@/hooks/useColorScheme';
import {
  BannerAd,
  BannerAdSize,
  TestIds,
  useForeground,
} from 'react-native-google-mobile-ads';
import {Platform} from 'react-native';

export default function TabLayout() {
  const colorScheme = useColorScheme();
  
  // 광고 단위 ID
  // 개발 단계일 경우 테스트 단위 ID
  // 배포 단계일 경우 실제 광고 단위 ID
  const adUnitId = __DEV__
    ? TestIds.ADAPTIVE_BANNER
    : 'ca-app-pub-xxxxxxxxxxxxx/yyyyyyyyyyyyyy';
  const bannerRef = useRef<BannerAd>(null);

  // iOS의 경우 앱이 백그라운드에서 포그라운드로 돌아왔을 때 광고 배너가 비어있는 것을 방지
  useForeground(() => {
    Platform.OS === 'ios' && bannerRef.current?.load();
  });

  return (
    <>
      <Tabs...
      </Tabs>
      <BannerAd
        ref={bannerRef}
        // 광고 단위 ID
        unitId={adUnitId}
        // 베너 광고 크기
        size={BannerAdSize.ANCHORED_ADAPTIVE_BANNER}
      />
    </>
  );
}

 

3-3. prebuild

prebuild의 개념과 하는 이유를 이해하기 위해서 우선 npx expo start와 npx expo run의 차이를 알아야 합니다.

// package.json scripts를 변경하지 않았다는 전제 하에

npx expo start : Expo 개발 서버 실행 = 설치 없이 Expo go 앱을 통해 시뮬레이션 가능

npx expo run : 네이티브 코드를 빌드하고 Expo go가 아닌 실제 앱을 에뮬레이터/시뮬레이터 혹은 실물 디바이스에 설치

이 모듈에는 Expo Go에서 지원하지 않는 사용자 지정 네이티브 코드가 포함되어 있습니다.

 

앞서 app.json에 추가했던 앱 ID를 포함해 네이티브 코드를 react-native-google-mobile-ads 라이브러리에서 수정하게 되는데 이런 기능이 필요한 경우 Expo go에선 확인이 불가능하고 앱을 빌드해서 독립적인 앱으로 설치를 해야 라이브러리를 사용할 수 있습니다.

 

만약 네이티브 코드 빌드 없이 npx expo start -> Expo go 앱 실행 시 아래와 같은 에러가 발생합니다.

 ERROR  Invariant Violation: TurboModuleRegistry.getEnforcing(...): 'RNGoogleMobileAdsModule' could not be found.

Expo go로 시뮬레이션 시 에러

따라서 네이티브 코드를 포함하는 라이브러리를 사용할 경우 prebuild 후 앱을 설치해야 합니다.

네이티브 코드를 수정한다는 점에서 eject과 비슷하지만 prebuild를 한다고 해서 Expo를 사용 못하는 것이 아닙니다. 
prebuild 후에도 Expo를 계속 사용할 수 있고, Expo go도 사용 가능합니다.

* 하지만 이번 라이브러리와 같이 prebuld가 필요한 부분들은 모두 주석 처리 또는 지워야 Expo go를 계속 사용할 수 있습니다.

 

npx expo prebuild

프리빌드 방식은 두 가지(로컬, Expo 클라우드 EAS)가 있는데 지금은 로컬에 빌드를 직접 하는 프리빌드 방법을 사용했습니다.

 

prebuild에 성공하면 루트 경로에 윈도우의 경우 android, 맥의 경우 android + ios 폴더가 생성되고, app.json에 작성한 애드몹 ID가 네이티브에 추가되었을 것입니다.

android의 경우

android / app / src / main / AndroidManifest.xml 파일에 명시됩니다.

.
.
.
<meta-data android:name="com.google.android.gms.ads.APPLICATION_ID" android:value="ca-app-pub-00000000~000000" tools:replace="android:value"/>
.
.
.​

 

3-4. npx expo run

prebuild가 성공적으로 됐다면, npx expo run 명령어를 통해 앱을 설치할 수 있습니다.

단, EAS 방식이 아닌 로컬에 직접 빌드할 경우 윈도우는 android만 가능하고 맥에서는 android, iOS 둘 다 가능합니다.

expo go 앱을 통해 앱 설치 없이 시뮬레이션하는 것과 다른 방식입니다.

npx expo run

처음 빌드를 하게 되면 필요한 파일을 생성하기 때문에 시간이 조금 소요됩니다.

아래와 같이 SUCCESSFUL 메세지가 나온다면 빌드는 성공적으로 된 것입니다.

BUILD SUCCESSFUL in 48s
554 actionable tasks: 39 executed, 4 from cache, 511 up-to-date
Starting Metro Bundler

---

 

google admob test banner

테스트 광고가 정상적으로 잘 나온다면 성공입니다.

이제 단위 ID에 실제로 받은 ID를 넣어봅시다.

  <BannerAd
        // unitId={adUnitId}
        unitId="ca-app-pub-0000000000/000000000"
        size={BannerAdSize.ANCHORED_ADAPTIVE_BANNER}
        requestOptions={{
          requestNonPersonalizedAdsOnly: true,
          networkExtras: {
            collapsible: 'bottom',
          },
        }}
      />

googel admob ad banner

실제 단위 ID를 넣게 되면 admob에서 제공하는 광고를 확인할 수 있습니다.

앱을 배포하기 전까진 되도록이면 Test ID를 사용하는 것을 추천합니다. 개발 단계에서 실제 ID를 넣으면 google admob에서 비정상적인 광고 수익으로 판단할 수 있습니다.

 

4. 광고 배너 크기

광고 배너 크기를 변경하고 싶다면 BannerAd의 size를 변경하면 됩니다.

1. BannerAdSize.BANNER : 320*50px 표준 배너

2. BannerAdSize.LARGE_BANNER : 320*100px

3. BannerAdSize.MEDIUM_RECTANGLE : 300*250px

4. BannerAdSize.FULL_BANNER : 468*60px

5. BannerAdSize.LEADERBOARD : 728*90px

6. BannerAdSize.SMART_BANNER: 가로 너비에 맞게 자동 조절

7. BannerAdSize.ADAPTIVE_BANNER: 가로 너비에 맞는 높이를 가진 배너

8. BannerAdSize.ANCHORED_ADAPTIVE_BANNER: 가로 너비에 맞는 높이를 갖고, 방향에 따라 동적으로 조절

 <BannerAd
        unitId={adUnitId}
        
        // size 수정
        size={BannerAdSize.ANCHORED_ADAPTIVE_BANNER}
        
        requestOptions={{
          requestNonPersonalizedAdsOnly: true,
          networkExtras: {
            collapsible: 'bottom',
          },
        }}
      />