【Swift UI】AdMobのインタースティシャル広告の実装方法！画面遷移時に表示
この記事からわかること
- Swift UIでインタースティシャル広告の実装方法
- AdMobを導入
- 画面遷移で広告を表示するには？
- GADInterstitialAdやGADFullScreenContentDelegateの使い方
- GADInterstitialAdクラスのloadメソッドやpresentメソッドの使い方
index
[open]
＼ アプリをリリースしました ／
インタースティシャル広告とは？
インタースティシャル広告とはアフィリエイト(成功報酬型)広告の1種で画面遷移時や自然な切れ目に配置するフルスクリーンタイプの広告です。
iOSアプリに広告を掲載するには「Google AdMob」を導入します。「Google AdMob」はGoogleが提供しているiOSやAndroidなどのモバイルアプリに広告を設置できるサービスで、バナー広告をはじめリワード広告、インタースティシャル広告の実装も簡単に実装可能になっています。
Swift UIでインタースティシャル広告を実装する方法
流れ
- AdMobへ登録と広告ユニットの作成
- プロジェクトへAdMobの導入
- AdMob用のファイルを作成
- インタースティシャルクラスの作成
- 広告を読み込むメソッドの実装
- 読み込んだ広告を表示するメソッドの実装
- GADFullScreenContentDelegateで結果を取得する
- Swift UIで表示させる
今回はフレームワークにSwift UIを使用している場合のインタースティシャル広告の実装方法を見ていきます。AdMobが未登録の場合や広告ユニットが未作成、プロジェクトへ未導入の場合は下記記事をご覧ください。
AdMobでは開発途中のテスト実装の際は本番用の広告ユニットIDを使用せずテスト用の広告ユニットIDを使用することを推奨しています。テスト実装の際は以下のIDを然るべき箇所に記述してください。
// インタースティシャル広告のテストID
ca-app-pub-3940256099942544/4411468910インタースティシャルクラスの作成
広告ユニットの作成とプロジェクトへAdMobの導入が完了したら実際にコードを書いていきます。まずは必要なフレームワークとライブラリのimportを忘れずに記述しておき、作成するAdmobInterstitialViewクラスは必要なプロトコルに準拠させるように定義していきます。
import SwiftUI
import UIKit
import GoogleMobileAds
class AdmobInterstitialView: NSObject, ObservableObject, GADFullScreenContentDelegate {
// インタースティシャル広告を読み込んだかどうか
@Published var interstitialLoaded: Bool = false
// インタースティシャル広告が格納される
var interstitialAd: GADInterstitialAd?
override init() {
super.init()
}
}準拠させたプロトコルと意味
- NSObject：スーパークラス
- ObservableObject：クラス変更を観測
- GADFullScreenContentDelegate：SDKから通知を受け取るデリゲートメソッドを実装
定義されたinterstitialAdプロパティには実際に読み込まれたインタースティシャル広告が格納されるのでGADInterstitialAd型でnilも許容できるようにしておきます。
広告を読み込むメソッドの実装
インタースティシャル広告を実際に読み込むためのメソッドを定義します。
GoogleMobileAdsライブラリをimportしたことでGADInterstitialAdクラスが使えるようになっているのでその中のloadメソッドを呼び出します。
class func load(withAdUnitID adUnitID: String, request: GADRequest?) async throws -> GADInterstitialAd// リワード広告の読み込み
func loadInterstitial() {
GADInterstitialAd.load(withAdUnitID: "ca-app-pub-3940256099942544/4411468910", request: GADRequest()) { ad, error in
if error != nil {
print("読み込み失敗")
self.interstitialLoaded = false
return
}
print("読み込み成功")
self.interstitialLoaded = true
self.interstitialAd = ad
self.interstitialAd?.fullScreenContentDelegate = self
}
}格納された広告(GADInterstitialAdオブジェクト)は使用されると破棄されてしまうので何回も視聴できるように最後にfullScreenContentDelegateプロパティに自身を設定して終了です。
読み込んだ広告を表示するメソッドの実装
続いて読み込んだ広告を表示させるメソッドを実装していきます。表示させるにはGADRewardedAdクラスのpresentメソッドを使用します。
func present(fromRootViewController rootViewController: UIViewController, userDidEarnRewardHandler: @escaping GADUserDidEarnRewardHandler)引数rootViewControllerには広告を表示するビューをUIViewController形式で渡します。
// インタースティシャル広告の表示
func presentInterstitial() {
let windowScene = UIApplication.shared.connectedScenes.first as? UIWindowScene
let root = windowScene?.windows.first!.rootViewController
if let ad = interstitialAd {
ad.present(fromRootViewController: root!)
self.interstitialLoaded = false
} else {
print("広告の準備ができていません")
self.interstitialLoaded = false
self.loadInterstitial()
}
}これで表示するための準備が整いました。その前におまけとしてSDKから通知(表示の成功/失敗など)を受け取れるようにしていきます。
GADFullScreenContentDelegateで結果を取得する
既にGADFullScreenContentDelegateには準拠させているのでデリゲートメソッドを実装するだけで任意のイベント結果を取得することができます。
// 失敗
func ad(_ ad: GADFullScreenPresentingAd, didFailToPresentFullScreenContentWithError error: Error) {
print("表示失敗")
self.interstitialLoaded = false
self.loadInterstitial()
}
// 成功
func adWillPresentFullScreenContent(_ ad: GADFullScreenPresentingAd) {
print("表示成功")
self.interstitialLoaded = false
}
// 閉じられた
func adDidDismissFullScreenContent(_ ad: GADFullScreenPresentingAd) {
print("広告が閉じられた")
self.interstitialLoaded = false
}Swift UIで表示させる
最後にSwift UIで表示させます。本来は画面遷移するタイミングに差し込みますが、今回はボタンクリックで表示されるようにしていきます。
import SwiftUI
struct ContentView: View {
// AdMob interstitial広告
@ObservedObject var interstitial = AdmobInterstitialView()
var body: some View {
Button(action: {
interstitial.presentInterstitial()
}) {
Text("広告を視聴する")
}.onAppear() {
interstitial.loadInterstitial()
}.disabled(!interstitial.interstitialLoaded)
}
}全体のコード
最後に全体のコードを載せておきます。
import SwiftUI
import UIKit
import GoogleMobileAds
class AdmobInterstitialView: NSObject, ObservableObject, GADFullScreenContentDelegate {
// インタースティシャル広告を読み込んだかどうか
@Published var interstitialLoaded: Bool = false
// インタースティシャル広告が格納される
var interstitialAd: GADInterstitialAd?
override init() {
super.init()
}
// リワード広告の読み込み
func loadInterstitial() {
GADInterstitialAd.load(withAdUnitID: "ca-app-pub-3940256099942544/4411468910", request: GADRequest()) { (ad, error) in
if let _ = error {
print("読み込み失敗")
self.interstitialLoaded = false
return
}
print("読み込み成功")
self.interstitialLoaded = true
self.interstitialAd = ad
self.interstitialAd?.fullScreenContentDelegate = self
}
}
// インタースティシャル広告の表示
func presentInterstitial() {
let windowScene = UIApplication.shared.connectedScenes.first as? UIWindowScene
let root = windowScene?.windows.first!.rootViewController
if let ad = interstitialAd {
ad.present(fromRootViewController: root!)
self.interstitialLoaded = false
} else {
print("広告の準備ができていません")
self.interstitialLoaded = false
self.loadInterstitial()
}
}
// 失敗
func ad(_ ad: GADFullScreenPresentingAd, didFailToPresentFullScreenContentWithError error: Error) {
print("表示失敗")
self.loadInterstitial()
}
// 成功
func adWillPresentFullScreenContent(_ ad: GADFullScreenPresentingAd) {
print("表示成功")
}
// 閉じられた
func adDidDismissFullScreenContent(_ ad: GADFullScreenPresentingAd) {
print("広告が閉じられた")
}
}アプリに入れ込む実装例
インタースティシャル広告は画面が遷移した際になどに表示するのが理想です。Swift UIで画面遷移を実装する際はNavigationViewまたはNavigationStackのNavigationLinkなどを使用します。
ですがNavigationLinkなどを実装した場合はインタースティシャル表示の発火イベントと画面遷移の発火イベントをどちらも実行できるようにしないといけません。
そのような際は以下のようにsimultaneousGestureを使用することで解決できます。
NavigationLink {
ChildView(item)
} label: {
Text(item.name)
}.simultaneousGesture(TapGesture().onEnded {
interstitial.presentInterstitial()
})まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。
ご覧いただきありがとうございました。
