Hinzufügen von Native Ads zu deiner iOS-App

Mit der Native Ad API kannst du die Werbeanzeigen, die du in deiner App anzeigen möchtest, nach deinen Wünschen anpassen. Du erhältst über die Native Ad API keine fertigen Werbeanzeigen, sondern eine Gruppe an Werbeanzeigeneigenschaften, wie einen Titel, ein Bild oder einen Call-to-Action. Daraus kannst du eine UIView individuell zusammenstellen, in der die Werbeanzeige angezeigt wird.

Hier implementieren wir die folgende Native Ad-Platzierung. Du erstellst die folgenden Ansichten für die Native Ad.

Schritt 1: Native Ad-Ansichten in Storyboard erstellen

Schritt 2: Native Ad laden und anzeigen

Schritt 3: Seitenverhältnis des Inhalts ermitteln und natürliche Breite und Höhe anwenden

Schritt 4: Impression bestätigen und Klicks aufzeichnen

Schritt 5: Debuggen, wenn die Werbeanzeige nicht gezeigt wird

Schritt 6: Werbeanzeige ohne automatisches Caching laden

Schritt 7: Integration der Werbeanzeige testen

Bekannte Probleme im Änderungsprotokoll ansehen

Schritt 1: Native Ad-Ansichten in Storyboard erstellen

1. Nachdem du ein neues Projekt mithilfe der Leitfäden zum Einstieg mit iOS erstellt hast, öffne Main.storyboard. Füge zum Haupt-View-Element ein UIView-Element hinzu und weise ihm den Namen adUIView zu.
   
   
   
2. Füge außerdem adIconImageView (FBMediaView), adTitleLabel (UILabel), adCoverMediaView (FBMediaView), adSocialContext (UILabel), adCallToActionButton (UIButton), adOptionsView (FBAdOptionsView), adBodyLabel (UILabel) und sponsoredLabel (UILabel) unter adUIView hinzu, wie unten im Bild gezeigt.
   
   
   
3. Dir fällt vielleicht auf, dass bei „ViewController Scene“ ein roter Pfeil angezeigt wird. Das bedeutet meist, dass in deinem Layout Beschränkungen fehlen.
   
   
   Wähle alle View-Objekte in deiner Szene aus und klicke auf das Symbol „Resolve Layout Issue“ (Layout-Problem beheben), um die fehlenden Beschränkungen hinzuzufügen.
   
   
   
4. Nachdem du die UI-Elemente für die Anzeige einer Native Ad erstellt hast, musst du diese UI-Elemente in der ViewController-Schnittstelle referenzieren. Öffne zunächst ViewController.m (ViewController.swift, sofern du Swift verwendest) und ziehe dann adUIView in das ViewController-Objekt. Du kannst ihm den Namen adUIView geben. Führe diesen Schritt anschließend auch für adIconImageView, adTitleLabel, adCoverMediaView, adSocialContext, adCallToActionButton, adOptionsView, adBodyLabel und sponsoredLabel aus.
   
   
   
5. Erstelle das Projekt und führe es aus. In deinem Gerät oder Simulator sollte wie folgt leerer Inhalt zu sehen sein:
   

Nachdem du die UI-Elemente zur Anzeige von Native Ads erstellt hast, musst du als Nächstes die Native Ad laden und die Inhalte an die UI-Elemente binden.

Schritt 2: Native Ad laden und anzeigen

1. Importiere das SDK in deine Anzeige-Controller-Quelldatei, erkläre, dass ViewController dem FBNativeAdDelegate-Protokoll entspricht und füge eine FBNativeAd-Instanzvariable hinzu.
   SwiftObjective-C

   import UIKit
   import FBAudienceNetwork
   
   class ViewController: UIViewController, FBNativeAdDelegate {
       
     private var nativeAd: FBNativeAd?
   }

   #import <UIKit/UIKit.h>
   @import FBAudienceNetwork;
   
   @interface ViewController () <FBNativeAdDelegate>
   
   @property (strong, nonatomic) FBNativeAd *nativeAd;
   
   @end


2. Füge in der viewDidLoad-Methode die folgenden Codezeilen hinzu, um den Inhalt der Native Ad zu laden.
   SwiftObjective-C

   override func viewDidLoad() {
     super.viewDidLoad()
       
     let nativeAd = FBNativeAd(placementID: "YOUR_PLACEMENT_ID")
     nativeAd.delegate = self
     nativeAd.loadAd()
   }

   - (void)viewDidLoad 
   {
     [super viewDidLoad];
   
     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.

3. Als Nächstes wird die Werbeanzeige gezeigt, wenn der Inhalt bereit ist. Dazu muss ViewController die Delegate-Methode nativeAdDidLoad implementieren.
   SwiftObjective-C

   func nativeAdDidLoad(_ nativeAd: FBNativeAd) {
       
     // 1. If there is an existing valid native ad, unregister the view
     if let previousNativeAd = self.nativeAd, previousNativeAd.isAdValid {
       previousNativeAd.unregisterView()
     }
       
     // 2. Retain a reference to the native ad object
     self.nativeAd = nativeAd
   
     // 3. Register what views will be tappable and what the delegate is to notify when a registered view is tapped
     // Here only the call-to-action button and the media view are tappable, and the delegate is the view controller
     nativeAd.registerView(
       forInteraction: adUIView,
       mediaView: adCoverMediaView,
       iconView: adIconImageView,
       viewController: self,
       clickableViews: [adCallToActionButton, adCoverMediaView]
     )
       
     // 4. Render the ad content onto the view
     adTitleLabel.text = nativeAd.advertiserName
     adBodyLabel.text = nativeAd.bodyText
     adSocialContextLabel.text = nativeAd.socialContext
     sponsoredLabel.text = nativeAd.sponsoredTranslation
     adCallToActionButton.setTitle(nativeAd.callToAction, for: .normal)
     adOptionsView.nativeAd = nativeAd
   }

   - (void)nativeAdDidLoad:(FBNativeAd *)nativeAd
   {
     // 1. If there is an existing valid native ad, unregister the view
     if (self.nativeAd && self.nativeAd.isAdValid) {
       [self.nativeAd unregisterView];
     }
   
     // 2. Retain a reference to the native ad object
     self.nativeAd = nativeAd;
   
     // 3. Register what views will be tappable and what the delegate is to notify when a registered view is tapped
     // Here only the call-to-action button and the media view are tappable, and the delegate is the view controller
     [self.nativeAd registerViewForInteraction:self.adUIView
                                     mediaView:self.adCoverMediaView
                                      iconView:self.adIconImageView
                                viewController:self
                                clickableViews:@[self.adCallToActionButton, self.adCoverMediaView]];
   
     // 4. Render the ad content onto the view
     self.adTitleLabel.text = self.nativeAd.advertiserName;
     self.adBodyLabel.text = self.nativeAd.bodyText;
     self.adSocialContextLabel.text = self.nativeAd.socialContext;
     self.sponsoredLabel.text = self.nativeAd.sponsoredTranslation;
     [self.adCallToActionButton setTitle:self.nativeAd.callToAction forState:UIControlStateNormal];
     self.adOptionsView.nativeAd = self.nativeAd; 
   }

Festlegen des klickbaren Bereichs

Um die Nutzererfahrung und deine Ergebnisse zu verbessern, solltest du den klickbaren Bereich festlegen, um versehentliche Klicks zu vermeiden. Auf der Seite zu den Richtlinien für das Audience Network-SDK erhältst du mehr Informationen darüber, wie du dafür sorgst, dass leere Bereiche nicht anklickbar sind.




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

Schritt 3: Seitenverhältnis des Inhalts ermitteln und natürliche Breite und Höhe anwenden

Im obigen Beispiel werden die Medieninhalte der Werbeanzeige in adCoverMediaView angezeigt, und der Objekttyp ist FBMediaView. Im vorigen Schritt haben wir gezeigt, wie du mit FBMediaView Medieninhalte aus einem FBNativeAd-Objekt lädst. Diese Ansicht ersetzt das manuelle Laden eines Titelbilds. Beim Erstellen der FBMediaView können Breite und Höhe entweder durch die automatischen Layout-Beschränkungen ermittelt werden, die im Storyboard festgelegt wurden, oder sie können hardcodiert werden. Die Breite und Höhe der Ansicht stimmen jedoch möglicherweise nicht mit dem eigentlichen Titelbild der Werbeanzeige überein, das später heruntergeladen wird. Um dieses Problem zu beheben, wird im folgenden Beispiel gezeigt, wie du das Seitenverhältnis des Inhalts ermittelst und die natürliche Breite und Höhe anwendest:

1. Erkläre, dass dein Anzeige-Controller das Protokoll FBMediaViewDelegate implementiert.
   SwiftObjective-C

   class ViewController: UIViewController, FBNativeAdDelegate, FBMediaViewDelegate {
     ...
   }

   @interface ViewController : UIViewController <FBNativeAdDelegate, FBMediaViewDelegate>
   ...
   @end


2. Wenn die Native Ad geladen wird, lege den Delegate des FBMediaView-Objekts so fest, dass er dein Anzeige-Controller ist.
   SwiftObjective-C

   func nativeAdDidLoad(_ nativeAd: FBNativeAd) {
     adCoverMediaView.delegate = self
   }

   - (void)nativeAdDidLoad:(FBNativeAd *)nativeAd 
   {
     self.adCoverMediaView.delegate = self;
   }


3. Implementiere die mediaViewDidLoad-Methode in deinem Anzeige-Controller
   SwiftObjective-C

   func mediaViewDidLoad(_ mediaView: FBMediaView) {
     let currentAspect = mediaView.frame.size.width / mediaView.frame.size.height
     print(currentAspect)
     
     let actualAspect = mediaView.aspectRatio
     print(actualAspect)
   }

   - (void)mediaViewDidLoad:(FBMediaView *)mediaView
   {
     CGFloat currentAspect = mediaView.frame.size.width / mediaView.frame.size.height;
     NSLog(@"current aspect of media view: %f", currentAspect);
     
     CGFloat actualAspect = mediaView.aspectRatio;
     NSLog(@"actual aspect of media view: %f", actualAspect);
   }
   
   mediaView.aspectRatio gibt einen positiven CGFloat zurück bzw. 0,0, wenn aktuell keine Werbeanzeige geladen ist. Der Wert ist gültig, sobald die Medienansicht geladen wurde. Es gibt einige praktische Methoden zur Festlegung der Breite und Höhe des FBMediaView-Objekts, die das Seitenverhältnis der geladenen Medieninhalte berücksichtigen. Du kannst applyNaturalWidth oder applyNaturalHeight aufrufen, um die Breite und Höhe des FBMediaView-Objekts zu aktualisieren und das Seitenverhältnis der Medieninhalte zu berücksichtigen.

Schritt 4: Impression bestätigen und Klicks aufzeichnen

Optional kannst du die folgenden Funktionen hinzufügen, um die Fälle zu verarbeiten, in denen die Native Ad geschlossen oder von einem*einer Nutzer*in angeklickt wird:

func nativeAdDidClick(_ nativeAd: FBNativeAd) {
  print("Native ad was clicked.")
}

func nativeAdDidFinishHandlingClick(_ nativeAd: FBNativeAd) {
  print("Native ad did finish click handling.")
}

func nativeAdWillLogImpression(_ nativeAd: FBNativeAd) {
  print("Native ad impression is being captured.")
}

- (void)nativeAdDidClick:(FBNativeAd *)nativeAd
{
  NSLog(@"Native ad was clicked.");
}

- (void)nativeAdDidFinishHandlingClick:(FBNativeAd *)nativeAd
{
  NSLog(@"Native ad did finish click handling.");
}

- (void)nativeAdWillLogImpression:(FBNativeAd *)nativeAd
{
  NSLog(@"Native ad impression is being captured.");
}

Schritt 5: Debuggen, wenn die Werbeanzeige nicht gezeigt wird

Füge im Anzeige-Controller die folgende Funktion hinzu und implementiere sie, um mit Fehlern beim Laden von Werbeanzeigen umzugehen.

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

- (void)nativeAd:(FBNativeAd *)nativeAd didFailWithError:(NSError *)error
{
  NSLog(@"Native ad failed to load with error: %@", error);
}

Schritt 6: Werbeanzeige ohne automatisches Caching laden

1. Wir empfehlen unbedingt, Medien-Caching standardmäßig immer zu aktivieren. Du kannst den Standard jedoch überschreiben. Gehe äußerst vorsichtig vor, wenn du unser Standard-Medien-Caching überschreibst.
   SwiftObjective-C

   let nativeAd = FBNativeAd(placementID: "YOUR_PLACEMENT_ID")
   nativeAd.delegate = self
   nativeAd.loadAd(withMediaCachePolicy: .none)

   FBNativeAd *nativeAd = [[FBNativeAd alloc] initWithPlacementID:@"YOUR_PLACEMENT_ID"];
   nativeAd.delegate = self;
   [nativeAd loadAdWithMediaCachePolicy:FBNativeAdsCachePolicyNone];


2. Du musst zunächst manuell alle Medien für die Native Ad herunterladen.
   SwiftObjective-C

   func nativeAdDidLoad(_ nativeAd: FBNativeAd) {
     
     ...
     
     self.adCoverMediaView.delegate = self
     nativeAd.downloadMedia()
     self.nativeAd = nativeAd
     
     ...
   }

   - (void)nativeAdDidLoad:(FBNativeAd *)nativeAd
   {
     ...
   
     self.adCoverMediaView.delegate = self;
     [nativeAd downloadMedia];
     self.nativeAd = nativeAd;
   
     ...
   }


3. Anschließend solltest du nur registerViewForInteraction aufrufen und die Werbeanzeige nach dem mediaViewDidLoad-Rückruf anzeigen. Für zulässige Impressions müssen alle Medien geladen und angezeigt werden.
   SwiftObjective-C

   func mediaViewDidLoad(_ mediaView: FBMediaView) {
     guard let nativeAd = nativeAd else {
       return
     }
     
     // 1. Register what views will be tappable and what the delegate is to notify when a registered view is tapped
     // Here only the call-to-action button and the media view are tappable, and the delegate is the view controller
     nativeAd.registerView(
       forInteraction: adUIView,
       mediaView: mediaView,
       iconView: adIconImageView,
       viewController: self,
       clickableViews: [adCallToActionButton, mediaView]
     )
       
     // 2. Render the ad content onto the view
     adTitleLabel.text = nativeAd.advertiserName
     adBodyLabel.text = nativeAd.bodyText
     adSocialContextLabel.text = nativeAd.socialContext
     sponsoredLabel.text = nativeAd.sponsoredTranslation
     adCallToActionButton.setTitle(nativeAd.callToAction, for: .normal)
     adOptionsView.nativeAd = nativeAd
   }

   - (void)mediaViewDidLoad:(FBMediaView *)mediaView 
   {
     if (!self.nativeAd) {
       return;
     }
   
     // 1. Register what views will be tappable and what the delegate is to notify when a registered view is tapped
     // Here only the call-to-action button and the media view are tappable, and the delegate is the view controller
     [self.nativeAd registerViewForInteraction:self.adUIView
                                     mediaView:mediaView
                                      iconView:self.adIconImageView
                             viewController:self
                            clickableViews:@[self.adCallToActionButton, mediaView]];
   
     // 2. Render the ad content onto the view
     self.adTitleLabel.text = self.nativeAd.advertiserName;
     self.adBodyLabel.text = self.nativeAd.bodyText;
     self.adSocialContextLabel.text = self.nativeAd.socialContext;
     self.sponsoredLabel.text = self.nativeAd.sponsoredTranslation;
     [self.adCallToActionButton setTitle:self.nativeAd.callToAction forState:UIControlStateNormal];
     self.adOptionsView.nativeAd = self.nativeAd; 
   }