안드로이드 cordova admob 적용하기

Javascript 로 개발을 알아서 잘 하실거라고 생각하고

앱을 개발하면서 수익을 내기 위해 admob 을 적용시키는 과정을 공유드립니다.
제가 직접 적용했던 소스코드 및 플러그인도 공유드립니다.

필요준비물

1. admob 사이트 가입 및 앱 ID 획득
앱 ID ( cordova 플러그인 설치 시 필요 )
배너광고 ID, 전면광고 ID, 리워드광고 ID ( 소스코드에 적용시 필요 )
개발을 할 때는 테스트 ID로 개발을 진행해야 합니다
한 번(?)이라도 실계정ID 로 테스트 하면 계정이 약 1달 간 중지됩니다 https://developers.google.com/admob/android/test-ads?hl=ko

네이티브 광고는 cordova로 지원되지 않습니다(직접 개발하면 가능할지도..)

2. cordova admob 플러그인 라이브러리

https://github.com/ratson/cordova-plugin-admob-free

자 진행해보겠습니다.

1. admob 사이트를 가입합니다. - https://admob.google.com/

Google AdMob: 모바일 앱 수익 창출

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

admob.google.com

가입을 하고 나면 메인화면에서 좌측에 [앱 - 앱 추가] 클릭하여 본인이 만들 앱 이름을 작성하고 생성해줍니다.
앱을 Google Play 또는 App Store에 게시하셨나요?
- 우선은 [아니요] 라고 선택해서 다음을 진행합니다 ( 앱 배포를 하고나서 연결이 가능합니다 )
- 아래의 화면 처럼 앱이름을 적당히 작성하고 [추가]를 선택

[앱 - 광고 단위 - 광고 단위 추가]로 들어가서 각각의 광고 단위를 생성

ca-app-pub-XXXXXXXXXXXXXXXX/YYYYYYYYYYYY 등의 ID가 생성

[앱 - 앱 설정] 의 앱 ID를 잘 기억 복사해 줍니다

2. cordova admob 라이브러리

여러 라이브러리를 찾아보던 중 아래의 오픈소스가 가장 적절

다른 cordova admob 라이브러리는 광고로 벌어들인 수입을 원작자에게 공유하게 끔 되어 있고

아래의 라이브러리는 무료입니다

https://github.com/ratson/cordova-plugin-admob-free

ratson/cordova-plugin-admob-free

Cordova AdMob Plugin. Contribute to ratson/cordova-plugin-admob-free development by creating an account on GitHub.

github.com

설치 가이드에 따라 플러그인 설치

cordova plugin add cordova-plugin-admob-free --save --variable ADMOB_APP_ID="앱 ID 입력"

admob.js 파일 작성

제가 사용했던 js 파일이고(수정하셔서 사용해도 됩니다)
앱이 실행될 때 initAd() 를 호출 해주고
게재가 되어야 할 부분에서 showBanner() 등으로 적절하게 호출하면 됩니다.
소스파일을 빌드하게 될 때 index.html에 <script src="cordova.js"></script> 파일이 생성되므로
개발 웹 브라우저에서는 작동이 되지 않고 모바일 디바이스에서만 실행이 됩니다.
개발시에는 테스트 ID 로만 실행하셔야 합니다. 실제 ID값 테스트하면 계정정지 당합니다.

아래와 같이 모바일 디바이스에서 이벤트핸들러를 등록해주고 사용

document.addEventListener("deviceready", function() {
initAd();
});

var admob = null;

// 실제
// var admobId = {
//   android: {
//     banner: 'ca-app-pub-xxxxxxxxxxxxx/yyyyyyyyy',
//     interstitial: 'ca-app-pub-xxxxxxxxxxxxx/yyyyyyyyy',
//     rewardvideo: 'ca-app-pub-xxxxxxxxxxxxx/yyyyyyyyy',
//   },
//   ios: {
//     banner: 'ca-app-pub-xxxxxxxxxxxxx/yyyyyyyyy',
//     interstitial: 'ca-app-pub-xxxxxxxxxxxxx/yyyyyyyyy',
//     rewardvideo: 'ca-app-pub-xxxxxxxxxxxxx/yyyyyyyyy',
//   }
// }

// 테스트
var admobId = {
  android: {
    banner: 'ca-app-pub-3940256099942544/6300978111',
    interstitial: 'ca-app-pub-3940256099942544/1033173712',
    rewardvideo: 'ca-app-pub-3940256099942544/5224354917',
  },
  ios: {
    banner: 'ca-app-pub-3940256099942544/6300978111',
    interstitial: 'ca-app-pub-3940256099942544/1033173712',
    rewardvideo: 'ca-app-pub-3940256099942544/5224354917',
  }
}

export function initAd() {
  admob = window.plugins.admob || window.admob;
  if (/(android)/i.test(navigator.userAgent) && admob) {
    // 배너
    admob.banner.config({
      id: admobId.android.banner,
      autoShow: false,
    });
    admob.banner.prepare();

    // 전면
    admob.interstitial.config({
      id: admobId.android.interstitial,
      autoShow: false,
    });
    admob.interstitial.prepare();

    // 리워드
    admob.rewardvideo.config({
      id: admobId.android.rewardvideo,
      autoShow: false,
    });
    admob.rewardvideo.prepare();

  } else if (/(ipod|iphone|ipad)/i.test(navigator.userAgent) && admob) {
    // 배너
    admob.banner.config({
      id: admobId.ios.banner,
      autoShow: false,
    });
    admob.banner.prepare();

    // 전면
    admob.interstitial.config({
      id: admobId.ios.interstitial,
      autoShow: false,
    });
    admob.interstitial.prepare();

    // 리워드
    admob.rewardvideo.config({
      id: admobId.ios.rewardvideo,
      autoShow: false,
    });
    admob.rewardvideo.prepare();
  }

  let interstitialEvent = ['LOAD_FAIL', 'CLOSE', 'EXIT_APP'];
  interstitialEvent.forEach((v) => {
    document.addEventListener(`admob.interstitial.events.${v}`, function () {
      admob.interstitial.prepare();
    })
  })

  let rewardvideoEvent = ['LOAD_FAIL', 'CLOSE', 'EXIT_APP', 'REWARD'];
  rewardvideoEvent.forEach((v) => {
    document.addEventListener(`admob.rewardvideo.events.${v}`, function () {
      admob.rewardvideo.prepare();
    })
  })
}

export function showBanner() {
  if (admob) {
    admob.banner.show();
  }
}
export function removeBanner() {
  if (admob) {
    admob.banner.remove();
    setTimeout(() => {
      admob.banner.prepare()
    }, 100)
  }
}
export function prepareInterstitial() {
  if (admob) {
    admob.interstitial.prepare();
  }
}
export function showInterstitial() {
  if (admob) {
    admob.interstitial.show();
  }
}
export function prepareRewardVideo() {
  if (admob) {
    admob.rewardvideo.prepare();
  }
}
export function showRewardVideo() {
  if (admob) {
    admob.rewardvideo.show();
  }
}