[SwiftUI][AdMob] AdMob の組み込み 2022年版

環境＆対象

ゴール

AdMob をアプリに組み込み、広告が表示されるようにできるのがこの記事の目指すところです。
「AdMob は使う」が、「Firebase は使わない」前提です。

Google のいうところの、「スタンドアロンの AdMob」を組み込んでいきます。

アプリに AdMob を組み込む流れ

アプリに AdMob を組み込む流れは以下のようになっています。

１．事前準備
２．AppTrackingTransparency をアプリに組み込む
３．広告をアプリに組み込む
４．AppStoreConnect でアプリを公開申請
５．アプリの審査が行われ、通過すれば公開
６．AdMob 登録情報にAppStore 情報を追加
７．審査が行われ、通過すれば 広告表示が開始

１、2、３、４、６は、開発者側の作業ですが、５については、Apple 側の作業を待つ必要があります。７については、Google 側の作業を待つ必要があります。

事前準備

コードを書き始める前に、Xcode のプロジェクト外でいくつか設定が必要となります。

AppStore にアプリ登録

Apple の AppStoreConnect にアプリを登録する必要があります。

AdMob を使用することに対して、Google からの承認を受ける必要があるのですが、その前提条件の１つが AppStore に登録されていることです。

# もちろん、アプリ自体は Apple から承認される必要があります。

AdMobに登録

Google の AdMob にも(AdMob を表示する)アプリを登録します。
登録時点では、AppStore に登録されている必要はありません。

合わせて使用する広告を登録することも必要です。
この記事では、バナータイプの広告を表示しますので、バナータイプの広告を登録しました。

AppTrackingTransparency を組み込む

AdMob は、端末IDを用いて、ユーザーに最適な広告を表示しようとします。

ですが、この端末IDを使うためには、ユーザーからの許諾を得る必要があります。
この 許諾を管理するのが、AppTrackingTransparency(ATT) です。

ちなみに、許諾されない時には、この端末IDには、ダミーのIDが設定されるため、アプリに記述するコードに大きな変更は不要です。広告の内容が 最適化されていない広告に変わってしまうということです。

ATT を使用するためには 以下の２つの設定が必要です。
１．Info.plist に許諾理由を設定
２．ATTrackingManager.requestTrackingAuthorization をコールする

Info.plist 設定

許諾を得る時には、以下のようなダイアログが表示されます。

この時に、何を目的に tracking するのかを説明/表示する必要があり、その文言を Info.plist に設定します。

具体的には、Info.plist 中の NSUserTrackingUsageDescription(Privacy – Tracking Usage Description) キーに、値(String)を設定します。

# 適当に設定すると Apple の App Review で Reject されます。

ATT ダイアログ表示

ダイアログの表示は、アプリ側からコールしなければいけません。

実際にダイアログを表示するメソッドは、ATTrackingManager.requestTrackingAuthorization です。
Apple のドキュメントは、こちら。

Swift5.5 で導入された async/await に対応したバージョンも用意されています。

アプリが、UIApplicationStateActive の状態でコールしないと、きちんと表示されないこともあるようで、ドキュメントにもそのことが明記されています。

例えば、アプリのトップのビューで、以下のように didBecomeActiveNotification 通知を受けてコールするのも１つです。

//
//  AppRootView.swift
//
//  Created by : Tomoaki Yagishita on 2022/03/05
//  © 2022  SmallDeskSoftware
//

import SwiftUI
import Combine
import AppTrackingTransparency
import GoogleMobileAds

struct AppRootView: View {
    var body: some View {
        AppViews()
        .onReceive(NotificationCenter.default.publisher(for: UIApplication.didBecomeActiveNotification)) { _ in
            Task {
                let result = await ATTrackingManager.requestTrackingAuthorization()
                if result == .authorized {
                    // do something?
                }
            }
        }
    }
}

なお、一度ダイアログを経由して、ユーザーが選択するとその値は記憶され、メソッドをコールしてもダイアログが再度表示されることはありません。

ユーザーが選択した値は、trackingAuthorizationStatus メソッドで取得することができます。
Apple のドキュメントは、こちら。

アプリに AdMob を組み込む

実際にアプリに広告が表示されるように AdMob を組み込んでいきます。

いろいろな広告がありますが、以降では、 バナー広告を表示する設定をしていきます。

ライブラリ追加

オフィシャルには、Google AdMob は、SwiftPM に対応していません。

Google は、CocoaPods を利用するのを推奨していますが、SwiftPM を使って管理したいので、有志の方が作成してくれたパッケージ情報を使用していきます。

https://github.com/quanghits/GoogleMobileAds

ドキュメントに記載されていますが、”Other Linker Flags” に “-ObjC” を追加するのを忘れないようにしましょう。

この設定によって、AdMob を使用するのに必要なライブラリが組み込まれることになります。

Info.plist 設定

Info.plist に GADApplicationIdentifier と SKAdNetworkItems の情報を追加していきます。

詳細は、こちら。

SKAdNetworkItems は、上記ページのコピペで OK ですが、GADApplicationIdentifier は、アプリ個別に割り振られた文字列を指定する必要があります。

広告表示ビュー

広告表示自体は、GADBannerView を使用して行います。

ですが、GADBannerView は、UIView を継承した View です。現時点で、SwiftUI 用の View は提供されていないので、自分で、UIViewControllerRepresentable を利用して wrap する必要があります。

以下のような wrapper を使用しています。

//
//  AdBanner.swift
//
//  Created by Tomoaki Yagishita on 2022/03/11.
//  Copyright © 2022 SmallDeskSoftware. All rights reserved.
//

import Foundation
import SwiftUI
import GoogleMobileAds

struct AdBanner: UIViewControllerRepresentable {
    let adUnitId: String
    
    private var adSize: GADAdSize {
        return GADAdSizeFromCGSize(CGSize(width: 300, height: 100))    //kGADAdSizeLargeBanner
    }
    
    func expectedFrame() -> some View {
        let size = adSize.size
        return frame(width: size.width, height: size.height, alignment: .center)
    }
    
    func makeUIViewController(context: Context) -> UIViewController {
        GADMobileAds.sharedInstance().requestConfiguration.testDeviceIdentifiers = [ GADSimulatorID, "Your-own-device-id" ]
        let view = GADBannerView(adSize: adSize)
        let viewController = UIViewController()
        #if DEBUG
        view.adUnitID = "ca-app-pub-3940256099942544/2934735716" // banner test id
        #else
        view.adUnitID = adUnitId
        #endif
        view.rootViewController = viewController
        viewController.view.addSubview(view)
        viewController.view.frame.size = adSize.size
        view.load(GADRequest())
        return viewController
    }
    func updateUIViewController(_ uiViewController: UIViewController, context: Context) {}
}

/*
 // body内 ---
 AdBanner(adUnitId: "***").expectedFrame()
 */

AdMob のドキュメントを読むと、開発中は テスト広告を使うように 繰り返し書かれています。
最悪、広告の配信停止につながることもあるようなので、きちんと テスト広告用の ID を使いましょう。

初期化処理

AdMob にも初期化処理が必要です。

GADMobileAds.sharedInstance().start(completionHandler: nil)

上記のコードを適切なタイミングに行う必要があります。

タイミングは、「できるだけ早く」と書かれていて、「アプリの起動時に行うのが理想的」とも書かれています。

実装としては、ATT のダイアログリクエストの後が良い気がします。

アプリのビューに追加

用意した AdBanner を使用して、バナーを配置します。

配置は、通常のビュー同様、HStack 等を使用して行います。

struct AppRootView: View {
    @EnvironmentObject var viewModel: ViewModel

    var body: some View {
        VStack(spacing:0) {
            AdBanner(adUnitId: "YOUR-OWN-AD-UNIT-ID")
                .expectedFrame()
            AppView()

        }
    }
}

シミュレータでアプリを起動してみて、以下のようなテスト広告が表示されていれば OK です。

# 初回は、ATT のダイアログが表示されることも確認します。

まとめ

AdMob 導入方法を 改めてまとめました

以前は、任意だったのですが、AppStoreへの登録情報を AdMob に設定することが必須になりました。
＃ きちんと AppStore に登録されていないと広告が表示されないようになったようです。

説明は以上です。
不明な点やおかしな点ありましたら、コメント欄かこちらで教えてください。

関連記事:

[SwiftUI][AdMob] SwiftUI アプリへの AdMob 追加の方法 [Xcode][AdMob] AdMob ライブラリアップデート 手順のメモ [SwiftUI] UIImagePickerController を SwiftUI から使う方法 [Xcode] Xcode13 で作成した新規プロジェクトに Info.plist がない件