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

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

この記事からわかること

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

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

みんなの誕生日

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

posted withアプリーチ

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

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

インタースティシャル広告とはアフィリエイト(成功報酬型)広告の1種で画面遷移時や自然な切れ目に配置するフルスクリーンタイプの広告です。

iOSアプリに広告を掲載するには「Google AdMob」を導入します。「Google AdMob」はGoogleが提供しているiOSやAndroidなどのモバイルアプリに広告を設置できるサービスで、バナー広告をはじめリワード広告、インタースティシャル広告の実装も簡単に実装可能になっています。

Google AdSenseのホーム画面

おすすめ記事：【Swift UI】AdMobのリワード広告の実装方法！GADFullScreenContentDelegate

Swift UIでインタースティシャル広告を実装する方法

流れ

  1. AdMobへ登録と広告ユニットの作成
  2. プロジェクトへAdMobの導入
  3. AdMob用のファイルを作成
  4. インタースティシャルクラスの作成
  5. 広告を読み込むメソッドの実装
  6. 読み込んだ広告を表示するメソッドの実装
  7. GADFullScreenContentDelegateで結果を取得する
  8. Swift UIで表示させる

今回はフレームワークにSwift UIを使用している場合のインタースティシャル広告の実装方法を見ていきます。AdMobが未登録の場合や広告ユニットが未作成、プロジェクトへ未導入の場合は下記記事をご覧ください。

おすすめ記事：【SwiftUI】AdMobを使って広告を実装する方法!バナーViewの作成

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

準拠させたプロトコルと意味

おすすめ記事

【Swift UI】@ObservedObjectの意味と使い方！クラスとプロトコルとの関係

【Swift】delegate(デリゲート)とは？使い方とメリット

定義されたinterstitialAdプロパティには実際に読み込まれたインタースティシャル広告が格納されるのでGADInterstitialAd型でnilも許容できるようにしておきます。

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

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形式で渡します。

おすすめ記事：【Swift】UIApplicationとは？使い方とプロパティやメソッド

// インタースティシャル広告の表示
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 UI】画面遷移時に任意の処理を挟む方法！Navigation

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

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

Swift
Web制作phpjavascriptWordPressSwiftLaravelVue.jsgit/GitHubAWSLinuxAndroid

searchbox

スポンサー

ProFile

ame

趣味：読書,プログラミング学習,サイト制作,ブログ

IT嫌いを克服するためにITパスを取得しようと勉強してからサイト制作が趣味に変わりました笑
今はCMSを使わずこのサイトを完全自作でサイト運営中〜

自作iOSアプリ

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

みんなの誕生日

みんなの誕生日

友達や家族の誕生日を登録しておくと当日に通知が届きお知らせしてくれるiOSアプリです。

貸し借り管理アプリ

貸し借り管理アプリ

お金の貸し借りを管理するためのアプリです。貸借の色が分かれているので識別しやすく、使いやすさを求めてできるだけシンプルなUIにしています。一番人気のアプリです。

カシホン

カシホン

人に貸すことが多く、誰に貸したか忘れがちな本の貸し借りを記録できるアプリです。

Githubにて
iOSアプリのソースコードを公開中！

GitHub-みんなの誕生日
GitHub-貸し借り管理アプリ
GitHub-カシホン

New Article