Ad Setup

Vorlage für Native Ads in iOS verwenden

Herausgeber, die den Arbeitsaufwand für die Integration von Native Ads reduzieren möchten, können eine benutzerdefinierte Audience Network-Vorlage für Native Ads einsetzen. Damit kannst du die Größe, Farbe und Schriftart einer Native Ad an das Erscheinungsbild deiner App anpassen.

Stelle sicher, dass du die Leitfäden zu den ersten Schritten mit dem Audience Network und mit iOS abgeschlossen hast, bevor du fortfährst.

Um die Schritte in diesem Leitfaden effektiv auszuführen, musst du mit der Implementierung von Native Ads vertraut sein.

Schritt 1: Vorlagenimplementierung

Schritt 2: Weitere Anpassung

Schritt 1: Vorlagenimplementierung

• Implementierung für Native Ads

Importiere nun in die Anzeige-Controller-Headerdatei (bzw. Swift-Datei, wenn du Swift nutzt) FBAudienceNetwork und deklariere die Konformität mit dem FBNativeAdDelegate-Protokoll. Füge außerdem eine Instanzvariable für die Werbeeinheit hinzu:

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

Füge dann in der Implementierungsdatei für deinen Anzeige-Controller eine Methode hinzu, die FBNativeAd initialisiert, und frage das Laden einer Werbeanzeige an:

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];
}

Die ID, die bei YOUR_PLACEMENT_ID angezeigt wird, ist eine temporäre ID ausschließlich für Testzwecke.

Wenn du diese temporäre ID in deinem Live-Code verwendest, erhalten deine Nutzer*innen keine Werbeanzeigen (sondern den Fehler Nichterfüllung). Du musst nach dem Testen hierher zurückkehren und diese temporäre ID durch eine Live-Placement-ID ersetzen.

Informationen dazu, wie du eine Live-Placement-ID generierst, findest du unter Audience Network-Setup.

Nachdem du nun den Code zum Laden der Werbeanzeige hinzugefügt hast, füge die folgenden Funktionen hinzu, um die Werbeanzeige aufzubauen, nachdem sie geladen wurde:

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);
}

Wähle dein Gerät als Build-Ziel aus und führe den oben angegebenen Code aus. Das Ergebnis sollte etwa wie folgt aussehen:



Es gibt zwei Vorlagen für benutzerdefinierte Anzeigenformate:

Ansichtstyp der Vorlage Höhe Breite Enthaltene Attribute

FBNativeAdView TypeGenericHeight300

300 dp

Flexible Breite

Bild, Symbol, Titel, Kontext, Beschreibung und CTA-Button

FBNativeAdView TypeGenericHeight400

400 dp

Flexible Breite

Bild, Symbol, Titel, Untertitel, Kontext, Beschreibung und CTA-Button

• Implementierung für Native Banner Ads

Um eine Native Banner Ad mit Vorlagen mit Höhe 100 oder 120 anzuzeigen, musst du eine FBNativeBannerAd-Instanz erstellen und in der FBNativeBannerAdView-Ansichtsinstanz wie folgt darstellen:

Importiere in die Anzeige-Controller-Headerdatei (bzw. Swift-Datei, wenn du Swift nutzt) FBAudienceNetwork und deklariere die Konformität mit dem FBNativeAdDelegate-Protokoll. Füge außerdem eine Instanzvariable für die Werbeeinheit hinzu.

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

Füge dann in der Implementierungsdatei für deinen Anzeige-Controller eine Methode hinzu, die FBNativeBannerAd initialisiert, und frage das Laden einer Werbeanzeige an:

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];
}

Die ID, die bei YOUR_PLACEMENT_ID angezeigt wird, ist eine temporäre ID ausschließlich für Testzwecke.

Wenn du diese temporäre ID in deinem Live-Code verwendest, erhalten deine Nutzer*innen keine Werbeanzeigen (sondern den Fehler Nichterfüllung). Du musst nach dem Testen hierher zurückkehren und diese temporäre ID durch eine Live-Placement-ID ersetzen.

Informationen dazu, wie du eine Live-Placement-ID generierst, findest du unter Audience Network-Setup.

Nachdem du nun den Code zum Laden der Werbeanzeige hinzugefügt hast, füge die folgenden Funktionen hinzu, um die Werbeanzeige aufzubauen, nachdem sie geladen wurde:

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);
}

Es gibt zwei Vorlagen für benutzerdefinierte Anzeigenformate:

Ansichtstyp der Vorlage Höhe Breite Enthaltene Attribute

FBNativeBannerAdView TypeGenericHeight100

100 dp

Flexible Breite

Symbol, Titel, Kontext und CTA-Button

FBNativeBannerAdView TypeGenericHeight120

120 dp

Flexible Breite

Symbol, Titel, Kontext, Beschreibung und CTA-Button

Schritt 2: Weitere Anpassung

Mit einer nativen benutzerdefinierten Vorlage kannst du die folgenden Elemente anpassen:

  • Höhe
  • Breite
  • Hintergrundfarbe
  • Farbe des Titels
  • Schriftart des Titels
  • Farbe der Beschreibung
  • Schriftart der Beschreibung
  • Button-Farbe
  • Farbe des Button-Titels
  • Schriftart des Button-Titels
  • Farbe des Button-Rahmens

Wenn du bestimmte Elemente anpassen möchtest, solltest du ein Design verwenden, das zu den Layouts und Themen deiner App passt.

Du musst ein FBNativeAdViewAttributes-Objekt erstellen und eine geladene Native Ad bereitstellen, um diese Elemente zu rendern:

• Beispiel für 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 ...
}

Der oben gezeigte Code rendert eine Werbeanzeige, die wie folgt aussieht:

• Beispiel für 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 ...
}

Nächste Schritte

  • Sieh dir unsere Codebeispiele für die Verwendung von Native Ads an. Die NativeAdSample steht als Teil des SDK zur Verfügung und befindet sich im Ordner FBAudienceNetwork/samples. Öffne das Projekt mit Xcode und führe es auf einem Gerät oder Simulator aus.