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

はじめに(承前)

アプリにGoogle 広告を出したい！
というわけで、本ブログの前のポスト
[iOS] Google Mobile Ads SDK を使ってアプリにネイティブ広告を表示する Google-Mobile-Ads-SDK 7.64.0
で、とりあえずタイトルとメイン画像を表示してみました。

大体の骨組みはできたので、本ポストでは表示要素の追加や複数同時リクエスト機能などを入れて
もう少し進んだ広告表示まで行って完了とします！

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

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

環境

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

色々な要素を表示する

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

タイトルやメイン画像以外にも表示要素はあります。
が、それらは要素があることは保証されていないので、
存在しないパターンも考慮しておく必要があります。

というわけで色々な要素を表示してみます。
要素をIBOutlet で接続していきます。

コード最下部の adChoiceView には接続していませんが、それについては後述します。

要素に値を代入していきます。

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

        (nativeAdView.callToActionView as? UIButton)?
            .setTitle("Call To Action View: \(nativeAd.callToAction ?? "")", for: .normal)
        (nativeAdView.iconView as? UIImageView)?.image = nativeAd.icon?.image
        (nativeAdView.bodyView as? UILabel)?.text = "Body View: \(nativeAd.body ?? "")"
        (nativeAdView.storeView as? UILabel)?.text = "Store View: \(nativeAd.store ?? "")"
        (nativeAdView.priceView as? UILabel)?.text = "Price View: \(nativeAd.price ?? "")"
        (nativeAdView.imageView as? UIImageView)?.image = nativeAd.images?.first?.image
        (nativeAdView.starRatingView as? UILabel)?.text = "Star Rating View: \(nativeAd.starRating?.stringValue ?? "")"
        (nativeAdView.advertiserView as? UILabel)?.text = "Advertiser View: \(nativeAd.advertiser ?? "")"
        
        nativeAdView.callToActionView?.isUserInteractionEnabled = false
        nativeAdView.nativeAd = nativeAd
    }
}

下の方でcallToActionView のユーザ操作を禁止していますが、
これをしないとSDK側でタップイベントを正しく処理できないとのことです。

アプリを実行するとこんな感じになります！

割と値が入っていないものがありますね！

iマークボタンの位置を変える

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

SDKが自動的に、広告の右上にiマークボタンを挿入していますが、これは位置を指定することができます。
SDKで設定可能な位置が4箇所定義されています。

右上 (デフォルト)
左上
右下
左下

位置の指定は GADAdLoader の初期化時にオプションとして指定します。
こんな感じ。

        let adViewOptions = GADNativeAdViewAdOptions()
        adViewOptions.preferredAdChoicesPosition = .topRightCorner
        
        adLoader = GADAdLoader(
            adUnitID: type(of: self).adUnitId,
            rootViewController: self,
            adTypes: [GADAdLoaderAdType.unifiedNative],
            options: [adViewOptions]
        )
        adLoader.delegate = self
        adLoader.load(GADRequest())

上でIBOutlet 接続しなかった adChoiceView はこのiマークボタンを表示するView となります。
iマークボタンの調整ははコードで位置指定するだけと思うので、基本的にはIBOutlet 接続は不要なのかなと思います。

複数の広告を同時にリクエストする

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

こちらも GADAdLoader の初期化時にオプションとして指定します。
こんな感じ。

        let multipleAdsOptions = GADMultipleAdsAdLoaderOptions()
        multipleAdsOptions.numberOfAds = 5
        
        adLoader = GADAdLoader(
            adUnitID: type(of: self).adUnitId,
            rootViewController: self,
            adTypes: [GADAdLoaderAdType.unifiedNative],
            options: [multipleAdsOptions]
        )
        adLoader.delegate = self
        adLoader.load(GADRequest())

複数の広告が配列として一発で返ってくる、というわけではなく、
指定した数分のデリゲートメソッドが何回も呼ばれます！

メディエーションを指定している場合は利用しないよう公式ドキュメントに記載されているので、
確認してから使った方がよさそうです。

その他のオプションなど

他にも、画像や動画のアスペクト比などを指定できるオプションや、動画広告などもあります。

動画広告については、動画をリクエストするオプション指定が必要そうです。

動画再生は画像のときから何も変更を加えずとも GADMediaView にて自動的に再生されます。
ただし制御をするためには動画のデリゲートメソッドの実装が必要になるかと思います。

詳解 Swift 第5版
￥3,267

Amazon

最後に

これで稼げるようになれると嬉しいですね！💰

Google のネイティブ広告の実装まとめは以上です。
お疲れ様でした！