The Audience Network allows you to monetize your iOS apps with Facebook ads. This guide explains how to create an iOS app that shows native banner ads. The Native Banner Ad API allows you to build a customized experience for the ads you show in your app. When using the Native Banner Ad API, instead of receiving an ad ready to be displayed, you will receive a group of ad properties such as a title, an image, a call to action, and you will have to use them to construct a custom UIView where the ad is shown.
Let's implement the following native banner ad placement. You will create the following views to our native banner ad.
View #1: ad icon image viewView #2: ad choices viewView #3: ad advertiser name label | View #4: ad sponsored labelView #5: ad call to action button |
Ensure you have completed the Audience Network Getting Started and iOS Getting Started guides before you proceed.
When designing native ads and banner ads, ensure you have followed iOS layout guideline for optimal user experience.
Main.storyboard
. Add a UIView element to the main View element and name it to adUIView
.
adIconImageView
(FBMediaView), adChoicesView
(FBAdChoicesView), adAdvertiserNameLabel
(UILabel), adSponsoredLabel
(UILabel), adCallToActionButton
(UIButton) under adUIView
as illustrated in the image below.
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
.
Now that you have created all the UI elements to show native banner ads, the next step is to load the native banner ad and bind the contents to the UI elements.
FBAudienceNetwork
, declare conformance to the FBNativeBannerAdDelegate
protocol, and add an instance variable for the ad unit
import UIKit
import FBAudienceNetwork
class ViewController: UIViewController, FBNativeBannerAdDelegate {
private var nativeBannerAd: FBNativeBannerAd?
}
viewDidLoad
method, add the following lines of code to load native ad content
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
nativeBannerAdDidLoad
method
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
}
FBNativeBannerAd
object. If there is, you will need to unregister it your register the new ad object
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.
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
.
When running ads in the simulator, change the setting to test mode to view test ads. Please go to How to Use Test Mode for more information.
Optionally, you can add the following functions to handle the cases where the native banner ad is closed or when the user clicks on it:
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.")
}
Add and implement the following function in your View Controller to handle ad loading failures
func nativeBannerAd(_ nativeBannerAd: FBNativeBannerAd, didFailWithError error: Error) {
print("Native banner ad failed to load with error: \(error.localizedDescription)")
}
Relevant code samples in both Swift and Objective C are available on our GitHub sample app repository
Test your ads integration with your app
Submit your app for review
More Resources |
Getting Started GuideTechnical guide to get started with the Audience Network Code SamplesAudience Network Ads Integration Samples | FAQAudience Network FAQ Native Ads TemplateA more hands off approach when integrating Native Ads |