2023/8/31

【Swift UI】AdMobのインタースティシャル広告の実装方法！画面遷移時に表示

この記事からわかること

Swift UIでインタースティシャル広告の実装方法
AdMobを導入
画面遷移で広告を表示するには？
GADInterstitialAdやGADFullScreenContentDelegateの使い方
GADInterstitialAdクラスのloadメソッドやpresentメソッドの使い方

index

[open]

＼アプリをリリースしました／

友達や家族の誕生日をメモ！通知も届く-みんなの誕生日-

posted withアプリーチ

公式リファレンス：インタースティシャル広告

インタースティシャル広告とは？

インタースティシャル広告とはアフィリエイト(成功報酬型)広告の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から通知を受け取るデリゲートメソッドを実装

広告を読み込むメソッドの実装

GADInterstitialAd

インタースティシャル広告を実際に読み込むためのメソッドを定義します。

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()
})

まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。

ご覧いただきありがとうございました。

Swift