https://docs.page/invertase/react-native-google-mobile-ads
React Native Google Mobile Ads
docs.page
ios, android
react native에서 셋팅하는 법~!
1. 설치하기
# Install the admob module
yarn add react-native-google-mobile-ads2.
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"
}
}
각 앱 id는 애드몹에서 받아와야한다.
애드몹 계정 생성하기~!
(참고로 애드몹 계정 생성할 때 개인/법인 잘 선택해야함. 계좌 유형에서 개인에서 법인으로 바꾸고 싶었는데 안되어서
삭제하고 다시 만듦...유형 바꿀 수 없다고 해서!!!)
3. 애드몹 계정 생성 후 앱 ID 받아서 app.json파일에 넣기
앱추가하기: 앱 > 앱 추가
앱 ID 받아오기 : 앱> 앱 설정 > 앱 ID
4. SKAdNetwork를 활성화하여 전환 추적(iOS)
"Google 모바일 광고 SDK는 IDFA를 사용할 수 없는 경우에도 Google 및 참여하는 제3자 구매자가 앱 설치를 기여할 수 있는 Apple의 SKAdNetwork를 사용하여 전환 추적을 지원합니다. 프로젝트 app.json 파일 내에서 50개의 필수 SKAdNetwork 식별자를 추가합니다."
아래처럼 추가
{
"react-native-google-mobile-ads": {
"android_app_id": "ca-app-pub-xxxxxxxx~xxxxxxxx",
"ios_app_id": "ca-app-pub-xxxxxxxx~xxxxxxxx",
"sk_ad_network_items": [
"cstr6suwn9.skadnetwork",
"4fzdc2evr5.skadnetwork",
"4pfyvq9l8r.skadnetwork",
"2fnua5tdw4.skadnetwork",
"ydx93a7ass.skadnetwork",
"5a6flpkh64.skadnetwork",
"p78axxw29g.skadnetwork",
"v72qych5uu.skadnetwork",
"ludvb6z3bs.skadnetwork",
"cp8zw746q7.skadnetwork",
"c6k4g5qg8m.skadnetwork",
"s39g8k73mm.skadnetwork",
"3qy4746246.skadnetwork",
"3sh42y64q3.skadnetwork",
"f38h382jlk.skadnetwork",
"hs6bdukanm.skadnetwork",
"prcb7njmu6.skadnetwork",
"v4nxqhlyqp.skadnetwork",
"wzmmz9fp6w.skadnetwork",
"yclnxrl5pm.skadnetwork",
"t38b2kh725.skadnetwork",
"7ug5zh24hu.skadnetwork",
"9rd848q2bz.skadnetwork",
"y5ghdn5j9k.skadnetwork",
"n6fk4nfna4.skadnetwork",
"v9wttpbfk9.skadnetwork",
"n38lu8286q.skadnetwork",
"47vhws6wlr.skadnetwork",
"kbd757ywx3.skadnetwork",
"9t245vhmpl.skadnetwork",
"a2p9lx4jpn.skadnetwork",
"22mmun2rn5.skadnetwork",
"4468km3ulz.skadnetwork",
"2u9pt9hc89.skadnetwork",
"8s468mfl3y.skadnetwork",
"av6w8kgt66.skadnetwork",
"klf5c3l5u5.skadnetwork",
"ppxm28t8ap.skadnetwork",
"424m5254lk.skadnetwork",
"ecpz2srf59.skadnetwork",
"uw77j35x4d.skadnetwork",
"mlmmfzh3r3.skadnetwork",
"578prtvx9j.skadnetwork",
"4dzt52r2t5.skadnetwork",
"gta9lk7p23.skadnetwork",
"e5fvkxwrpn.skadnetwork",
"8c4e2ghe7u.skadnetwork",
"zq492l623r.skadnetwork",
"3rd42ekr43.skadnetwork",
"3qcr597p9d.skadnetwork"
]
}
}배너 광고를 쓸 것이기에
5. 애드몹에서 배너광고 생성
앱 > 광고 단위 > 광고 단위 추가
배너 선택해서 추가
추가하면
광고 단위 ID 가 나옴
6. 앱에 배너광고 붙이기
원하는 화면에 다음과 같이 붙이기
ca-app-pub-xxxxxxxxxxxxx/yyyyyyyyyyyyyy 이 자리에
광고 단위 ID 넣기
import React from 'react';
import { BannerAd, BannerAdSize, TestIds } from 'react-native-google-mobile-ads';
const adUnitId = __DEV__ ? TestIds.BANNER : 'ca-app-pub-xxxxxxxxxxxxx/yyyyyyyyyyyyyy';
function App() {
return (
<BannerAd
unitId={adUnitId}
size={BannerAdSize.ANCHORED_ADAPTIVE_BANNER}
requestOptions={{
requestNonPersonalizedAdsOnly: true,
}}
/>
);
}--
나는 android , ios 각각 광고단위ID가 있어서 다음과 같이 넣어줌.
import {Platform } from 'react-native'
const unitId =
Platform.OS === 'ios'
? 'ca-app-pub-....'
: 'ca-app-pub-....'
const Home = ()=>{
return <> <BannerAd
// unitId={TestIds.BANNER}
unitId={unitId}
size={BannerAdSize.ANCHORED_ADAPTIVE_BANNER}
/>
</>
}
export default Home
7. 부정클릭 막기
테스트 기기 등록
앱>설정>기기 테스트
안드로이드: 설정>Google>광고>이 기기의 광고ID
iOS: idfa 추출가능한 앱 설치(예: TUNE) >IFA(IDFA)
이렇게 가져오면 됨. 근데 IOS에서 IFA가 안뜬다?
하면 설정에서
앱 추적 권한을 허용하면 된다~!~!
부정클릭 막는 이유 -
애드몹에서 부정클릭으로 간주하면 앱이 정지될 수 있다고 함!
같은 IP주소도 확인하고 패턴으로 인위적은 클릭을 감지한다고..
--
번외)
이렇게 보면 간단하지만..
ios빌드는 잘되어도
안드로이드 빌드가 상당히 힘들었다..
1. 모듈의 종속성이 중복되어서 일어난 빌드 에러
Duplicate class com.google.android.gms.measurement.internal.zzit found in modules 블라블라
app/build.gradle 파일에서
이런 식으로 해당 라이브러리 쓸 때 중복되는 애들을 제외시키는 exclude를 추가해봤는데도 안되었음
implementation('com.example:my-library:1.0') {
exclude group: 'com.google.android.gms'
}내가 쓰고 있는 모듈의 종속성 확인하는 방법 명령어 (./gradlew clean 이거는 캐시 지우는거~)
cd android && ./gradlew clean && ./gradlew app:dependencies
1-1. 해결방법
app/build.gradle 파일 하단에 이거 추가함
버전을 고정으로 박아둠.
해결책을 chatgpt로 찾았다!
configurations.all {
resolutionStrategy {
force 'com.google.android.gms:play-services-ads:20.4.0'
force 'androidx.work:work-runtime:2.7.0'
}
}2. react-native-google-mobile-ads 라이브러리 말고 다른 대안?
안드로이드 빌드해결 못하고 눈을 돌려 firebase로 애드몹 연동해서 쓸까했지만...
react-native-firebase를 깔고 보니
"Firebase SDK에서 Admob을 더이상 지원하지 않습니다. 따라서 최신 react-native-firebase를 사용하면 Admob을 사용할 수 없습니다."라 해서 다시 원점으로 돌아왔었음.
react-native-admob-native-ads
추가로 찾아본 이 라이브러리는 내가 썼던 애랑 같은 라이브러리라고 함.
'프로젝트' 카테고리의 다른 글
| 도커 테스크탑과 colima (0) | 2024.07.14 |
|---|---|
| 데이터베이스 구조와 다른 객체 구조를 어떻게 다룰지 고민하며 리팩토링(세터 삭제 및 응답객체 분리) (0) | 2024.03.17 |
| [IntelliJ/Mac] org.mariadb.jdbc.Driverjava.lang.ClassNotFoundException: org.mariadb.jdbc.Driver (드라이버 로딩 오류 해결) (0) | 2023.10.18 |
