React Native 광고 삽입하기
2021. 6. 17. 20:28ㆍcoding
반응형
아직 PlayStore에 업로드 하지 않은 어플도 광고 ID는 받을 수 있다
근데 안드랑 IOS 어플을 따로따로 두 번 만들어줘야 한다
배너 광고를 띄우면 어플이 못생겨지는 느낌이라 어플 열 때 한 번만 전면 광고가 나오도록 설정했다
1. 구글 AdMob 가입
https://admob.google.com/intl/ko/home/
이것 저것 선택하고 (대부분 디폴트 값으로)
통화는 고민하다가 원화로 하면 수수료가 더 나간다길래 달러로 받기로 했다
2. 광고 단위 선택하기
난 앞서 말한 이유로 전면광고 하나만 선택했다
expo에선 이걸 Interstitial이라고 부르는 듯
3. app.json (configure 파일) 수정하기
"ios": {
...
"config": {
"googleMobileAdsAppId": [광고ID]
}
},
"android": {
...
"config": {
"googleMobileAdsAppId": [광고ID]
}
},
4. App.js 파일 수정하기
당연히 import 하려면
npm i expo-ads-admob 먼저 해주어야 한다
import { AdMobInterstitial} from 'expo-ads-admob';
export default class extends React.Component {
...
// 전면 광고 띄우기
// 현재 ID는 테스트용이라 실제 광고가 안 나온다
// 실제 ID 쓰면서 테스트하면 광고가 막힌다더라?
displayInterstitial = async () => {
await AdMobInterstitial.setAdUnitID('ca-app-pub-3940256099942544/1033173712'); // Test ID, Replace with your-admob-unit-id
await AdMobInterstitial.requestAdAsync();
await AdMobInterstitial.showAdAsync();
}
// 처음에만 광고 띄우기
componentDidMount() {
this.displayInterstitial();
}
render() {
...
}
여기까지 완료하면 expo에서 어플 실행, 새로고침 할 때마다 이렇게 샘플 광고가 뜬다 ~~
반응형
'coding' 카테고리의 다른 글
React Native 어플 안에서 소리 재생하기 (0) | 2021.06.25 |
---|---|
React Native <Text> 길이 제한하기 (0) | 2021.06.21 |
React Native 내가 다운받은 폰트 파일 적용하기 (0) | 2021.06.17 |
난생 처음 서버 쓰기 (0) | 2021.04.21 |
유용한 코딩 단축키 모음 (0) | 2021.04.08 |