FBAudienceNetwork: setting FBNativeAd into FBMediaView stacks the UI

Question

The following line of code makes my UI stack

adMediaView.nativeAd = nativeAd 
// adMediaView - FBMediaView
// nativeAd - FBNativeAd

I've tried putting it in the performing it asynchronously in background thread but it didn't help. Is there a way to fix it?

dispatch_async(dispatch_get_global_queue( DISPATCH_QUEUE_PRIORITY_DEFAULT, 0),{
    adMediaView.nativeAd = nativeAd 
});

• I've installed FBAudienceNetwork via pods and updated it just now. The latest version I have is 4.7.0

  pod 'FBAudienceNetwork' 
  

Phore

Answer 1

NativeAdView uses FBMediaView for creating an ad. Now, in your View Controller header file declare FBNativeAdDelegate protocol as well as declare and connect instance variables to your UI .XIB:

@import FBAudienceNetwork; // import Audience Network module

@interface MyViewController : UIViewController <FBNativeAdDelegate>
  // Other code might go here...
  @property (weak, nonatomic) IBOutlet UIImageView *adIconImageView;
  @property (weak, nonatomic) IBOutlet UILabel *adTitleLabel;
  @property (weak, nonatomic) IBOutlet UILabel *adBodyLabel;
  @property (weak, nonatomic) IBOutlet UIButton *adCallToActionButton;
  @property (weak, nonatomic) IBOutlet UILabel *adSocialContextLabel;
  @property (weak, nonatomic) IBOutlet UILabel *sponsoredLabel;

  @property (weak, nonatomic) FBMediaView *adCoverMediaView;

  @property (weak, nonatomic) IBOutlet UIView *adView;
@end

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

FBNativeAd *nativeAd;
FBAdchoicesView *adChoicesView;

- (void)showNativeAd
{
  nativeAd = [[FBNativeAd alloc] initWithPlacementID:@"YOUR_PLACEMENT_ID"];
  nativeAd.delegate = self;
  [nativeAd loadAd];
}

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

- (void)nativeAdDidLoad:(FBNativeAd *)nativeAd
{
  [self.adTitleLabel setText:nativeAd.title];
  [self.adBodyLabel setText:nativeAd.body];
  [self.SocialContextLabel setText:nativeAd.socialContext];
  [self.sponsoredLabel setText:@”Sponsored”];
  [self.adCallToActionButton setTitle:nativeAd.callToAction];

  [nativeAd.icon loadImageAsyncWithBlock:^(UIImage *image) {
    [self.adIconImageView setImage:image];      
  }];

  // Allocate a FBMediaView to contain the cover image or native video asset
  adCoverMediaView = [[FBMediaView alloc] initWithFrame:coverFrame]];
  [adCoverMediaView setNativeAd:nativeAd];

  // Add adChoicesView
  adChoicesView = [[FBAdChoicesView alloc] initWithNativeAd:nativeAd];
  [adView addSubview:adChoicesView];
  [adChoicesView updateFrameFromSuperview];

  // Register the native ad view and its view controller with the native ad instance
  [nativeAd registerViewForInteraction:adView withViewController:self];
}

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

For displaying the native ad cover image, it is recommended to use the Facebook Audience Network MediaView which can display both image and video assets.

Reference : https://developers.facebook.com/docs/audience-network/ios/native-api

Haiphong

How is that answers my question? I've implemented all that already. How do I fix the UI being stuck? – Phore

you didn't mention what's the issue your having as per your information provided you can do it like dispatch_async(dispatch_get_global_queue( DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^(void) { // Background work dispatch_async(dispatch_get_main_queue(), ^(void) { // Main thread work (UI usually) adMediaView.nativeAd = nativeAd }); }); – Haiphong

I tried that. Didn't work. Have you ran your code on a device? Didn't you have any UI lagging? – Phore

You're right @Luda, this answer doesn't provide help making the UI smooth again. FBMediaView has performance issues. stackoverflow.com/users/1653066/erika-washburn, a Facebook developer, answered on another thread: "We're aware of the performance impact. We're deploying some short term marginal improvements in v4.9, and we're working on a long term fix. " https://mcmap.net/q/1160273/-fbaudiencenetwork-fbmediaview-freeze-ui-when-displaying-video – Aforetime