[swift] MoPubのtableViewによるネイティブ広告をいれてみた。
MoPubのネイティブ広告をいれてみたけど、swiftで使うには割と大変だったのでメモ。
ライブラリ導入
まずはpodで下記を記載してpod installする
|
1 |
pod 'mopub-ios-sdk' |
これだけでは使えず、bridging-headerを用意してbridging-headerに下記を記載する
|
1 |
#import "MoPub-Bridging-Header.h" |
しかし、これではエラーが出るので、project設定のなかのHeader Search Pathsに「”${PODS_ROOT}/mopub-ios-sdk/MoPubSDK”」を「recursive」で追加してあげる
swiftで実装
これで、ようやく使える準備ができたので、サンプルをもとに同じように実装してみる。
今回はMPNativeAdPlacerTableViewController.mのサンプルをもとに、テーブルビューへのネイティブ広告表示を実装してみる。
最初に動画広告用のMPNativeVideoTableViewAdPlacerViewを用意しておく。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 |
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には下記を記載。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
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がない日本は置いてけぼり感がある感じなので実装はやめてしまいました。。。
