はじめに

前回の記事で予告したとおり、Ionicのプロジェクトに対して今回はAdMobのテスト広告を追加してみました。
結構躓いたので、備忘録として残しておきます。

なお、Admobへの登録はこちらから。

admob.google.com
 
Google AdMob - モバイルアプリの収益化
https://admob.google.com/intl/ja_ALL/home/
アプリ内広告を使ってモバイルアプリからの収益を増やしましょう。行動につながるインサイトも入手でき、使いやすいツールでアプリの成長も後押しできます。

前提

下記を前提として進めていきます。
Macを持っていない場合はiOSアプリの開発ができませんので、Androidにてお試しください。
（本記事ではiOSでの方法のみ説明します）

  • Admobアカウントがあること
  • Ionicプロジェクトが作成済みであること
  • XCodeがインストール済みであること（Macがあること）



手順

1. ライブラリのインストールとプラグインの追加

AdMob設定に必要なモジュールをインストールし、プラグインを追加します。

npm install @ionic-native/admob-free
ionic cordova plugin add cordova-admob-sdk
ionic cordova plugin add cordova-plugin-admob-free

2. Admobで新規アプリを作成

まず、アプリを追加します。

今回はストア公開前のアプリに対して広告を付けたいので、「いいえ」を押下します。

アプリ名称を入力し、「iOS」を選択します。
なお、アプリの追加はiOSとAndroidでそれぞれ実施する必要があります。

「次、広告ユニットを作成」を押下します。

「バナー広告」を選択します。

広告の名称を入力し、広告ユニットを作成します。

アプリIDと広告ユニットIDが表示されたら完了です。
Aが アプリID Bが 広告ユニットID になりますので、それぞれコピペしておきます。



3. AdMobFreeの読み込み

app.module.tsにAdMobFreeのimportとprovidersへの追加を行います。

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { AdMobFree } from '@ionic-native/admob-free/ngx'; // 追加

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    StatusBar,
    SplashScreen,
    AdMobFree, // 追加
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
})
（後略）

4. iOSの設定ファイルにAdMobの設定追加

config.xmlにedit-configを2つ追加します。
iOSの設定ファイルであるInfo.plistにAdMob利用のために必要な設定を2つ追記する設定です。
ca-app-pub-xxxxxxxxxxxxxxxx~xxxxxxxxxxの箇所は、 自分のアプリID（A） に変更してください。

    <platform name="ios">
　　　　　（中略）
        <edit-config file="*-Info.plist" mode="merge" target="GADIsAdManagerApp">
            <true />
        </edit-config>
        <edit-config file="*-Info.plist" mode="merge" target="GADApplicationIdentifier">
            <string>ca-app-pub-xxxxxxxxxxxxxxxx~xxxxxxxxxx</string>  <!-- 自分のアプリIDに変更する -->
        </edit-config>
    </platform>



5. 表示したいページに広告追加

広告を表示したいページのtsファイルを下記のように書き換えます。
ionViewWillEnterのタイミングでバナー広告を出しています。
ca-app-pub-xxxxxxxxxxxxxxx/xxxxxxxxxxの箇所は、 自分の広告ユニットID（B） に変更してください。
今回はデフォルトのhome.page.tsで広告を出すよう設定しています。

import { Component } from '@angular/core';
import { AdMobFree, AdMobFreeBannerConfig } from '@ionic-native/admob-free/ngx';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss']
})
export class HomePage {
  constructor(private admob: AdMobFree) {}

  ionViewWillEnter() {
    this.showBanner();
  }

  showBanner() {
    const bannerConfig: AdMobFreeBannerConfig = {
      id: 'ca-app-pub-xxxxxxxxxxxxxxx/xxxxxxxxxx', // 自分の広告ユニットIDに変更する
      isTesting: true,
      autoShow: true
    };

    this.admob.banner.config(bannerConfig);

    this.admob.banner
      .prepare()
      .then(() => {
      })
      .catch(e => console.log(e));
  }
}

6. ビルドしてシミュレータで確認

5.まで終わったらIonicプロジェクトをビルドします。

ionic cordova build ios

ビルドが完了したら、XCodeで platforms/ios/（アプリ名）.xcodeproj を開きます。
シミュレータを選択し、Runすると…

テスト用の広告が表示されました！



おわりに

app.module.tsでのimportのパスやconfig.xmlでの記載についてほとんど記事が見つからず、
かなり難航してしまいました…。
なんとか表示することができたので、これを使って以前作ったWebアプリをストア申請に出してみたいと考えています。

スポンサーリンク