Ionic + capacitor + AdmobPlus で広告を表示 | ゆるキャリエンジニア日誌

目的

Ionic(Angular版)を使ってiosアプリを作りました。せっかくなので、Google広告をつけようと思います。 AdmobPlus を使用してテスト広告を表示させるまでの作業を残します。

既にIonicプロジェクトは作成済みということで進めていきます。

バージョン

Angular : 13.0
Ionic : 6.18.1

Google AdMobアカウント作成

Google AdMobの公式サイトからGoogle AdMobアカウントを作成します。

前回の記事でGoogle AdMobアカウントの作成方法を書いているので参考にしてください。

GoogleAdMobアカウントの作成

AdmobPlus ライブラリインストール

公式サイトに従ってAdmobPlus ライブラリをインストールしていきます。今回のIonicプロジェクトはcapacitorを使用しているので、capacitor用のライブラリをインストールしていきます。

npm install @admob-plus/capacitor
ionic cap sync

ios/App/App/Info.plist に以下を追記

iosアプリで広告を表示するにはInfo.plistに以下を追記する必要があります。

 GADApplicationIdentifier
    ca-app-pub-xxx~yyy
    SKAdNetworkItems

            SKAdNetworkIdentifier
            cstr6suwn9.skadnetwork

            SKAdNetworkIdentifier
            4fzdc2evr5.skadnetwork

            SKAdNetworkIdentifier
            2fnua5tdw4.skadnetwork

            SKAdNetworkIdentifier
            ydx93a7ass.skadnetwork

            SKAdNetworkIdentifier
            5a6flpkh64.skadnetwork

            SKAdNetworkIdentifier
            p78axxw29g.skadnetwork

            SKAdNetworkIdentifier
            v72qych5uu.skadnetwork

            SKAdNetworkIdentifier
            c6k4g5qg8m.skadnetwork

            SKAdNetworkIdentifier
            s39g8k73mm.skadnetwork

            SKAdNetworkIdentifier
            3qy4746246.skadnetwork

            SKAdNetworkIdentifier
            3sh42y64q3.skadnetwork

            SKAdNetworkIdentifier
            f38h382jlk.skadnetwork

            SKAdNetworkIdentifier
            hs6bdukanm.skadnetwork

            SKAdNetworkIdentifier
            prcb7njmu6.skadnetwork

            SKAdNetworkIdentifier
            v4nxqhlyqp.skadnetwork

            SKAdNetworkIdentifier
            wzmmz9fp6w.skadnetwork

            SKAdNetworkIdentifier
            yclnxrl5pm.skadnetwork

            SKAdNetworkIdentifier
            t38b2kh725.skadnetwork

            SKAdNetworkIdentifier
            7ug5zh24hu.skadnetwork

            SKAdNetworkIdentifier
            9rd848q2bz.skadnetwork

            SKAdNetworkIdentifier
            n6fk4nfna4.skadnetwork

            SKAdNetworkIdentifier
            kbd757ywx3.skadnetwork

            SKAdNetworkIdentifier
            9t245vhmpl.skadnetwork

            SKAdNetworkIdentifier
            4468km3ulz.skadnetwork

            SKAdNetworkIdentifier
            2u9pt9hc89.skadnetwork

            SKAdNetworkIdentifier
            8s468mfl3y.skadnetwork

            SKAdNetworkIdentifier
            av6w8kgt66.skadnetwork

            SKAdNetworkIdentifier
            klf5c3l5u5.skadnetwork

            SKAdNetworkIdentifier
            ppxm28t8ap.skadnetwork

            SKAdNetworkIdentifier
            424m5254lk.skadnetwork

            SKAdNetworkIdentifier
            uw77j35x4d.skadnetwork

            SKAdNetworkIdentifier
            578prtvx9j.skadnetwork

            SKAdNetworkIdentifier
            4dzt52r2t5.skadnetwork

            SKAdNetworkIdentifier
            e5fvkxwrpn.skadnetwork

            SKAdNetworkIdentifier
            8c4e2ghe7u.skadnetwork

            SKAdNetworkIdentifier
            zq492l623r.skadnetwork

            SKAdNetworkIdentifier
            3qcr597p9d.skadnetwork

    NSUserTrackingUsageDescription
    This identifier will be used to deliver personalized ads to you.

Angularのコード修正 app.component.ts

app.component.tsに以下のように記載してバナー広告を表示させるコードを追加する。

BannerAdのインスタンス生成時に指定しているadUnitIdに、この記事の最後に出てくる広告IDを張り付ける。

今回はテスト用の広告を表示させる。Googleがテスト用広告IDを公開しているのでそれを使用する。

import { Component, OnInit } from '@angular/core';
import { Platform } from '@ionic/angular';
import { BannerAd } from '@admob-plus/capacitor'

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],
})
export class AppComponent implements OnInit {

  constructor(private platform: Platform,) {
  }

  async ngOnInit() {
    await this.platform.ready();

    if (this.platform.is('ios')) {
      const banner = new BannerAd({
        adUnitId: 'ca-app-pub-3940256099942544/2934735716',
      });
      await banner.show();
    }
  }
}

Xcodeのソース修正

Angularのコードを編集したので以下のコマンドを使用してXcodeのプロジェクトに反映させる。

反映させた後Xcodeでプロジェクトを開く。

ionic cap sync
npx cap ios open

あとはXcodeでプロジェクトを実行して終了かと思いきや、AMBBannerで以下のようなエラーが発生した。

Cannot find 'kGADAdSizeBanner' in scope

Cannot find 'kGADAdSizeBanner' in scope エラー

バナー広告のサイズを公式から見つけた。

ちょっとスマートな解決法が見つからなかったので、定数を使用するのではなく、320 x 50 と直接設定するようにした。

let adSize = GADAdSizeFromCGSize(CGSize(width:320, height:50));

とりあえずエラーが消えてコンパイルできるようになったのでよし！

テスト広告表示

以上で Ionic + capacitor + AdmodPlus で無事テスト用のバナー広告が表示された！

AdmobPlus テスト広告

テスト広告