React Native 광고 삽입하기

2021. 6. 17. 20:28coding

반응형

아직 PlayStore에 업로드 하지 않은 어플도 광고 ID는 받을 수 있다 

근데 안드랑 IOS 어플을 따로따로 두 번 만들어줘야 한다 

배너 광고를 띄우면 어플이 못생겨지는 느낌이라 어플 열 때 한 번만 전면 광고가 나오도록 설정했다 

 

1. 구글 AdMob 가입

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

 

Google AdMob: 모바일 앱 수익 창출

인앱 광고를 사용하여 모바일 앱에서 더 많은 수익을 창출하고, 사용이 간편한 도구를 통해 유용한 분석 정보를 얻고 앱을 성장시켜 보세요.

admob.google.com

이것 저것 선택하고 (대부분 디폴트 값으로)

통화는 고민하다가 원화로 하면 수수료가 더 나간다길래 달러로 받기로 했다 

 

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에서 어플 실행, 새로고침 할 때마다 이렇게 샘플 광고가 뜬다 ~~ 

 

반응형