こんにちは、株式会社 Zaim で iOS エンジニアをしている TEM です。iOS版の Zaim アプリでは昨年から、AdMob のネイティブ広告を使って、レイアウトをカスタマイズした広告を表示しています。この記事では、その実装の際に得られた知見を紹介したいと思います。

AdMob ネイティブ広告

AdMob ネイティブ広告とは、アプリに表示する広告のデザインをカスタマイズできる広告のことです。コンテンツに自然に溶け込む形でレイアウト可能なため、通常のバナー広告よりユーザーのストレスになりにくいと言われています。

ネイティブ広告の読み込み

ネイティブ広告の読み込みにはGADAdLoaderを使用します。GADAdLoaderオブジェクトのloadメソッドを呼ぶことでGADAdLoaderDelegateを介して広告データであるGADNativeAdを受け取れます。なお、具体的な読み込み方法については割愛するので、必要に応じて公式ドキュメントを確認してください。

GADNativeAd

GADNativeAdはネイティブ広告で表示するコンテンツを持つオブジェクトです。下記のようなプロパティを持っており、アプリ側ではこれらの要素を必要に応じて配置していくことでカスタマイズした広告を作成していきます。

• headline：見出し

• callToAction：「インストール」など、何らかの行動を取るように促すテキスト

• icon：アイコン

• body：説明文

• starRating：アプリストアの評価

• store：アプリストア名。「 App Store」など。

• price：アプリの価格

• advertiser：広告主の識別子。広告主の名前や表示されるURLなど。

• mediaContent：画像や動画など。

広告のカスタマイズ

GADNativeAdViewを継承したUIViewを作成し、そのViewに対して表示したい要素を配置することで画面のカスタマイズが行えます。普段のInterface Builderを使った画面のレイアウトと同じで特に変わったことはありません。

広告のカスタマイズの際は別途ポリシーとガイドラインを参照してください。

広告データの配置

最後に読み込んだ広告オブジェクトをViewに配置することで完了です。

    func setupNativeAd(_ nativeAd: GADNativeAd) {
        guard let mediaView = mediaView else {
            return
        }
        (headlineView as? UILabel)?.text = nativeAd.headline

        if let advertiser = nativeAd.advertiser {
            advertiserView?.isHidden = false
            storeView?.isHidden = true
            (advertiserView as? UILabel)?.text = advertiser
        } else if let store = nativeAd.store {
            advertiserView?.isHidden = true
            storeView?.isHidden = false
            (storeView as? UILabel)?.text = store
        } else {
            advertiserView?.isHidden = true
            storeView?.isHidden = true
        }

        mediaView.mediaContent = nativeAd.mediaContent
        let mediaViewWidthMultipier = UIDevice.current.userInterfaceIdiom == .pad ? 0.5 : 1.0
        NSLayoutConstraint.activate([
            mediaView.widthAnchor.constraint(equalTo: mediaView.heightAnchor, multiplier: nativeAd.mediaContent.aspectRatio),
            mediaView.widthAnchor.constraint(equalTo: mediaContentView.widthAnchor, multiplier: mediaViewWidthMultipier),
        ])

        (bodyView as? UILabel)?.text = nativeAd.body
        bodyView?.isHidden = nativeAd.body.isNil

        self.nativeAd = nativeAd
    }

まとめ

かなり簡単な手順で広告のレイアウトをカスタマイズすることができました。単純なバナー広告を表示するよりもアプリの外観をくずさず配置できる点が良いと思ってます。ぜひ参考にしてみてください

さいごに

Zaim では、エンジニアを募集しています。ぜひ話を聞きに来てください！