React-native로 만든 앱에 광고 넣기(Android) with react-native-admob

RN으로 아주 간단한 스톱와치 앱을 하나 만들었습니다. 스토어에 올릴 겸 Google AdMob을 이용하여 광고를 넣어 볼려고 합니다. Android에서만 적용 시킬 예정입니다. firebase를 이용하지 않고 react-native-admob 라이브러리를 이용하여 매우 간단하게 가능합니다!

먼저 react-native-admob 라이브러리를 설치합니다.

npm install react-native-admob@next --save

설치가 완료되면 프로젝트 폴더 경로에서 아래에 명령어로 라이브러리와 연결합니다. (react-native를 설치하시지 않으셨다면 npx로 실행하세요.)

react-native link react-native-admob

 

이제 Admob의 app ID와 배너의 ad unit ID가 필요합니다. AdMob에 회원가입 후 앱을 추가 하신 뒤 원하는 광고를 만드셔서 두 가지의 ID를 잘 복사 해두시면 됩니다. 이 방법은 매우 간단하니 인터넷에 찾아보면 금방 나옵니다. apps.admob.com/

프로젝트 경로 중 /android/app/src/main에 있는 AndroidManifest.xml 파일을 엽니다. 아래의 값을 추가하시면 됩니다. android:value 부분에 자신의 admob app id를 넣어줍니다. <application> 태그는 이미 있을테니 그 안에 <meta-data> 태그만 추가시켜주시며 됩니다.

<manifest>
    <application>
        <meta-data
            android:name="com.google.android.gms.ads.APPLICATION_ID"
            android:value="ca-app-pub-xxxxxxxxxxxxxxxx~yyyyyyyyyy"/>
    </application>
</manifest>

이제 앱에 애드몹을 넣기만 하면 됩니다. 먼저 광고배너 컴포넌트 하나를 상단에서 임포트합니다. (github.com/sbugert/react-native-admob/tree/master/Example)

import { AdMobBanner } from 'react-native-admob';

 

배너를 표시하고 싶은 위치에 컴포넌트를 붙여 넣습니다. adUnitID는 전에 복사해둔 ad ID를 붙혀넣습니다.

<AdMobBanner
adSize="fullBanner"
adUnitID="자신의 ad unit ID"
testDevices={[AdMobBanner.simulatorId]}
onAdFailedToLoad={error => console.log(error)} />

 

adSize: 광고의 사이즈를 결정합니다.더 자세한 내용은 라이브러리 github을 참고해주시면 됩니다.

이제 광고가 잘 표시되는지 확인합니다!!! 

혹시 [Error: The ad request was successful, but no ad was returned due to lack of ad inventory.] 오류가 뜬다면 일단 연결은 잘 된것입니다. 아마 추측하기론 앱을 추가한지 얼마 안되면 트레픽이 부족해서 광고가 안 뜨는 현상같습니다. https://developers.google.com/admob/android/test-ads#sample_ad_units 여기서 테스트 광고 유닛 id를 붙혀보시면 뜨게 될 겁니다. 출시하기 전까지는 이 아이디로 테스트하시고 출시시에 생성한 광고 id로 바꾸어 출시하세요.

성공적으로 admob이 연결됨!