Add Native Banner Ads to an iOS App

1. After you have created a new project from iOS Getting Started guides, open Main.storyboard. Add a UIView element to the main View element and name it to adUIView.



2. In addition, add adIconImageView (FBMediaView), adChoicesView (FBAdChoicesView), adAdvertiserNameLabel (UILabel), adSponsoredLabel (UILabel), adCallToActionButton (UIButton) under adUIView as illustrated in the image below.
   
   
3. You may notice that there is a red arrow nearby View Controller Scene. This usually means that there are missing constraints in your layout.
   
   
   You would need to select all the view objects in your scene and click the "resolve layout issue" icon to add missing constraints.
   
   
   
   
4. Now that you have created all the UI elements for showing a native banner ad, you will need to reference these UI elements in the ViewController interface. First open the ViewController.m (ViewController.swift if you are a Swift user), then hold down the Control key and drag adUIView inside the ViewController interface object. You can name it as adUIView. After, you will need to do the same thing for adIconImageView , adChoicesView, adAdvertiserNameLabel, adSponsoredLabel, and adCallToActionButton.
   
   
   
5. Build and run the project. You should see from your device or simulator empty content as follows:
   

1. Now, in your View Controller header file (or Swift file, if you are a Swift user), import FBAudienceNetwork, declare conformance to the FBNativeBannerAdDelegate protocol, and add an instance variable for the ad unit
   Select language

   SwiftObjective-C

   ---

   import UIKit
   import FBAudienceNetwork
   
   class ViewController: UIViewController, FBNativeBannerAdDelegate {
     private var nativeBannerAd: FBNativeBannerAd?
   }
   



2. In viewDidLoad method, add the following lines of code to load native ad content
   Select language

   SwiftObjective-C

   ---

   override func viewDidLoad() {
     super.viewDidLoad()
   
   // Instantiate a native banner ad object.
   // NOTE: the placement ID will eventually identify this as your app. You can ignore it while you are testing
   // and replace it later when you have signed up.
   // While you are using this temporary code you will only get test ads and if you release
   // your code like this to the App Store your users will not receive ads (you will get a 'No Fill' error).
   let nativeBannerAd = FBNativeBannerAd(placementID: "YOUR_PLACEMENT_ID")
   
   // Set a delegate to get notified when the ad was loaded.
   nativeBannerAd.delegate = self
   
     // Initiate a request to load an ad.
     nativeBannerAd.loadAd()
   }
   

   The ID that displays at YOUR_PLACEMENT_ID is a temporary ID for test purposes only.
   If you use this temporary ID in your live code, your users will not receive ads (they will get a No Fill error). You must return here after testing and replace this temporary ID with a live Placement ID.
   To find out how the generate a live Placement ID, refer to Audience Network Setup
3. The next step is to show ad when content is ready. You would need your View Controller to implement the nativeBannerAdDidLoad method
   Select language

   SwiftObjective-C

   ---

   func nativeBannerAdDidLoad(_ nativeBannerAd: FBNativeBannerAd) {
   
   if let previousAd = self.nativeBannerAd, previousAd.isAdValid {
     previousAd.unregisterView()
   }
   
   self.nativeBannerAd = nativeBannerAd
   
   adAdvertiserNameLabel.text = nativeBannerAd.advertiserName
   adSponsoredLabel.text = nativeBannerAd.sponsoredTranslation
   
   if let callToAction = nativeBannerAd.callToAction {
     adCallToActionButton.isHidden = false
     adCallToActionButton.setTitle(callToAction, for: .normal)
   } else {
     adCallToActionButton.isHidden = true
   }
   
   // Set native banner ad view tags to declare roles of your views for better analysis in future
   // We will be able to provide you statistics how often these views were clicked by users
   // Views provided by Facebook already have appropriate tag set
   self.adAdvertiserNameLabel.nativeAdViewTag = .title
   self.adCallToActionButton.nativeAdViewTag = .callToAction
   
   // Specify the clickable areas. View you were using to set ad view tags should be clickable.
   let clickableViews: [UIView] = [adCallToActionButton]
   nativeBannerAd.registerView(
     forInteraction: adUIView,
     iconView: adIconImageView,
     viewController: self,
     clickableViews: clickableViews
   )
   
   /*
    // If you don't want to provide native ad view tags you can simply
    // Wire up UIView with the native banner ad; the whole UIView will be clickable.
    nativeBannerAd.registerView(
    forInteraction: adUIView,
    iconView: adIconImageView,
    viewController: self
    )
    */
   
     adChoicesView.corner = .topLeft
     adChoicesView.nativeAd = nativeBannerAd
   }
   

   First, you need to check if there is an existing valid FBNativeBannerAd object. If there is, you will need to unregister it your register the new ad object
   

   Controlling Clickable Area

   For a better user experience and better results, you should always consider controlling the clickable area of your ad to avoid unintentional clicks. Please refer to Audience Network SDK Policy page for more details about white space unclickable enforcement.
   What registerViewForInteraction mainly does is register what views will be tappable and what the delegate is to notify when a registered view is tapped. In this case, adCallToActionButton will be tappable and when the view is tapped, ViewController will be notified through FBNativeBannerAdDelegate.
   
   
4. Choose your build target to be device and run the above code, you should see something like this:
   
   
   
   

func nativeBannerAdDidClick(_ nativeBannerAd: FBNativeBannerAd) {
  print("Native banner ad was clicked.")
}

func nativeBannerAdDidFinishHandlingClick(_ nativeBannerAd: FBNativeBannerAd) {
  print("Native banner ad did finish click handling.")
}

func nativeBannerAdWillLogImpression(_ nativeBannerAd: FBNativeBannerAd) {
  print("Native banner ad impression is being captured.")
}

func nativeBannerAd(_ nativeBannerAd: FBNativeBannerAd, didFailWithError error: Error) {
  print("Native banner ad failed to load with error: \(error.localizedDescription)")
}

• Once your app has a link on the App Store or Google Play Store, configure Audience Network in Monetization Manager to get ad placement IDs.
• Follow the guides to implement ad formats in your app.

• Visit our GitHub sample app repository⁠ to view sample code.
• View the Audience Network policies and the Facebook community standards⁠ to ensure your app complies.