【Google AdMob】広告を設置してみよう

Xcode

アプリを作ったことがある人、これからアプリを作ろうと思ってい人は、アプリを作ったらガッツリ稼ぎたいと思うのが普通です。とは言うものの、バンバン売れる有料ソフトを作る事は簡単に出来る事ではありません。アプリでお金を稼ぐ方法として最も早い方法は、無料ソフトを作ってソフトに広告を設置して広告収入を得る事です。こちらではiPhoneアプリにSwiftでAdMob広告を設置する方法をご紹介します。AdMob 8.0以降に対応している方法です。

広告を設置するソフトを作ろう

AdMob広告を設置するにもアプリが無いと何も始まりません。テスト的なアプリは超簡単に作ること出来るので、まずはテストアプリの作成から説明していきます。アプリを作るにはXcodeというApple社が提供している無料の開発ソフトが必要です。まだインストールしていない人はApp Storeで無料でダウンロード出来るのでインストールしてください。通信環境によりますが、ダウンロードには数時間かかるので気長に待ちましょう。

Xcodeのインストールが完了したら起動してみましょう。Xcodeが起動したら[Create a new Xcode project]をクリックします。

[Choose a template for your new project]がiOSになっている事を確認したら、[Application]の中の[Game]を選択して、[Next]をクリックします。

[Product Name]に適当な名称を入力します。[Team],[Organization Identifier],[Bundle Identifier]も自分の好きな名称を設定します。[Language]は[Swift]を選択[Game Technology]は[SpriteKit]を選択します。

最後に[Next]をクリックします。保存場所を聞いてくるので自分の好きな場所を選択して[Create]をクリックします。

次のような画面になったら、テスト用のアプリは作成完了です!
試しにアプリを動かしてみましょう。アプリはシミュレータで動作確認ができるのですが、シミュレータを選択する事ができます。画面上の赤丸をクリックしてみましょう。

シミュレータの選択画面がプルダウンで表示されるので、ここでは[iPhone SE (2nd gereration)]を選択してみましょう。

画面左上にある、再生ボタンをクリックしてみます。

シミュレータが起動して、左の様に表示されたら起動完了です。このアプリは画面に「Hello,World!」と表示され、画面をクリックしたりドラッグすると、青い四角が回転しながら表示されるアプリです。

画面をクリックしたり、ドラッグしてみましょう。

アプリの動作を無事確認したら、停止ボタンを押します。シミュレータでのアプリが終了します。

シミュレータの画面は次のようになっていると思います。

とりあえずテスト用アプリの動作確認は終了です。

Google Mobile Ads SDKのインストール

広告を表示するには「Google Mobile Ads SDK」というものをインストールする必要があります。次のサイトからダウンロードしましょう。

Google Mobile Ads SDK  |  iOS  |  Google for Developers
Download the SDK for iOS and get a link to sample apps.

[Download googlemobileadssdkios.zip]をクリックしてファイルをダウンロードします。

次にダウンロードしたファイルを、Xcodeにインストール(取り込み)します。Xcode画面左上のフォルダアイコンをクリックすると、現在開いているプロジェクトの構成ツリーが表示されるので、インストールしたい場所をクリックして選択します。この場合は最も上の階層を選択しています。

Xcodeのメニューから[File]をクリックして、プルダウンメニューの[Add Files to…]をクリックします。

選択ウィンドウが表示されるので、ダウンロードしたフォルダを選択します。この際に[Copy items if needed]にチェックが入っている事を確認してください。これがチェックされていないと、管理が面倒になります。

下のようになれば、インストールは完了です。

Xcodeを設定

Xcodeで幾つか設定する項目があるので、順次設定します。プロジェクト名を選択して、[Build Settings]の[Other Linker Flags]を設定します。

「-ObjC」と設定します。大文字や小文字に注意しましょう。

次に[info.plist]をクリックします。

リストに項目を追加します。ソースコードで記述する場合は、[info.plist]を右クリックしてソースコードを表示させます。

次の項目を追加します。ソースコードで記述する場合は、下記のコードになります。

<key>GADApplicationIdentifier</key>
<string>ca-app-pub-3940256099942544~2934735716</string>

追加するコードの設定値で「ca-app-pub-xxxxxxxxx」がありますが、これは、次のgoogleのサイトに記載されている、広告表示用のテストIDです。注意点としてサイトに表示されているテストIDは、数字と数字の間が「/」スラッシュになっていますが、このプロパティリストに記述する時は「~」にする必要があります。

バナー広告  |  iOS  |  Google for Developers
AdMob のバナー広告を iOS アプリに組み込む方法を学びましょう。その他のリソースへのリンクも記載されています。

フレームワークをインポートします。画面左の「GoogleMobileAdsSdkiOS-…」を展開すると次の6つのフレームワークが表示されます。プロジェクト名を選択して[General]の中の[Frameworks,Libraries,…」を表示させます。

左側の6つのフレームワークを右側にドラッグ&ドロップします。

  • GoogleAppMeasurement.xcframework
  • GoogleMobileAds.xcframework
  • GoogleUtilities.xcframework
  • nanopb.xcframework
  • PromisesObjC.xcframework
  • UserMessagingPlatform.xcframework

フレームワークをインポートした直後は設定が「Embed & Sign」になっています。

これを「Do Not Embed」に変更します。

バナー広告を表示させるプログラム

ここからは、実際にAdMobバナー広告を表示させるプログラムを記述していきます。[GameViewController.swift]をクリックします。

図の位置に、「import GoogleMobileAds」と記述します。

import GoogleMobileAds

次のコードを赤枠部に記述します。

, GADBannerViewDelegate
var bannerView: GADBannerView!
bannerView = GADBannerView(adSize: kGADAdSizeBanner)
addBannerViewToView(bannerView)

次のコードを赤枠部に記述します。IDを記述する際に、数字と数字の間の記号が「/」スラッシュになっている事を注意する必要があります。

bannerView.adUnitID = "ca-app-pub-3940256099942544/2934735716"
bannerView.rootViewController = self
bannerView.load(GADRequest())
bannerView.delegate = self

次のファンクションを追加します。

func addBannerViewToView(_ bannerView: GADBannerView) {
     bannerView.translatesAutoresizingMaskIntoConstraints = false
     view.addSubview(bannerView)
     view.addConstraints(
       [NSLayoutConstraint(item: bannerView,
                           attribute: .bottom,
                           relatedBy: .equal,
                           toItem: view.safeAreaLayoutGuide,
                           attribute: .bottom,
                           multiplier: 1,
                           constant: 0),
        NSLayoutConstraint(item: bannerView,
                           attribute: .centerX,
                           relatedBy: .equal,
                           toItem: view,
                           attribute: .centerX,
                           multiplier: 1,
                           constant: 0)
       ])
    }

以上でコードの記述は完了です。

バナー広告の表示確認

実際に広告が表示されるか確認してみましょう。画面左上のボタンでアプリを起動します。

アプリの画面下に、広告が表示されれば成功です。テストコードを使用しているので「Test mode」と表示されていますが、実際に広告を表示させる場合は、自分用のコードを取得しましょう。

最初に広告が表示されるまで時間がかかる事がありますが、ちょっと待ってみて、それでも表示されない場合は、アプリを停止してからもう一度起動してみましょう。

バナー広告イベントを記述

広告データを読み込んだとき、表示された時等のタイミングで、動作を起こすプログラムを記述する事ができます。次のコードを「GameViewController.swift」に追加しましょう。実際にアップルストアで公開する際に、この記述が無いと審査が通らない場合がありますので記述しておくのが無難です。

/// Tells the delegate an ad request loaded an ad.
func adViewDidReceiveAd(_ bannerView: GADBannerView) {
  print("adViewDidReceiveAd")
}

/// Tells the delegate an ad request failed.
func bannerView(_ bannerView: GADBannerView, didFailToReceiveAdWithError error: Error) {
  print("adView:didFailToReceiveAdWithError: \(error.localizedDescription)")
}

/// Tells the delegate that a full-screen view will be presented in response
/// to the user clicking on an ad.
func bannerViewWillPresentScreen(_ bannerView: GADBannerView) {
  print("adViewWillPresentScreen")
}

/// Tells the delegate that the full-screen view will be dismissed.
func bannerViewWillDismissScreen(_ bannerView: GADBannerView) {
  print("adViewWillDismissScreen")
}

/// Tells the delegate that the full-screen view has been dismissed.
func bannerViewDidDismissScreen(_ bannerView: GADBannerView) {
  print("adViewDidDismissScreen")
}

/// Tells the delegate that a user click will open another app (such as
/// the App Store), backgrounding the current app.
func adViewWillLeaveApplication(_ bannerView: GADBannerView) {
  print("adViewWillLeaveApplication")
}

インタースティシャル広告を表示させるプログラム

続いて、AdMobインタースティシャル広告を表示させるプログラムを紹介します。インタースティシャル広告とは全画面広告の事です。全画面広告なので特定のタイミングで表示させる必要があり、ここでは画面のボタンを押すと全画面広告が表示されるようにします。

図の赤枠部分を記述します。

, GADFullScreenContentDelegate
private var adButton: UIButton!
private var interstitial: GADInterstitialAd?

続けて、図の赤枠部分を記述します。

createInterAd()

赤枠の関数を記述します。プログラム中に使用されているIDコードは、インタースティシャル広告のテストIDになり、次のGoogleのサイトで公開されています。実際にアップルストアで公開する際は自分のIDを取得しないと収益化できないので注意しましょう。

インタースティシャル広告  |  iOS  |  Google for Developers
AdMob のインタースティシャル広告を iOS アプリに組み込む方法を解説し、おすすめの方法や関連リソースへのリンクも紹介します。
func createInterAd(){
        let request = GADRequest()
        GADInterstitialAd.load(withAdUnitID:"ca-app-pub-3940256099942544/4411468910",
                                    request: request,
                          completionHandler: { [self] ad, error in
                            if let error = error {
                              print("Failed 失敗です to load interstitial ad with error: \(error.localizedDescription)")
                              return
                            }
                            interstitial = ad
                            interstitial?.fullScreenContentDelegate = self
                          }
        )
}

さらに、赤枠の関数を記述します。

@objc internal func onClickAdButton(sender: UIButton) {
        //print("ボタンを押しました")
        if interstitial != nil {
            interstitial?.present(fromRootViewController: self)
          } else {
            print("Ad wasn't ready")
        }
}

最後に、イベントの関数を記述します。

/// Tells the delegate that the ad failed to present full screen content.
func ad(_ ad: GADFullScreenPresentingAd, didFailToPresentFullScreenContentWithError error: Error) {
    print("広告表示の失敗 Ad did fail to present full screen content.")
}

/// Tells the delegate that the ad presented full screen content.
func adDidPresentFullScreenContent(_ ad: GADFullScreenPresentingAd) {
    print("広告表示の成功 Ad did present full screen content.")
}

/// Tells the delegate that the ad dismissed full screen content.
func adDidDismissFullScreenContent(_ ad: GADFullScreenPresentingAd) {
    print("広告表示を消す Ad did dismiss full screen content.")
    createInterAd()
}

インタースティシャル広告の表示確認

最後に動作確認をしてみましょう。画面左上のボタンを押してアプリを起動します。

次のように「PUSH」ボタンが画面に表示されます。PUSHボタンをおしてみましょう

備考:画面下にバナー広告が表示されたらボタンをおしてみましょう。バナー広告表示前は、インタースティシャル広告のデータをダウンロードしている最中の可能性が高いので、押してもインタースティシャル広告が表示されない場合が多いです。

広告が表示されれば、成功です。

この広告はあくまでもテスト広告なので、実際に自分のアプリに搭載する際は、自分のIDを取得して、しっかり収益化しましょう。

IDFA iOS14の対応

iOS14以降はIDFAがデフォルトでオフになります。IDFAとは「Identifier for Advertisers」の略で、各々のユーザーに適した広告を表示する機能の事で、オフのままだと収益が下がる可能性があります。iOS14からはユーザーにIDFAの許可を求める必要があり、その実装方法を記載します。

[info.plist]をクリックします。

項目を追加して赤丸の内容を追加して設定します。

ソースコードで記述する場合は、[info.plist]を右クリックしてソースコードを表示させます。上記のリストで設定した場合は、この作業は不要です。

次のコードを追記します。

<key>SKAdNetworkItems</key>
	<array>
		<dict>
			<key>KAdNetworkIdentifier</key>
			<string>cstr6suwn9.skadnetwork</string>
		</dict>
	</array>

AppDelegate.swiftに次のコードを追記します。

import AppTrackingTransparency
import AdSupport

さらに次のコードを追記します。

if #available(iOS 14, *) {
            ATTrackingManager.requestTrackingAuthorization(completionHandler: { status in GADMobileAds.sharedInstance().start(completionHandler: nil)
                })
            } else {
                // Fallback on earlier versions
                GADMobileAds.sharedInstance().start(completionHandler: nil)
}

コードの追記が終わったらアプリを起動してみましょう。左の画面のように、IDFAの確認メッセージが表示されるようになったら成功です。

アプリ画面の上下に使用されない場所がある

既に気付いている人もいるかもしれないですが、アプリ画面の上下に使用されていな領域ができています。本来ならバナー広告は画面の下端に表示される予定なのに、なんだか少しスペースが空いています。この原因はアプリが画面サイズを正しく認識出来ていないためと思われます。

この問題は「Launch Screen」を設定すると解消されます。Launch Screenとはアプリを起動して一番最初に表示される画面の事で、多くのアプリではアプリ会社のロゴなどが表示されています。

Launch Scrennを設定する方法はこちら。

Launch Screenを設定すると、左のようにアプリの全画面が使用されるようになります。