[swift] MoPubのtableViewによるネイティブ広告をいれてみた。

MoPubのネイティブ広告をいれてみたけど、swiftで使うには割と大変だったのでメモ。

ライブラリ導入

まずはpodで下記を記載してpod installする

pod 'mopub-ios-sdk'

これだけでは使えず、bridging-headerを用意してbridging-headerに下記を記載する

#import "MoPub-Bridging-Header.h"

しかし、これではエラーが出るので、project設定のなかのHeader Search Pathsに「”${PODS_ROOT}/mopub-ios-sdk/MoPubSDK”」を「recursive」で追加してあげる

swiftで実装

これで、ようやく使える準備ができたので、サンプルをもとに同じように実装してみる。

今回はMPNativeAdPlacerTableViewController.mのサンプルをもとに、テーブルビューへのネイティブ広告表示を実装してみる。

最初に動画広告用のMPNativeVideoTableViewAdPlacerViewを用意しておく。

class MPNativeVideoTableViewAdPlacerView: UIView, MPNativeAdRendering {
    var titleLabel: UILabel
    var mainTextLabel: UILabel
    var iconImageView: UIImageView
    var mainImageView: UIImageView
    var videoView: UIView
    var DAAIconImageView: UIImageView
    var ctaLabel: UILabel
    
    override init(frame: CGRect) {
        titleLabel = UILabel(frame: CGRect(x: 75, y: 10, width: 212, height: 60))
        titleLabel.font = UIFont.boldSystemFont(ofSize: 17.0)
        titleLabel.text = "Title"
        mainTextLabel = UILabel(frame: CGRect(x: 10, y: 68, width: 300, height: 50))
        mainTextLabel.font = UIFont.systemFont(ofSize: 14.0)
        mainTextLabel.text = "Text"
        mainTextLabel.numberOfLines = 2
        iconImageView = UIImageView(frame: CGRect(x: 10, y: 10, width: 60, height: 60))
        mainImageView = UIImageView(frame: CGRect(x: 10, y: 119, width: 300, height: 156))
        mainImageView.clipsToBounds = true
        mainImageView.contentMode = .scaleAspectFill
        videoView = UIView(frame: CGRect(x: 10, y: 119, width: 300, height: 156))
        videoView.clipsToBounds = true
        videoView.contentMode = .scaleAspectFill
        ctaLabel = UILabel(frame: CGRect(x: 10, y: 270, width: 300, height: 48))
        ctaLabel.font = UIFont.systemFont(ofSize: 14.0)
        ctaLabel.text = "CTA Text"
        ctaLabel.textColor = UIColor.green
        ctaLabel.textAlignment = .right
        DAAIconImageView = UIImageView(frame: CGRect(x: 290, y: 10, width: 20, height: 20))
        titleLabel.textColor = UIColor(white: 0.86, alpha: 1.0)
        mainTextLabel.textColor = UIColor(white: 0.86, alpha: 1.0)
        super.init(frame: frame)
        addSubview(titleLabel)
        addSubview(mainTextLabel)
        addSubview(mainImageView)
        addSubview(videoView)
        addSubview(iconImageView)
        addSubview(ctaLabel)
        addSubview(DAAIconImageView)
        backgroundColor = UIColor(white: 0.21, alpha: 1.0)
        clipsToBounds = true
    }
    
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    override func layoutSubviews() {
        if UIInterfaceOrientationIsLandscape(MPInterfaceOrientation()) {
            titleLabel.frame = CGRect(x: 200, y: 10, width: 212, height: 60)
            videoView.frame = CGRect(x: 0, y: 119, width: 320, height: 156)
        } else {
            titleLabel.frame = CGRect(x: 75, y: 10, width: 212, height: 60)
            videoView.frame = CGRect(x: 10, y: 119, width: 300, height: 156)
        }
    }
    
    func nativeMainTextLabel() -> UILabel {
        return self.mainTextLabel
    }
    
    func nativeTitleTextLabel() -> UILabel {
        return self.titleLabel
    }
    
    func nativeCallToActionTextLabel() -> UILabel {
        return self.ctaLabel
    }
    
    func nativeIconImageView() -> UIImageView {
        return self.iconImageView
    }
    
    func nativeMainImageView() -> UIImageView {
        return self.mainImageView
    }
    
    func nativeVideoView() -> UIView {
        return self.videoView
    }
    
    func nativePrivacyInformationIconImageView() -> UIImageView {
        return self.DAAIconImageView
    }
}

次に、tableViewがある、ViewControllerには下記を記載。

override func viewDidLoad() {
        super.viewDidLoad()
        configurationMopub()
}

func configurationMopub() {
        let nativeAdHeight: CGFloat = 312.0
        let nativeAdSettings = MPStaticNativeAdRendererSettings()
        nativeAdSettings.renderingViewClass = MPTableViewAdPlacer.self
        nativeAdSettings.viewSizeHandler = { (maximumWidth: CGFloat) in
            return CGSize(width: maximumWidth, height: nativeAdHeight)
        }
        let nativeAdConfig = MPStaticNativeAdRenderer.rendererConfiguration(with: nativeAdSettings)
        nativeAdConfig?.supportedCustomEvents = ["MPMoPubNativeCustomEvent", "FlurryNativeCustomEvent"]
        let nativeVideoAdSettings = MOPUBNativeVideoAdRendererSettings()
        nativeAdSettings.renderingViewClass = MPNativeVideoTableViewAdPlacerView.self
        nativeAdSettings.viewSizeHandler = { (maximumWidth: CGFloat) in
            return CGSize(width: maximumWidth, height: nativeAdHeight)
        }
        let nativeVideoConfig: MPNativeAdRendererConfiguration? = MOPUBNativeVideoAdRenderer.rendererConfiguration(with: nativeVideoAdSettings)
        let positioning = MPServerAdPositioning.init
        placer = MPTableViewAdPlacer(tableView: tableView, viewController: self, adPositioning: positioning(), rendererConfigurations: [nativeAdConfig!, nativeVideoConfig!])
        super.init()
        placer?.loadAds(forAdUnitID: "76a3fefaced247959582d2d2df6f4757") // test用のad unit id
}

/// dequeueReusableCellをmp_dequeueReusableCellに書き換える
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        guard let cell = tableView.mp_dequeueReusableCell(withIdentifier: "cellIdentifier", for: indexPath) else {
            return UITableViewCell()
        }
        return cell
}

/// deselectもmp_deselectRowに書き換えておく
func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        tableView.mp_deselectRow(at: indexPath, animated: true)
}

こんな感じで実装できました。

後日談

結局本番のunit idではうまく表示できず、さらにtaxの登録にtax idが必要といわれ、tax idがない日本は置いてけぼり感がある感じなので実装はやめてしまいました。。。