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

Question

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

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.

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.

score 2 · Accepted Answer · answered Feb 07 '19 at 21:37

2

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.

answered Feb 07 '19 at 21:37

Daniel Espina

614
11
24

Did you figure out why images are not displaying? – iOS Dev Sep 14 '21 at 15:03
Hey! I haven’t work on this in a while but I can check as soon as I can. I’ll let you know either today or tomorrow – Daniel Espina Sep 15 '21 at 19:36
1

Thanks for the reply. I figured out how to load image data, using this method: `- (void) layoutCustomAssetsWithProperties:(NSDictionary *) customProperties imageLoader:(MPNativeAdRenderingImageLoader *) imageLoader` – iOS Dev Sep 16 '21 at 10:13

score 0 · Answer 2 · answered Feb 05 '19 at 18:55

you can try the layoutSubviews() method after you add the subview to the orange box, in this link there is a better explanation of the method amongst other methods that may help you https://medium.com/@abhimuralidharan/ios-swift-setneedslayout-vs-layoutifneeded-vs-layoutsubviews-5a2b486da31c

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

2 Answers2