iosswiftmopubnative-ads

Swift - Mopub Native Ad loaded successfully but it's not displaying on view


I'm trying to implement MoPub's Native Ad manually to my app in swift.

I was able to get it loaded successfully

Loan Calculator[4217:1022703] MOPUB: Successfully loaded native ad.

I have a view I created in the storyboard and it's connected

@IBOutlet var NativeAdView: UIView!

Since MoPub's documentation on this is written in Objective C, I have to translate everything to swift. Here's my code to load the native ad that's under viewDidLoad().

let settings = MPStaticNativeAdRendererSettings()
            settings.renderingViewClass = CalculatorNativeAdView.self

let config = MPStaticNativeAdRenderer.rendererConfiguration(with: settings)

let adRequest = MPNativeAdRequest(adUnitIdentifier: MoPubTestID, rendererConfigurations: [config!])

let targeting = MPNativeAdRequestTargeting()

targeting.desiredAssets = Set<AnyHashable>([kAdTitleKey, kAdTextKey, kAdCTATextKey, kAdIconImageKey, kAdMainImageKey, kAdStarRatingKey])

adRequest?.start(completionHandler: { request, response, error in
                if error != nil {
                    print(error.debugDescription)
                } else {
                   let nativeAd = response
                    nativeAd?.delegate = self
                    let nativeAdViewCon: UIView? = try! nativeAd?.retrieveAdView()
                    nativeAdViewCon?.frame = self.NativeAdView.bounds
                    print(nativeAdViewCon?.frame)
                    if let aView = nativeAdViewCon {
                        self.NativeAdView.addSubview(aView)
                    }
                }
            })

CalculatorNativeAdView is connected to the .xib I created for this Native ad.

import UIKit
import MoPub

class CalculatorNativeAdView: UIView, MPNativeAdRendering {

    @IBOutlet var titleLabel: UILabel!
    @IBOutlet var mainTextLabel: UILabel!
    @IBOutlet var mainImageView: UIImageView!
    @IBOutlet var iconImageView: UIImageView!
    @IBOutlet var callToActionLabel: UILabel!

    @IBOutlet var privacyInformationIconImageView: UIImageView!

    override func layoutSubviews() {
        super.layoutSubviews()
        // layout your views
    }

    func nativeMainTextLabel() -> UILabel? {
        return mainTextLabel
    }

    func nativeTitleTextLabel() -> UILabel? {
        return titleLabel
    }

    func nativeCallToActionTextLabel() -> UILabel? {
        return callToActionLabel
    }

    func nativeIconImageView() -> UIImageView? {
        return iconImageView
    }

    func nativeMainImageView() -> UIImageView? {
        return mainImageView
    }

    func nativePrivacyInformationIconImageView() -> UIImageView? {
        return privacyInformationIconImageView
    }  
}

I added MPNativeAdDelegate to the viewController and added viewControllerForPresentingModalView()

func viewControllerForPresentingModalView() -> UIViewController! {
        return self
    }

The NativeAdView has a frame so I don't think that's the issue

Optional((0.0, 0.0, 260.0, 260.0))

The Ad should display on the orange box shown here

enter image description here What am I doing wrong? Am I missing something?

link to MoPub's Native ad documentation: https://developers.mopub.com/docs/ios/native/

-- UPDATE --

I did some experimenting and I confirmed that the view is actually being added to my NativeAdView. I changed the background color of aView to blue.

aView.backgroundColor = UIColor.blue

This is the result.

enter image description here

The ad is still not displaying. Going to do some research on .xib files and make sure I'm doing that correctly.

-- Update --

Printing the properties of the response gave me this.

Optional([AnyHashable("privacyiconuiimage"): <UIImage: 0x283eadb90>, {20, 20}, AnyHashable("ctatext"): Go, AnyHashable("title"): MoPub, AnyHashable("iconimage"): https://d30x8mtr3hjnzo.cloudfront.net/creatives/6591163c525f4720b99abf831ca247f6, AnyHa

So it seems like I'm getting the information correctly.


Solution

  • I found out what I was missing. After looking into the MPNativeAdRendering protocol I discovered that I needed to add nibForAd() in my CalculatorNativeAdView class.

    static func nibForAd() -> UINib! {
            let adscell:UINib = UINib(nibName: "CalculatorNativeAdView", bundle: nil)
            return adscell
        }
    

    The ad appears but without the icon image and the main image. But I believe that needs a different question all together. enter image description here