안드로이드 cordova admob 적용하기

글쓴이 /


안드로이드 cordova admob 적용하기
안드로이드 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 파일 작성

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

  }
}

관련 게시물

댓글 달기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다

위로 스크롤