React Native 에서 Admob 사용방법 / 광고 다는 방법

Admobs란

 

대부분의 무료 어플에서 광고를 이용할 때 사용하는 구글의 AdMob이라는 모바일 광고입니다.

 

https://admob.google.com/intl/ko_ALL/home//?gclsrc=ds&gclsrc=ds 

Google AdMob: 모바일 앱 수익 창출

 

1. 설치

 

expo install expo-ads-admob

2. 파일에 코드 추가

 

2-1. IOS 의 앱의 경우

ios의 유저는 설치해주어야 합니다

npx pod-install

 

<key>GADApplicationIdentifier</key>
<string>ca-app-pub-3940256099942544~1458002511</string>

ios의 파일에서 Info.plist에 위의 코드를 붙여 넣기 해줍니다.

string 태그에 있는 키는 데모키 입니다. 계정을 생성하시고 바꾸셔야 합니다.

 

 

<key>NSUserTrackingUsageDescription</key>
<string>This identifier will be used to deliver personalized ads to you.</string>

위의 코드도 붙혀넣기 해줍니다

 

 

<key>SKAdNetworkItems</key>
  <array>
    <dict>
      <key>SKAdNetworkIdentifier</key>
      <string>cstr6suwn9.skadnetwork</string>
    </dict>
    <dict>
      <key>SKAdNetworkIdentifier</key>
      <string>4fzdc2evr5.skadnetwork</string>
    </dict>
    <dict>
      <key>SKAdNetworkIdentifier</key>
      <string>2fnua5tdw4.skadnetwork</string>
    </dict>
    <dict>
      <key>SKAdNetworkIdentifier</key>
      <string>ydx93a7ass.skadnetwork</string>
    </dict>
    <dict>
      <key>SKAdNetworkIdentifier</key>
      <string>5a6flpkh64.skadnetwork</string>
    </dict>
    <dict>
      <key>SKAdNetworkIdentifier</key>
      <string>p78axxw29g.skadnetwork</string>
    </dict>
    <dict>
      <key>SKAdNetworkIdentifier</key>
      <string>v72qych5uu.skadnetwork</string>
    </dict>
    <dict>
      <key>SKAdNetworkIdentifier</key>
      <string>c6k4g5qg8m.skadnetwork</string>
    </dict>
    <dict>
      <key>SKAdNetworkIdentifier</key>
      <string>s39g8k73mm.skadnetwork</string>
    </dict>
    <dict>
      <key>SKAdNetworkIdentifier</key>
      <string>3qy4746246.skadnetwork</string>
    </dict>
    <dict>
      <key>SKAdNetworkIdentifier</key>
      <string>3sh42y64q3.skadnetwork</string>
    </dict>
    <dict>
      <key>SKAdNetworkIdentifier</key>
      <string>f38h382jlk.skadnetwork</string>
    </dict>
    <dict>
      <key>SKAdNetworkIdentifier</key>
      <string>hs6bdukanm.skadnetwork</string>
    </dict>
    <dict>
      <key>SKAdNetworkIdentifier</key>
      <string>prcb7njmu6.skadnetwork</string>
    </dict>
    <dict>
      <key>SKAdNetworkIdentifier</key>
      <string>v4nxqhlyqp.skadnetwork</string>
    </dict>
    <dict>
      <key>SKAdNetworkIdentifier</key>
      <string>wzmmz9fp6w.skadnetwork</string>
    </dict>
    <dict>
      <key>SKAdNetworkIdentifier</key>
      <string>yclnxrl5pm.skadnetwork</string>
    </dict>
    <dict>
      <key>SKAdNetworkIdentifier</key>
      <string>t38b2kh725.skadnetwork</string>
    </dict>
    <dict>
      <key>SKAdNetworkIdentifier</key>
      <string>7ug5zh24hu.skadnetwork</string>
    </dict>
    <dict>
      <key>SKAdNetworkIdentifier</key>
      <string>9rd848q2bz.skadnetwork</string>
    </dict>
    <dict>
      <key>SKAdNetworkIdentifier</key>
      <string>n6fk4nfna4.skadnetwork</string>
    </dict>
    <dict>
      <key>SKAdNetworkIdentifier</key>
      <string>kbd757ywx3.skadnetwork</string>
    </dict>
    <dict>
      <key>SKAdNetworkIdentifier</key>
      <string>9t245vhmpl.skadnetwork</string>
    </dict>
    <dict>
      <key>SKAdNetworkIdentifier</key>
      <string>4468km3ulz.skadnetwork</string>
    </dict>
    <dict>
      <key>SKAdNetworkIdentifier</key>
      <string>2u9pt9hc89.skadnetwork</string>
    </dict>
    <dict>
      <key>SKAdNetworkIdentifier</key>
      <string>8s468mfl3y.skadnetwork</string>
    </dict>
    <dict>
      <key>SKAdNetworkIdentifier</key>
      <string>av6w8kgt66.skadnetwork</string>
    </dict>
    <dict>
      <key>SKAdNetworkIdentifier</key>
      <string>klf5c3l5u5.skadnetwork</string>
    </dict>
    <dict>
      <key>SKAdNetworkIdentifier</key>
      <string>ppxm28t8ap.skadnetwork</string>
    </dict>
    <dict>
      <key>SKAdNetworkIdentifier</key>
      <string>424m5254lk.skadnetwork</string>
    </dict>
    <dict>
      <key>SKAdNetworkIdentifier</key>
      <string>uw77j35x4d.skadnetwork</string>
    </dict>
    <dict>
      <key>SKAdNetworkIdentifier</key>
      <string>578prtvx9j.skadnetwork</string>
    </dict>
    <dict>
      <key>SKAdNetworkIdentifier</key>
      <string>4dzt52r2t5.skadnetwork</string>
    </dict>
    <dict>
      <key>SKAdNetworkIdentifier</key>
      <string>e5fvkxwrpn.skadnetwork</string>
    </dict>
    <dict>
      <key>SKAdNetworkIdentifier</key>
      <string>8c4e2ghe7u.skadnetwork</string>
    </dict>
    <dict>
      <key>SKAdNetworkIdentifier</key>
      <string>zq492l623r.skadnetwork</string>
    </dict>
    <dict>
      <key>SKAdNetworkIdentifier</key>
      <string>3qcr597p9d.skadnetwork</string>
    </dict>
  </array>

 

위의 코드또한 Info.plist에 넣어줍니다

 

IOS는 세팅이 끝났습니다.

 

 

2-2. 안드로이드 어플의 경우

 

 

android/app/src/main/AndroidManifest.xml의 파일에서 application 안쪽에 넣어주시면 됩니다

 <meta-data
      android:name="com.google.android.gms.ads.APPLICATION_ID"
      android:value="ca-app-pub-3940256099942544~3347511713"/> <!-- App ID -->

 

name과 value는 계정을 생성하셨으면 key값을 줄 것입니다.

위의 코드는 샘플이기 때문에 교체하여야 합니다.

 

 

 

또한 파일안에 다음과 같은 코드가 있어야 합니다

  <uses-permission android:name="android.permission.INTERNET" />

저의 경우에는 CRNA로 생성하였는데 이미 있어서 따로 추가하지 않았습니다.

 

3. 사용방법

아래의 코드를 보면 adUnitID 가 필요합니다. 그렇지만 이제 저희가 시뮬레이션할 때 계정에 생성된 진짜 코드를 사용하면 악의적으로 프로그램을 돌려 광고 수익을 내는 것이라고 판단해서 계정 밴을 먹인다고 합니다. 따라서 구글에서 제공하는 유닛 코드를 이용하여 시뮬레이션을 돌리고 배포할 때는 진짜 코드로 바꾸어서 작업하시면 될 것 같습니다.

 

또한 테스트할때의 아이디는 다음과 같이 설정하여야 합니다

 

// Set global test device ID
await setTestDeviceIDAsync('EMULATOR');

 

import {
  AdMobBanner,
  AdMobInterstitial,
  PublisherBanner,
  AdMobRewarded,
  setTestDeviceIDAsync,
} from 'expo-ads-admob';

// Set global test device ID
await setTestDeviceIDAsync('EMULATOR');

// Display a banner
<AdMobBanner
  bannerSize="fullBanner"
  adUnitID="ca-app-pub-3940256099942544/6300978111" // Test ID, Replace with your-admob-unit-id
  servePersonalizedAds // true or false
  onDidFailToReceiveAdWithError={this.bannerError} />

// Display a DFP Publisher banner
<PublisherBanner
  bannerSize="fullBanner"
  adUnitID="ca-app-pub-3940256099942544/6300978111" // Test ID, Replace with your-admob-unit-id
  onDidFailToReceiveAdWithError={this.bannerError}
  onAdMobDispatchAppEvent={this.adMobEvent} />

// Display an interstitial
await AdMobInterstitial.setAdUnitID('ca-app-pub-3940256099942544/1033173712'); // Test ID, Replace with your-admob-unit-id
await AdMobInterstitial.requestAdAsync({ servePersonalizedAds: true});
await AdMobInterstitial.showAdAsync();

// Display a rewarded ad
await AdMobRewarded.setAdUnitID('ca-app-pub-3940256099942544/5224354917'); // Test ID, Replace with your-admob-unit-id
await AdMobRewarded.requestAdAsync();
await AdMobRewarded.showAdAsync();

 

• Here is the full list of Test IDs
  • iOS Test IDs
  • Android Test IDs

 

 

IOS와 Andriod의 테스트 아이디가 다릅니다.

 

 

사용방법 중 광고 동영상을 보면 보상을 주는 방법을 예시로 들자면 광고를 다 보고 닫기를 눌렀을 때 글이 작성되고 뒤로 돌아가지는 것을 넣었습니다.

 

  const onSubmit = async () => {
    if (selectedEmotion === '' || feelings === '') {
      return Alert.alert('Please complete form.');
    }

    await AdMobRewarded.setAdUnitID('ca-app-pub-3940256099942544/5224354917'); // Test ID, Replace with your-admob-unit-id
    await AdMobRewarded.requestAdAsync();
    await AdMobRewarded.showAdAsync();
    AdMobRewarded.addEventListener('rewardedVideoUserDidEarnReward', () => {
      AdMobRewarded.addEventListener('rewardedVideoDidDismiss', () => {
        realm.write(() => {
          realm.create('Feeling', {
            _id: Date.now(),
            emotion: selectedEmotion,
            message: feelings,
          });
        });
        goBack();
      });
    });
  };

 

 

사용하고 싶은 광고의 종류의 자세한 옵션 주는 것은 여기에서 참고하시면 될 것 같습니다

 

https://docs.expo.dev/versions/latest/sdk/admob/

Admob - Expo Documentation

 

 

참고 자료

 

GitHub - expo/expo: An open-source platform for making universal native apps with React. Expo runs on Android, iOS, and the web.

 

시작하기  |  Android  |  Google Developers

 

iOS 14 이상에 대비하기  |  Google Developers