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
Contribute to expo/expo-ads-admob development by creating an account on GitHub.
github.com
공식 문서에서 추천하는 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.
React Native Google Mobile Ads enables you to monetize your app with AdMob. - invertase/react-native-google-mobile-ads
github.com
전체 과정을 단계별로 나누어 본다면 아래와 같습니다.
< 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: 모바일 앱 수익 창출
인앱 광고를 사용하여 모바일 앱에서 더 많은 수익을 창출하고, 사용이 간편한 도구를 통해 유용한 분석 정보를 얻고 앱을 성장시켜 보세요.
admob.google.com
google에 로그인한 뒤 admob에 가입을 해야 하는데 거주 국가 선택 및 약관 동의, 전화번호 인증까지 하면 가입은 간단하게 완료됩니다.
2-2. 앱 추가
중앙의 앱 추가 버튼을 클릭합니다.
앱 플랫폼을 선택하고, 현재 앱이 Play Store 혹은 App Store에 등록이 되어있는지 체크해 줍니다.
등록이 되어있지 않다면 앱 이름을 임의로 설정해 주시고, 이미 배포가 되어있다면 배포된 앱을 선택해 주시면 됩니다.
2-3. 광고 단위 추가
앱이 정상적으로 추가되었다면 광고 단위를 추가해주어야 합니다.
우선 Banner (배너) 광고를 추가해 보겠습니다.
해당 포스트에선 Expo SDK 51 + react-native-google-mobile-ads 14.2.5 버전을 기준으로
Banner (배너), Rewared (리워드) 광고만 확인해 보았습니다. 그 외 나머지 광고들은 테스트가 필요합니다.
광고 단위 이름을 입력하고 생성하면 완료됩니다.
2-4. 앱 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
Before loading ads, have your app initialize the Google Mobile Ads SDK by calling initialize which initializes the SDK and returns a promise once initialization is complete (or after a 30-second timeout). This needs to be done only once, ideally at app lau
docs.page
공식문서 설치 방법대로 우선 라이브러리를 설치해 줍니다.
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"
}
]
]
}
}
* iOS 플랫폼을 사용하는 경우 아래 코드를 추가해 주세요.
iOS는 일반적으로 동적 프레임워크를 사용하는데, 앱 메모리 관리, 성능 향상을 위해 정적 프레임워크를 사용하는 경우도 있습니다.
npx expo install react-native-google-mobile-adshttps://docs.expo.dev/versions/latest/sdk/build-properties/
BuildProperties
A config plugin that allows customizing native build properties during prebuild.
docs.expo.dev
// app.json
{
"expo": {
"plugins": [
[
"expo-build-properties",
{
"ios": {
"useFrameworks": "static"
}
}
]
]
}
}
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가 아닌 실제 앱을 에뮬레이터/시뮬레이터 혹은 실물 디바이스에 설치
앞서 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.
따라서 네이티브 코드를 포함하는 라이브러리를 사용할 경우 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
테스트 광고가 정상적으로 잘 나온다면 성공입니다.
이제 단위 ID에 실제로 받은 ID를 넣어봅시다.
<BannerAd
// unitId={adUnitId}
unitId="ca-app-pub-0000000000/000000000"
size={BannerAdSize.ANCHORED_ADAPTIVE_BANNER}
requestOptions={{
requestNonPersonalizedAdsOnly: true,
networkExtras: {
collapsible: 'bottom',
},
}}
/>
실제 단위 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',
},
}}
/>본 예제 코드는 아래 리포지토리에 업로드 해두었습니다.
⚠️ 해당 코드 사용 시 반드시 app.json > expo > plugins "react-native-google-mobile-ads" 를
2-4. 앱 ID, 광고 단위 ID 발급에서 발급 받은 키로 수정하고, index.tsx의 adUnitId 변수도 맞게 넣어주시기 바랍니다.
https://github.com/yeonhub/yeonhub-post/tree/admob
GitHub - yeonhub/yeonhub-post
Contribute to yeonhub/yeonhub-post development by creating an account on GitHub.
github.com