Ad Setup
Volver al documento en español
Se actualizó este documento.
La traducción en español no está disponible todavía.
Actualización del documento en inglés: 25 may. 2021
Actualización del documento en español: 6 jul. 2018

Use the Native Ads Template in iOS

Los editores que buscan un enfoque con menos intervenciones al integrar anuncios nativos pueden usar una plantilla personalizada de anuncios nativos de Audience Network. Personaliza el tamaño, color y tipo de letra del anuncio nativo para que coincida con la apariencia de tu aplicación.

Asegúrate de completar las guías de primeros pasos para Audience Network e iOS antes de continuar.

To utilize this guide effectively, you should be familiar with implementing Native Ads.

Step 1: Template Implementation

Step 2: Further Customization

Step 1: Template Implementation

•   Implementation for Native Ads

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

import UIKit
import FBAudienceNetwork

class ViewController: UIViewController, FBNativeAdDelegate {
  private var nativeAd: FBNativeAd?
}
#import <UIKit/UIKit.h>
@import FBAudienceNetwork;

@interface ViewController : UIViewController <FBNativeAdDelegate>

@property (nonatomic, strong) FBNativeAd *nativeAd;

@end

Then, add a method in your View Controller's implementation file that initializes FBNativeAd and request an ad to load:

override func viewDidLoad() {
  super.viewDidLoad()
    
  // Instantiate the ad object.
  // NOTE: the placement ID will eventually identify this as your App, you can ignore it for
  // now, 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 nativeAd = FBNativeAd(placementID: "YOUR_PLACEMENT_ID")
  nativeAd.delegate = self
  nativeAd.loadAd()
}
- (void)viewDidLoad 
{
  [super viewDidLoad];
  // Instantiate a NativeAd object. 
  // NOTE: the placement ID will eventually identify this as your App, you can ignore it for
  // now, 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).
  FBNativeAd *nativeAd = [[FBNativeAd alloc] initWithPlacementID:@"YOUR_PLACEMENT_ID"];
  nativeAd.delegate = self;
  [nativeAd 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

Now that you have added the code to load the ad, add the following functions to construct the ad once it has loaded:

func nativeAdDidLoad(_ nativeAd: FBNativeAd) {
    
  if let previousNativeAd = self.nativeAd, previousNativeAd.isAdValid {
    previousNativeAd.unregisterView()
  }
    
  self.nativeAd = nativeAd

  let adView = FBNativeAdView(nativeAd: nativeAd, with: .genericHeight300)

  view.addSubview(adView)

  let size = view.bounds.size
  let xOffset: CGFloat = size.width / 2 - 160
  let yOffset: CGFloat = (size.height > size.width) ? 100 : 20
  adView.frame = CGRect(x: xOffset, y: yOffset, width: 320, height: 300)
}
- (void)nativeAdDidLoad:(FBNativeAd *)nativeAd 
{    
  self.nativeAd = nativeAd;
  [self showNativeAd];
}

- (void)showNativeAd
{
  if (self.nativeAd && self.nativeAd.isAdValid) {
    [self.nativeAd unregisterView];
  }

  FBNativeAdView *adView = [FBNativeAdView nativeAdViewWithNativeAd:self.nativeAd withType:FBNativeAdViewTypeGenericHeight300];

  [self.view addSubview:adView];

  CGSize size = self.view.bounds.size;
  CGFloat xOffset = size.width / 2 - 160;
  CGFloat yOffset = (size.height > size.width) ? 100 : 20;
  adView.frame = CGRectMake(xOffset, yOffset, 320, 300);
}

Choose your build target to be device and run the above code, you should see something like this:



Custom Ad Formats come in two templates:

Template View Type Height Width Attributes Included

FBNativeAdView TypeGenericHeight300

300dp

Flexible width

Image, icon, title, context, description, and CTA button

FBNativeAdView TypeGenericHeight400

400dp

Flexible width

Image, icon, title, subtitle, context, description and CTA button

•   Implementation for Native Banner Ads

To shown a native banner ad using templates with height 100 and 120 options, you need to create a FBNativeBannerAd instance and show it in FBNativeBannerAdView view instance as following:

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

import UIKit
import FBAudienceNetwork

class ViewController: UIViewController, FBNativeBannerAdDelegate {
  private var nativeBannerAd: FBNativeBannerAd?
}
#import <UIKit/UIKit.h>
@import FBAudienceNetwork;

@interface ViewController : UIViewController <FBNativeBannerAdDelegate>

@property (nonatomic, strong) FBNativeBannerAd *nativeBannerAd;

@end

Then, add a method in your View Controller's implementation file that initializes FBNativeBannerAd and request an ad to load:

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()  
}
- (void)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).
  // your code like this to the App Store your users will not receive ads (you will get a ‘No Fill’ error).
  FBNativeBannerAd *nativeBannerAd = [[FBNativeBannerAd alloc] initWithPlacementID:@"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

Now that you have added the code to load the ad, add the following functions to construct the ad once it has loaded:

func nativeBannerAdDidLoad(_ nativeBannerAd: FBNativeBannerAd) {
  
  // 1. If there is an existing valid ad, unregister the view
  if let previousAd = self.nativeBannerAd, previousAd.isAdValid {
    previousAd.unregisterView()
  }
  
  // 2. Retain a reference to the ad object
  self.nativeBannerAd = nativeBannerAd
  
  // 3. Instantiate the ad view
  let adView = FBNativeBannerAdView(nativeBannerAd: nativeBannerAd, with: .genericHeight100)
  view.addSubview(adView)

  // 4. Set the frame of the ad view (either manually or using constraints)
  let size = view.bounds.size
  let xOffset: CGFloat = size.width / 2 - 160
  let yOffset: CGFloat = (size.height > size.width) ? 100 : 20
  adView.frame = CGRect(x: xOffset, y: yOffset, width: 320, height: 300)
}
- (void)nativeBannerAdDidLoad:(FBNativeBannerAd *)nativeBannerAd
{
  if (self.nativeBannerAd && self.nativeBannerAd.isAdValid) {
    [self.nativeBannerAd unregisterView];
  }
  
  self.nativeBannerAd = nativeBannerAd;
  
  FBNativeBannerAdView *adView = [FBNativeBannerAdView nativeBannerAdViewWithNativeBannerAd:self.nativeBannerAd
                                                                                   withType:FBNativeBannerAdViewTypeGenericHeight100];
  
  [self.view addSubview:adView];
  
  CGSize size = self.view.bounds.size;
  CGFloat xOffset = size.width / 2 - 160;
  CGFloat yOffset = (size.height > size.width) ? 100 : 20;
  adView.frame = CGRectMake(xOffset, yOffset, 320, 100);
}

Custom Ad Formats come in two templates:

Template View Type Height Width Attributes Included

FBNativeBannerAdView TypeGenericHeight100

100dp

Flexible width

Icon, title, context, and CTA button

FBNativeBannerAdView TypeGenericHeight120

120dp

Flexible width

Icon, title, context, description, and CTA button

Step 2: Further Customization

With a native custom template, you can customize the following elements:

  • Height
  • Width
  • Background Color
  • Title Color
  • Title Font
  • Description Color
  • Description Font
  • Button Color
  • Button Title Color
  • Button Title Font
  • Button Border Color

If you want to customize certain elements, then it is recommended to use a design that fits in with your app's layouts and themes.

You will need to build FBNativeAdViewAttributes object and provide a loaded native ad to render these elements:

•   Example For Native Ads

func nativeAdDidLoad(_ nativeAd: FBNativeAd) {
  
  // Instantiate the attributes to customize the view
  let attributes = FBNativeAdViewAttributes()
  attributes.backgroundColor = UIColor(white: 0.9, alpha: 1)
  attributes.buttonColor = UIColor(red: 66 / 255.0, green: 108 / 255.0, blue: 173 / 255.0, alpha: 1)
  attributes.buttonTitleColor = .white

  // Feed the attributes to the view
  let adView = FBNativeAdView(nativeAd: nativeAd, with: .genericHeight300, with: attributes)
  
  ... Rest of implementation ...
}
- (void)nativeAdDidLoad:(FBNativeAd *)nativeAd 
{
  // Instantiate the attributes to customize the view
  FBNativeAdViewAttributes *attributes = [[FBNativeAdViewAttributes alloc] init];

  attributes.backgroundColor = [UIColor colorWithRed:0.9 green:0.9 blue:0.9 alpha:1];
  attributes.buttonColor = [UIColor colorWithRed:66/255.0 green:108/255.0 blue:173/255.0 alpha:1];
  attributes.buttonTitleColor = [UIColor whiteColor];

  // Feed the attributes to the view
  FBNativeAdView *adView = [FBNativeAdView nativeAdViewWithNativeAd:nativeAd 
      withType:FBNativeAdViewTypeGenericHeight300 withAttributes:attributes];

  ... Rest of implementation ...
}

The above code will render an ad that looks like this:

•   Example For Native Banner Ads

func nativeBannerAdDidLoad(_ nativeBannerAd: FBNativeBannerAd) {
  
  // Instantiate the attributes to customize the view
  let attributes = FBNativeAdViewAttributes()
  attributes.backgroundColor = UIColor(white: 0.9, alpha: 1)
  attributes.buttonColor = UIColor(red: 66 / 255.0, green: 108 / 255.0, blue: 173 / 255.0, alpha: 1)
  attributes.buttonTitleColor = .white

  // Instantiate the view and feed the attributes to the initializer
  let adView = FBNativeBannerAdView(nativeBannerAd: nativeBannerAd, with: .genericHeight100, with: attributes)
  
  ... Rest of implementation ...
}
- (void)nativeBannerAdDidLoad:(FBNativeBannerAd *)nativeAd 
{
  // Instantiate the attributes to customize the view
  FBNativeAdViewAttributes *attributes = [[FBNativeAdViewAttributes alloc] init];
  attributes.backgroundColor = [UIColor colorWithRed:0.9 green:0.9 blue:0.9 alpha:1];
  attributes.buttonColor = [UIColor colorWithRed:66/255.0 green:108/255.0 blue:173/255.0 alpha:1];
  attributes.buttonTitleColor = [UIColor whiteColor];

  // Instantiate the view and feed the attributes to the initializer
  FBNativeBannerAdView *adView = [FBNativeBannerAdView nativeBannerAdViewWithNativeBannerAd :nativeAd 
      withType:FBNativeBannerAdViewTypeGenericHeight100 withAttributes:attributes];

  ... Rest of implementation ...
}

Next Steps