🌊

SwiftUIでAdMobを使ってバナー広告を表示する

2021/03/16に公開

Firebase

こちらの記事で紹介されていたAdMobの導入方法を参考にして、自分のSwiftUIアプリにAdMobのバナー広告を導入しました。

このような感じでバナーが表示できました。

私のアプリはFirebaseとSwiftUIを使っていたので手順が少し異なりました、Firebaseを使っている場合の導入手順はこちらです。

Mobile Ads SDK をインポートする

CocoaPodsに以下を追加しました。

pod 'Firebase/Analytics'
pod 'Firebase/AdMob'

Info.plist を更新する

Info.plistには次のようなkey/valueを追加します。

<key>GADApplicationIdentifier</key>
<string>アプリID</string>

モバイル広告を初期化する

広告を初期化するため、起動時にGADMobileAds.start()を呼ぶ必要があります。ドキュメントに記載されている初期化コードの実装例はこちらです。

import Firebase
...

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {

  var window: UIWindow?

  func application(_ application: UIApplication,
      didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {

    // Use Firebase library to configure APIs.
    FirebaseApp.configure()

    // Initialize the Google Mobile Ads SDK.
    GADMobileAds.sharedInstance().start(completionHandler: nil)

    return true
  }

}

Xcode12で生成したSwiftUIのプロジェクトでは@mainの付いたstructがアプリのエントリーポイントになるのでinit()を追加してそこに初期化コードを書きました。

import SwiftUI
import Firebase

@main
struct MyApp: App {
    init() {
        FirebaseApp.configure()
        GADMobileAds.sharedInstance().start(completionHandler: nil)
    }
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

バナーを表示する

バナー広告を表示するためのGADBannerViewというUIViewを継承したクラスが用意されています。SwiftUIではUIViewをそのまま表示することができないので以下のサイトを参考に2通りの方法で表示を確認をしました。

UIViewRepresentable

UIViewRepresentableを使ってGADBannerViewをwrapして表示する方法です。GADBannerViewのrootViewControllerを指定する必要があるのでUIApplicationからrootViewControllerを取得しています。

struct AdmobBannerView: UIViewRepresentable {
    func makeUIView(context: Context) -> GADBannerView {
        let view = GADBannerView(adSize: kGADAdSizeBanner)
        #if DEBUG
        view.adUnitID = "ca-app-pub-3940256099942544/2934735716"
        #else
        view.adUnitID = "..."
        #endif
        view.rootViewController = UIApplication.shared.windows.first?.rootViewController
        view.load(GADRequest())
        return view
    }

    func updateUIView(_ uiView: GADBannerView, context: Context) {
    }
}

UIViewControllerRepresentable

こちらはUIViewControllerRepresentableを使ってUIViewControllerの中にGADBannerViewを表示する方法です。

struct AdmobBannerViewController: UIViewControllerRepresentable {
    func makeUIViewController(context: Context) -> some UIViewController {
        let view = GADBannerView(adSize: kGADAdSizeBanner)
        #if DEBUG
        view.adUnitID = "ca-app-pub-3940256099942544/2934735716"
        #else
        view.adUnitID = "..."
        #endif
        let viewController = UIViewController()
        viewController.view.addSubview(view)
        viewController.view.frame = CGRect(origin: .zero, size: kGADAdSizeBanner.size)
        view.rootViewController = viewController
        view.load(GADRequest())
        return viewController
    }

    func updateUIViewController(_ uiViewController: UIViewControllerType, context: Context) {
    }
}

Viewへの組み込みは以下のように行います。

AdmobBannerView().frame(width: 320, height: 50)

おわり

以上がFirebaseを使ったSwiftUIアプリでAdMobを使ってバナーを表示する方法でした。実際に広告を追加したのはこちらのアプリです。