[iOS] Google Mobile Ads SDK を使ってアプリにネイティブ広告を表示する Google-Mobile-Ads-SDK 7.64.0

はじめに
iOSアプリでのGoogle 広告の種類
環境
環境構築
View 周りを準備する
広告リクエストする
レスポンスを受け取り、要素を表示する
実行してみる
最後に

はじめに

アプリにGoogle 広告を出したい！
というわけでその手順を書いていきます。

本ポストは、細かいことは置いておいてとりあえず
ネイティブ広告を表示して実装の流れを掴みたい人向けです。

基本的なことはGoogle公式サイトのドキュメントやGitHub に上がっている公式のサンプルアプリがあるので、
それらを補う感じで書いていきます。

注意: 2021/02/23 時点の最新版は Google-Mobile-Ads-SDK 8.1.0 ですが、公式ドキュメントがそれに追いついていません。
(最新版では GADUnifiedNativeAd などが消えているっぽい)

なので今回は簡単のために、手順書通りに進められる 7.64.0 でいきます。
8.1.0 バージョンはできたらまたまとめます！

iOSアプリでのGoogle 広告の種類

公式ドキュメントに4種類載っています。

バナー
1. 画面上部か下部に表示され続ける横長広告
インタースティシャル
1. 全画面表示される広告
ネイティブ
1. UIView を自由に配置してデザインをカスタマイズできる広告
リワード広告
1. フルスクリーンの動画広告で最後まで見るなどするとアプリ内で報酬を獲得できる

本ポストではデザインをカスタマイズできるネイティブ広告を実装します！
が、ネイティブ広告の説明に気になる一文が。

これは現在、限定ベータ版で提供されており、利用できるのは一部のパブリッシャーに限られます。
https://firebase.google.com/docs/admob/ios/quick-start?hl=ja#choose_an_ad_format

んんん、大丈夫なのかなこれはw
まぁ参考になれば。。！

環境

Xcode12.1
Swift 5.3
シミュレータ: iOS 14.1

環境構築

とりあえず公式ドキュメント通りに進めます。

Firebase を利用する・しないで、手順が異なるようです。

利用する場合
- https://firebase.google.com/docs/admob/ios/quick-start
利用しない場合
- https://developers.google.com/admob/ios/quick-start?hl=ja

流れは以下のようになっており、粛々とやっていけば大丈夫です。

CocoaPods でインストール
Info.plist の編集
AppDelegate に1, 2行追加する

今回はテスト的に表示するだけなのでAdMobアカウント周りの設定は飛ばして大丈夫です。

ちなみにSwiftPM 版のFirebase を見つけました。
Swift Package Manager for Firebase Beta
が、広告系のパッケージがどうもなさそうだったので(見逃した？)、今回は手順通りCocoaPods で入れます。

Firebase を利用しない場合の手順に沿って進めます。
(利用する場合の手順だと後述のIBOutlet の接続がなぜかうまくいかず詰みました😭)

日本語版と英語版で公式ドキュメントの記載内容が異なっていたり、
そもそも最新版のSDKに対応しておらず混乱するので、本ポストで使うパッケージとバージョンを書いておきます。
Podfile に以下のように設定しました。

  pod 'Firebase/Analytics'
  pod 'Google-Mobile-Ads-SDK', '7.64.0'

ここで重要なのが Google-Mobile-Ads-SDK のバージョンです。

2021/02/23 時点の最新版は 8.1.0 ですが、公式ドキュメントがそれに追いついていません。

なので今回は簡単のために、手順書通りに進められる 7.64.0 でいきます。
8.1.0 バージョンはまたまとめます！

さて、上記の設定で pod install --repo-update を実行すると、以下のようなパッケージが入りました。

Analyzing dependencies
Downloading dependencies
Installing Firebase (6.34.0)
Installing FirebaseAnalytics (6.9.0)
Installing FirebaseCore (6.10.4)
Installing FirebaseCoreDiagnostics (1.7.0)
Installing FirebaseInstallations (1.7.0)
Installing Google-Mobile-Ads-SDK (7.64.0)
Installing GoogleAppMeasurement (6.9.0)
Installing GoogleDataTransport (7.5.1)
Installing GoogleUserMessagingPlatform (1.4.0)
Installing GoogleUtilities (6.7.2)
Installing PromisesObjC (1.2.12)
Installing Succinct (0.4.31)
Installing SwiftGen (6.4.0)
Installing nanopb (1.30906.0)
Generating Pods project
Integrating client project
Pod installation complete! There are 4 dependencies from the Podfile and 14 total pods installed.

では以降実装していきます！
まずは最低限の実装で、広告リクエストから表示するまでに焦点を絞ります。

View 周りを準備する
広告リクエストする
レスポンスを受け取り、要素を表示する

の順で書いていきます。

View 周りを準備する

このあたりの公式ドキュメントはこちら。

本ポストでは4つのファイルを準備します。

広告用のViewクラス.xib
広告用のViewクラス
ViewController
Main.storyboard (ViewController 用)

広告用のViewクラス.xib

SampleGoogleAdView.xib とします。

以下のように適当にUIView を配置し、Custom Class に GADUnifiedNativeAdView を指定します。

GADUnifiedNativeAdView はGoogle 広告SDKのView 用クラスで、
これの上にタイトルなどの要素を配置していきます。

ということでタイトルとメイン画像を配置します。

タイトルは通常のUILabel で配置します。
配置した後、以下のようにGADUnifiedNativeAdView の headlineView プロパティに IBOutlet で接続します。

続いてメイン画像を配置します。

まずUIView を配置し(分かりやすいように赤色にしています)、
その後以下のようにCustom Class を GADMediaView にします。

メイン画像用View の Custom Class を GADMediaView にする

GADMediaView にすると、メインの広告画像や動画を表示することができます。
逆に言うと、GADMediaView にしないと表示されません。

で、タイトルと同様にmediaView にIBOutlet を接続します。

xib の設定は以上です。

以降はさくっと残りのView の準備をしていきます。

広告用のViewクラス

SampleGoogleAdView クラスとします。

import UIKit
import GoogleMobileAds

final class SampleGoogleAdView: UIView {
    private var nativeAdView: GADUnifiedNativeAdView!
    
    override init(frame: CGRect){
        super.init(frame: frame)
        loadNib()
    }

    required init(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)!
        loadNib()
    }

    func loadNib(){
        nativeAdView = Bundle.main.loadNibNamed("SampleGoogleAdView", owner: self, options: nil)?.first as? GADUnifiedNativeAdView

        nativeAdView.frame = self.bounds
        self.addSubview(nativeAdView)
    }
}

以上です。
特に言うことはありません！

ViewController

SampleGoogleAdVC とします。

import UIKit
import GoogleMobileAds

final class SampleGoogleAdVC: UIViewController {
    private var sampleGoogleAdView: SampleGoogleAdView!
    
    var adLoader: GADAdLoader!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        sampleGoogleAdView = SampleGoogleAdView(
            frame: CGRect(x: 20, y: 20, width: 300, height: 300)
        )
        view.addSubview(sampleGoogleAdView)
        
        loadAd()
    }
}

上で作ったSampleGoogleAdView を貼り付けています。

また、adLoader という広告リクエスト用のプロパティもついでに用意しています。
リクエストのデリゲートメソッド呼び出しのために参照を持っておく必要があります。

loadAd は広告リクエスト用に準備したメソッドで、後述します。

以上です！

Main.storyboard (ViewController 用)

ViewController を配置し、Custom Class に上で作成した SampleGoogleAdVC を指定します。

is Initial View Controller にチェックを入れるのを忘れずに。

以上です。
特に言うことはありません！

これでView周りの準備が整ったので、
あとはリクエストして表示するロジックを入れていくだけです。

広告リクエストする

このあたりの公式ドキュメントはこちら。

広告リクエスト用にSampleGoogleAdVC に以下のロジックを追加します。

extension SampleGoogleAdVC {
    private static let adUnitId = "ca-app-pub-3940256099942544/3986624511"
    private func loadAd() {
        adLoader = GADAdLoader(
            adUnitID: type(of: self).adUnitId,
            rootViewController: self,
            adTypes: [GADAdLoaderAdType.unifiedNative],
            options: []
        )
        adLoader.delegate = self
        adLoader.load(GADRequest())
    }
}

loadAd メソッドとして切り出しました。
先に書いた通り、今回はviewDidLoad で呼び出しています。

adUnitId はサンプル用のIdを指定しています。

表示までの流れに焦点を当てるので、リクエスト時のオプションなどの説明はまたの機会に。

レスポンスを受け取り、要素を表示する

広告リクエストの受け取りは、リクエスト時に指定したデリゲートのクラスで行います。
このあたりの公式ドキュメントはこちら。

extension SampleGoogleAdVC: GADUnifiedNativeAdLoaderDelegate {
    func adLoader(_ adLoader: GADAdLoader, didReceive nativeAd: GADUnifiedNativeAd) {
        sampleGoogleAdView.setNativeAd(nativeAd)
    }
    
    func adLoader(_ adLoader: GADAdLoader, didFailToReceiveAdWithError error: GADRequestError) {
    }
}

書いているまんまですが、上が成功時、下がエラー時に呼ばれるデリゲートメソッドです。

成功時に GADUnifiedNativeAd クラスのオブジェクトが返ってきます。
これにタイトルや画像などのプロパティが含まれているので、
それらをView の各要素に格納すれば表示できます。

表示周りの公式ドキュメントはこちら。

上記デリゲートメソッド内で SampleGoogleAdView.setNativeAd メソッドを呼ぶようにしているので、
SampleGoogleAdView にその中身を書いていきます。

extension SampleGoogleAdView {
    func setNativeAd(_ nativeAd: GADUnifiedNativeAd) {
        (nativeAdView.headlineView as? UILabel)?.text = nativeAd.headline
        nativeAdView.mediaView?.mediaContent = nativeAd.mediaContent
        
        nativeAdView.nativeAd = nativeAd
    }
}

ここは公式ドキュメント通りなので特筆することはありません。

ということで実行してみます！

実行してみる

表示されました！👏

右上のiマークはSDK側で自動的に挿入してくれています。
また、各要素をタップするとページがブラウザで開くのでお試しあれ。

とりあえず表示までの大まかな流れでした！

詳解 Swift 第5版
￥3,267

Amazon

最後に

少し長くなったので、一旦切ります。
今回の続き(他の要素やオプションなどについてのまとめ)は以下ポストになります。

[iOS] Google Mobile Ads SDK を使ってアプリにネイティブ広告を表示する実用編 Google-Mobile-Ads-SDK 7.64.0

以上です。
お疲れ様でした！