좌충우돌 개발 블로그

AdMob에서 정책을 위반하고 있다는 메일을 받았다.

그래서 정책 센터에서 자세한 내용을 살펴보니 전면 광고의 문제였다.

기존의 전면 광고 노출 시점은 스플래시 화면 -> 콘텐츠 로드 -> 전면 광고 순이었다.

코드 상으로는 스플래시 화면 다음에 바로 전면 광고가 노출되는 것이었는데

실제로는 타이밍 이슈가 있어 콘텐트가 보이고 나서 노출되고 있었다.

콘텐츠가 보이고 나서 전면 광고가 노출되는 것이

의도하지 않은 클릭을 유도하는 레이아웃이라고 판단한 것이라 생각했다.

그래서 해결하기 위해서 스플래시 화면 다음에 바로 전면 광고가 나오도록 해야할 것 같았다.

하지만 React Native에서 스플래시 화면 다음에 바로 전면 광고가 나오도록 하는 것이 어려웠다.

첫번째로 광고를 호출하는 데 걸리는 시간이 있었고

두번째로 메인 화면이 렌더링되어 노출되는 것을 막는 것이 어려웠다.

그래서 AdMob 고객 센터의 구현 지침에서 허용되지 않는 전면 광고 구현을 다시 한번 자세히 읽어보았다.

허용되지 않은 방법

해결 방법

위의 해결 방법을 자세히 보고 나서 전면 광고 노출 시점을

스플래시 화면 -> 로딩 중 -> 전면 광고 -> 콘텐츠 로드 순으로 변경했다.

변경하여 플레이 스토어에 배포를 한 다음 AdMob에 검토 요청을 했다.

검토 요청을 하는데 일주일 걸릴 수도 있다고 해서 기다리고 있었는데 금방 검토 메일이 날아왔다.

"검토한 결과 정책 위반이 발견되지 않았습니다"라는 메일을 받았다.

참고 문헌

1. https://support.google.com/admob/answer/6201362

기존에 사용하던 라이브러리로 AdMob 광고를 표시하고 있었는데

정책 위반 메일을 받아서 이를 처리할 필요가 있었다.

그래서 react-native-admob 저장소에서 문서를 읽어봤다.

isReady 메소드로 처리가 가능하겠다는 생각이 들었다.

그러다 우연히 react-native-firebase에서 AdMob 라이브러리가 생긴 것을 확인했다.

기존에 사용하던 것은 아직 beta였지만

react-native-firebase에서는 정식 버전이라 더 안정적으로 보여 변경하기로 했다.

$ npm install @react-native-firebase/admob
$ react-native link @react-native-firebase/admob

프로젝트 디렉토리에 firebase.json을 만들고 다음을 추가한다.

{
  "react-native": {
    "admob_android_app_id": "ca-app-pub-xxxxxxxx~xxxxxxxx",
    "admob_ios_app_id": "ca-app-pub-xxxxxxxx~xxxxxxxx"
  }
}

사용법은 다음과 같다.

import {
  AdEventType,
  BannerAd,
  BannerAdSize,
  InterstitialAd,
  TestIds
} from '@react-native-firebase/admob'

const interstitialAd = InterstitialAd.createForAdRequest(TestIds.INTERSTITIAL);
interstitial.onAdEvent((type) => {
    if (type === AdEventType.LOADED) {
        interstitial.show();
    }
}
interstitial.load();

<BannerAd
  unitId={TestIds.BANNER}
  size={BannerAdSize.SMART_BANNER}
  requestOptions={{
    requestNonPersonalizedAdsOnly: true,
  }}
  onAdLoaded={() => {
    console.log('Advert loaded');
  }}
  onAdFailedToLoad((error) => {
    console.error('Advert failed to load: ', error);
  })
/>

참고 문헌

1. https://github.com/invertase/react-native-firebase/tree/master/packages/admob

react-native로 만든 앱에 광고를 넣기 위해 react-native-admob을 사용했다.(안드로이드만 사용)

$ npm i --save react-native-admob@next
$ react-native link react-native-admob@next

android/app/build.gradle에 다음을 추가한다.

dependencies {
    ...
    implementation "com.google.firebase:firebase-core:17.0.0"
    implementation "com.google.firebase:firebase-ads:17.2.1"
}

사용법은 다음과 같다.

import {
  AdMobBanner,
  AdMobInterstitial,
  PublisherBanner,
  AdMobRewarded,
} from 'react-native-admob'

// 배너 광고
<AdMobBanner
  adSize="fullBanner"
  adUnitID="your-admob-unit-id"
  testDevices={[AdMobBanner.simulatorId]}
  onAdFailedToLoad={error => console.error(error)}
/>

// DFP(Doubleclick For Publisher) - 조건을 상세하게 커스터마이징할 수 있는 배너
<PublisherBanner
  adSize="fullBanner"
  adUnitID="your-admob-unit-id"
  testDevices={[PublisherBanner.simulatorId]}
  onAdFailedToLoad={error => console.error(error)}
  onAppEvent={event => console.log(event.name, event.info)}
/>

// 전면 광고
AdMobInterstitial.setAdUnitID('your-admob-unit-id');
AdMobInterstitial.setTestDevices([AdMobInterstitial.simulatorId]);
AdMobInterstitial.requestAd().then(() => AdMobInterstitial.showAd());

// 리워드 광고
AdMobRewarded.setAdUnitID('your-admob-unit-id');
AdMobRewarded.requestAd().then(() => AdMobRewarded.showAd());

배너 광고를 추가한 뒤 에뮬레이터로 확인하면 경고가 뜨는데 이 경우엔 다음과 같이 하면 해결할 수 있다.

node_modules/react-native-admob/RNAdMobBanner.js에서

UIManager.RNGADBannerView.Commands.loadBanner를

UIManager.getViewManagerConfig('RNGADBannerView').Commands.loadBanner로 변경하면 된다.

27  loadBanner() {
28    UIManager.dispatchViewManagerCommand(
29      findNodeHandle(this._bannerView),
30      UIManager.getViewManagerConfig('RNGADBannerView').Commands.loadBanner,
31      null,
32    );
33  }

참고 문헌

1. https://github.com/sbugert/react-native-admob/issues/339