ionic으로 만든 HTML5 앱에 AdMob을 삽입했습니다.
도입으로 꽤 빠져 버렸으므로, 순서를 정리해 둡니다.

환경

ionic 1.1.0

ionic-cli 1.7.8

cordova 5.5.3

Mac OS X El Capitan

AdMob 플러그인 설치

cordova-admob-pro이라는 플러그인을 사용합니다. 다음 명령으로 플러그인을 설치합니다.

$ ionic plugin add cordova-plugin-admobpro

Android SDK Tools 설치

공식 페이지 설치 절차에도 쓰고 있지만 일부 Android SDK Tool이 필요한 것 같습니다. 나는 이런 느낌의 설치 상황에서 갈 수있었습니다. 여기에 들고 있는 것 전부가 필요한지는 모릅니다만, 적어도 Google Play계는 필요할 것 같은 생각이 든다. .



아, 그건 그렇고, 이것은 Mac 버전의 Android Studio 화면입니다.

설정

이쪽도 공식 페이지 에 샘플 코드가 실려 있었습니다만, AngularJS답게 인젝션 하려고 해 보았습니다.

이런 느낌의 코드를 어딘가에 둡니다. banner 및 interstitial에는 AdMob에서 발행하는 각 광고에 대한 키를 입력해야합니다. (또한 Interstitial 광고를 사용하지 않으면 interstitial 주위의 설명이 필요하지 않습니다.)

admob.coffee

'use strict'

@app
.factory 'AdMobManager', ->
  admobid =
    if /(android)/i.test(navigator.userAgent)
      banner: 'ca-app-pub-xxxxx',
      interstitial: 'ca-app-pub-yyyyy'
    else if /(ipod|iphone|ipad)/i.test(navigator.userAgent)
      banner: 'ca-app-pub-xxxxx',
      interstitial: 'ca-app-pub-yyyyy'
    else
      banner: 'ca-app-pub-xxxxx',
      interstitial: 'ca-app-pub-yyyyy'

  initApp = ->
    if typeof AdMob == 'undefined'
      console.log 'AdMob plugin is not ready.', admobid
      return

    AdMob.createBanner
      adId: admobid.banner
      isTesting: true # とりあえずテスト用の広告
      overlap: false
      offsetTopBar: false
      position: AdMob.AD_POSITION.BOTTOM_CENTER
      bgColor: 'black'

    AdMob.prepareInterstitial
      adId: admobid.interstitial
      autoShow: true

  factory =
    init: ->
      if /(ipad|iphone|ipod|android|windows phone)/i.test(navigator.userAgent)
        initApp()

작성한 admob.js를 index.html로 로드한 후 이 팩토리를 사용하여 AdMob을 초기화하는 코드를 app.coffee에 작성합니다.

app.coffee

'use strict'

@app = angular.module('MyApp', ['ionic'])
.run ($ionicPlatform, AdMobManager) ->
  $ionicPlatform.ready ->
    # Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    # for form inputs)
    if window.cordova && window.cordova.plugins.Keyboard
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true)
    if window.StatusBar
      StatusBar.styleDefault()

    # ↓↓↓この行を追加↓↓↓
    AdMobManager.init() 

빌드하지만 오류로 이끼

이것으로 준비는 완료할 것이므로 기세 좋게 빌드해 보았습니다만, 뭔가 에러가 나왔습니다.

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':processDebugResources'.
> Error: more than one library with package name 'com.google.android.gms'
  You can temporarily disable this error with android.enforceUniquePackageName=false
  However, this is temporary and will be enforced in 1.0

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.

BUILD FAILED

솔루션은 htps : // 기주 b. 코 m / f ぉ 아친 g 호 t 포 t / 코 r ゔ ぁ 아 d에 나와 있습니다. 분명히 com.google.android.gms에서 참조되는 패키지가 여러 개 있기 때문입니다.

불필요한 플러그인을 삭제합니다.

$ ionic plugin remove cordova-google-play-services

이것으로 「일단」작업 완료할 것. $ ionic run android 로 실기로 확인해 보면··무사, 테스트용의 광고가 표시되었습니다! (브라우저상에서는 표시되지 않으므로 주의를)

뒤로 키로 돌아왔을 때의 거동이 바뀌었다··?

일반적으로 ionic으로 앱을 만드는 경우 사용자가 기기의 뒤로 키를 누르면 이전 URL로 돌아갈 것입니다. 왠지 앱이 닫혀버리는 것입니다. . .

조사하면, 있었습니다.
htps : // 기주 b. 코 m / f ぉ 아친 g 호 t 포 t / 코 r ゔ ぁ 아 d

해결책은 현재 platforms/android/CordovaLib/src/org/apache/cordova/CordovaActivity.java를 열고 다음과 같이 수정할 수밖에 없는 것 같습니다. 잠정 대응이군요. .

CordovaActivity.java

// import文が並んでいる箇所に追加
import android.view.KeyEvent;

...

// 最後にこのメソッドを追加
@Override
public boolean dispatchKeyEvent(KeyEvent event) {
    if (this.appView != null) {

        View webview = this.appView.getView();
        if (webview != null) {
            return webview.dispatchKeyEvent(event);
        }

        return true;
    }

    return false;
}

다시 빌드하고 실기에 apk를 설치하고 확인한 결과 무사히 돌아가는 키의 거동이 복구되었습니다!
덧붙여서 이 파일은, ionic platform remove android (을)를 해 버리면(자) 삭제되어 버리므로, 한 번 플랫폼을 파기해 재차 platform add 했을 때에는, 다시 한번 수정할 필요가 있기 때문에 주의를.

상당한 시간이 걸렸지만 최소한의 광고는 게재할 수 있습니다.