[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 バージョンはできたらまたまとめます!

環境

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

色々な要素を表示する

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

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

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

色々な要素を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箇所定義されています。

  1. 右上 (デフォルト)
  2. 左上
  3. 右下
  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 にて自動的に再生されます。
ただし制御をするためには動画のデリゲートメソッドの実装が必要になるかと思います。

最後に

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

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

[iOS] Google Mobile Ads SDK を使ってアプリにネイティブ広告を表示する実用編 Google-Mobile-Ads-SDK 7.64.0」への1件のフィードバック

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Google フォト

Google アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。