cordova-plugin-admob-freeの導入作業 #Cordova

少し面倒だったので忘れないようにメモしておきます。
admobで「ca-app-pub-」から始まるapp idを取得していることが前提です。

ビルド環境の設定

monacaクラウドIDEでビルド→ビルド環境の設定→iOS5.1.1を選択して保存する。
monacaクラウドIDEで設定→JS/CSSコンポーネントの追加と削除→Monaca Core Utilityのバージョンを2.1.0以上に上げる。
monacaクラウドIDEで設定→iOSアプリ設定→WebViewエンジンにWKWebViewを指定して保存。

プラグインを用意する

cordova-admob-sdk

以下のサイトからv0.24.1のzipをダウンロードしました。
cordova-admob-sdk

cordova-plugin-admob-free

以下のサイトからv0.27.0のzipをダウンロードしました。
cordova-plugin-admob-free

WKWebViewの対応

ダウンロードしたcordova-admob-sdkは内部でGoogle Mobile Ads SDKの7.42.1を使用していました。
このバージョンはUIWebView廃止に未対応のようなので、手作業でSDKを更新します。

Google Mobile Ads SDKにアクセスしてgooglemobileadssdkios.zipをダウンロードします。ここでは7.60.0をダウンロードしました。
cordova-admob-sdk-master.zipを解凍します。
./src/ios/GoogleMobileAds.framework をフォルダごと削除します。
googlemobileadssdkios.zipを解凍して./GoogleMobileAdsSdkiOS-7.60.0/GoogleMobileAds.frameworkを先程削除したフォルダがあった場所（cordova-admob-sdk-master/src/ios/）にコピーします。
cordova-admob-sdk-masterをzipで圧縮します。

次に、cordova-plugin-admob-freeですが、www/admob.jsが無くてビルドエラーになるので作成します。

1.　cordova-plugin-admob-free-master.zipを解凍します。
2.　コンソールを起動して解凍したフォルダへ移動します。
3.　npm install を実行
4.　npm run build を実行(wwwフォルダが作成されます)
5.　node_modulesフォルダを削除
6.　cordova-plugin-admob-free-masterをzipで圧縮します。

これでプラグインの準備はできました。

プラグインをインポート

次に、プロジェクトへプラグインを適用します。
1.　monacaのクラウドIDEで設定→cordovaプラグインの管理　を選択します。
2.　cordovaプラグインのインポートでcordova-admob-sdk-master.zipを指定してインポートします。
3.　cordovaプラグインのインポートでcordova-plugin-admob-free.zipを指定してインポートします。
4.　設定を追加します。

設定

ADMOB_APP_ID=ca-app-pub-348...

config.xml修正

5.　config.xmlを開きます。
6.　<platform name="ios"タグ内に以下を追加します。

config.xml

    <preference name="WKWebViewOnly" value="true"/>
    <preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine"/>
    <feature name="CDVWKWebViewEngine">
      <param name="ios-package" value="CDVWKWebViewEngine"/>
    </feature>

※デプロイ時にITMS-90683がでた場合は以下も追加。

config.xml

    <edit-config target="NSBluetoothAlwaysUsageDescription" file="*-Info.plist" mode="merge">
      <string>適当な説明</string>
    </edit-config>

※カスタムビルドデバッガーでビルドして起動したときにスプラッシュで落ちる場合は以下を追加。

config.xml

    <edit-config file="*-Info.plist" mode="merge" target="GADApplicationIdentifier">
      <string>ca-app-pub-348...</string>
    </edit-config>
    <edit-config file="*-Info.plist" mode="merge" target="GADIsAdManagerApp">
      <true/>
    </edit-config>

※上記を追加してもITMS-90809でrejectになる場合、以下を追加するといいかも。

config.xml

    <edit-config file="*-Info.plist" mode="merge">
      <key>gad_preferred_webview</key>
      <string>wkwebview</string>
    </edit-config>

広告表示用のスクリプト

とりあえずons.readyのタイミングに表示処理を書いた。

index.html

    ons.ready(function() {    
      // console.log(admob);
        var admobid = {
          banner: 'ca-app-pub-... ※バナー広告のid'
        }
        // Banner
        admob.banner.config({
          id: admobid.banner,
          isTesting: true,
          autoShow: false,
          size: 'LARGE_BANNER',
        })
        admob.banner.prepare()
          .then (() => {
            console.log('banner prepare success!')
          })
          .catch (err => {
            console.log('banner prepare error!', err)
          })
    });

カスタムデバッグビルドして広告が表示できていればOK。

can't find variable admob というエラーが出る場合。
最初プロジェクト作った時に選択したプロジェクトテンプレートがまずいんだと思う。
フレームワークテンプレートの中のminimumをベースに再構築すればいいかもしれません。