/
Feed Type (iOS)

Feed Type (iOS)

Owned by Ryan Ko (Unlicensed)
Last updated: Mar 07, 2022 by Olivia Kim

BuzzAd Benefit SDK: Feed

This documentation provides a guideline for integrating feed for BuzzAd Benefit.

※ Note

  1. Please proceed with the following process only after BuzzAd Benefit SDK integration is complete.

  2. The feed accommodates customization of the design of toolbar, ad list item and header.

  3. Please proceed with the Advanced Usage only after implementing all of the features in Basic Usage.

 

Index

 

Basic Usage

Setting the BABFeedConfig and the BABFeedHandler

  1. Create the BABFeedConfig with unit_id.

  2. Create a BABFeedHandler using the the BABFeedConfig as its object.

  3. Create a BABFeedViewController by calling populateViewController().

  4. Display the BABFeedViewController on the screen.

 

// Objective-C BABFeedConfig *config = [[BABFeedConfig alloc] initWithUnitId:YOUR_FEED_UNIT_ID]; config.title = @"Feed"; BABFeedHandler *feedHandler = [[BABFeedHandler alloc] initWithConfig:config]; BABFeedViewController *feedViewController = [feedHandler populateViewController]; // Push to navigation [self.navigationController pushViewController:feedViewController animated:YES]; // Or present as modal // [self presentViewController:feedViewController animated:YES completion:nil];

 

// Swift let config = BABFeedConfig(unitId: YOUR_FEED_UNIT_ID) config.title = "Feed" let feedHandler = BABFeedHandler(with: config) let feedViewController = feedHandler.populateViewController() // Push to navigation navigationController?.pushViewController(feedViewController, animated: YES) // Or present as modal // present(feedViewController, animated: YES, completion: nil)

Note : Using a custom navigation bar of attaching BABFeedViewController as a childViewController of another viewController may cause issues related to topInset not being set correctly. In this case, override the topInset with the desired values by setting the shouldOverrideTopInsetand topInset properties of the BABFeedViewController.

Recommended Usage

Checking for the Ad Status

At times, displaying BABFeedViewController may result in a blank screen when there are no ads available. Therefore, it is recommended to call preload and receive onSuccess to check the ad status so that feed activity can be started only when there are ads available.

  • feedHandler.adsCount : The number of ads

  • feedHandler.availableReward : The total amount of reward available

     

// Objective-C [feedHandler preloadWithOnSuccess:^{ NSUInteger adsCount = feedHandler.adsCount; double availableReward = feedHandler.availableReward; } onFailure:^(NSError * _Nonnull error) { // Error when there is no ad available }];

 

// Swift feedHandler.preloadWith(onSuccess: { [weak feedHandler] in let adsCount = feedHandler.adsCount let availableReward = feedHandler.availableReward }, onFailure: { error in // Error when there is no ad available })

 

Note

  • The method populateViewController() must be called on the same object as the preloaded BABFeedHandler.

    • If ads are preloaded in a BABFeedHandler instance, the instance will continue to hold the same ads. Hence, even if the user leaves the activity, calling the populateViewController() with the same instance will display the same preloaded ads. By calling populateViewController() with a new BABFeedHandler, new ads will be shown each time the feed activity is started.

 

Advanced Usage

Design Customization

ToolBar Customization

The design of the toolbar at the top of the feed can be customized by modifying the properties of the navigationBar.

 

Customizing the Header

Customizing the header can be done to provide more information to the users.

  1. Create a that implements BABFeedHeaderView.

    1. Configure the view through the interface builder or code.

    2. Override desiredHeight to specify the height of the desired headerView.


      // Objective-C @interface CustomHeaderView: BABFeedHeaderView @end @implementation CustomHeaderView + (CGFloat)desiredHeight { return 115.0f; } - (void)loadFromNib { UIView *header = [[UINib nibWithNibName:@"CustomHeaderView" bundle:[NSBundle bundleForClass:[CustomHeaderView class]]] instantiateWithOwner:self options:nil][0]; [self addSubview:header]; } @end



      // Swift class CustomHeaderView: BABFeedHeaderView { override class func desiredHeight() -> CGFloat { return 115.0f } func loadFromNib() { let headerView = Bundle(for: type(of: self)).loadNibNamed("CustomHeaderView", owner: self, options: nil)?.first as! UIView addSubview(headerView) } }

       

  2. Specify the headerViewClass via BABFeedConfig.


    // Objective-C BABFeedConfig *config = [[BABFeedConfig alloc] initWithUnitId:YOUR_FEED_UNIT_ID]; ... config.headerViewClass = [CustomHeaderView class];



    // Swift let config = BABFeedConfig(unitId: YOUR_FEED_UNIT_ID) ... config.headerViewClass = CustomHeaderView.self

 

Customizing the Feed Ad List View

The ad list view of the feed can be customized and callbacks for ad events can be registered.

  1. Implement a class that inherits BABAdViewHolder.

    1. Configure the view through the interface builder or code.

    2. Implement renderAd to bind ad property to the view component. There may be times when reward is not available for an ad either because only a very short time has passed since the user has been rewarded for the same ad or because the ad did not have reward to begin with. Therefore, when configuring the ad layout, please check to see the availability (ad.reward > 0) of a reward to decide whether to show the reward on the UI or not

    3. (optional) Implement necessary customizations for the state-specific callbacks for the ad. (Refer to the document for event definitions and actions).


      // Objective-C @interface CustomAdViewHolder: BABAdViewHolder <BABNativeAdViewDelegate> @end @implementation CustomAdViewHolder // 1) Populate your view (example using xib file) - (void)loadFromNib { self.adView = [[NSBundle bundleForClass:[CustomAdViewHolder class]] loadNibNamed:@"CustomAdViewHolder" owner:self options:nil][0]; self.adView.delegate = self; [self addSubview:self.adView]; } // 2) Bind view with ad - (void)renderAd:(BABAd *)ad { [super renderAd:ad]; self.titleLabel.text = ad.creative.title; // Description field exists as a default in objc self.descriptionLabel.text = ad.creative.body; [self.iconImageView sd_setImageWithURL:[NSURL URLWithString:ad.creative.iconUrl]]; if (ad.reward > 0) { self.ctaLabel.text = [NSString stringWithFormat:@"+%d %@", (int)ad.reward, ad.creative.callToAction]; [self.rewardIcon setImage:[UIImage imageNamed:@"point_icon"]]; } else { self.ctaLabel.text = ad.creative.callToAction; [self.rewardIcon setImage:nil]; } self.adView.ad = ad; self.adView.mediaView = self.mediaView; self.adView.clickableViews = @[self.ctaButton, self.iconImageView]; } // 3) Handle ad callbacks - (void)BABNativeAdView:(BABNativeAdView *)adView didImpressAd:(BABAd *)ad { } - (void)BABNativeAdView:(BABNativeAdView *)adView didClickAd:(BABAd *)ad { } - (void)BABNativeAdView:(BABNativeAdView *)adView willRequestRewardForAd:(BABAd *)ad { } - (void)BABNativeAdView:(BABNativeAdView *)adView didRewardForAd:(BABAd *)ad withResult:(BABRewardResult)result { } - (void)BABNativeAdView:(BABNativeAdView *)adView didParticipateAd:(BABAd *)ad { } @end



      // Swift class CustomAdViewHolder: BABAdViewHolder, BABNativeAdViewDelegate { // 1) Populate your view (example using xib file) func loadFromNib() { self.adView = Bundle(for: type(of: self)).loadNibNamed("CustomAdViewHolder", owner: self, options: nil)?.first as! BABNativeAdView self.adView.delegate = self addSubview(self.adView) } // 2) Bind view with ad override func renderAd(ad: BABAd) { super.renderAd(ad) self.titleLabel.text = ad.creative.title // Description field exists as a default in objc self.descriptionLabel.text = ad.creative.body self.iconImageView.sd_setImage(with: URL(string: ad.creative.iconUrl)) if (ad.reward > 0) { self.ctaLabel.text = "+\(ad.reward) \(ad.creative.callToAction)" self.rewardIcon.image = UIImage(named: "point_ico") } else { self.ctaLabel.text = ad.creative.callToAction self.rewardIcon.image = nil } self.adView.ad = ad self.adView.mediaView = self.mediaView self.adView.clickableViews = [self.ctaButton, self.iconImageView] } // 3) Handle ad callbacks func babNativeAdView(_ adView: BABNativeAdView, didImpress ad: BABAd) { } func babNativeAdView(_ adView: BABNativeAdView, didClick ad: BABAd) { } func babNativeAdView(_ adView: BABNativeAdView, willRequestRewardFor ad: BABAd) { } func babNativeAdView(_ adView: BABNativeAdView, didRewardFor ad: BABAd, with result: BABRewardResult) { } func babNativeAdView(_ adView: BABNativeAdView, didParticipateAd ad: BABAd) { } }



  2. Specify the adViewHolderClass via BABFeedConfig.


    // Objective-C BABFeedConfig *config = [[BABFeedConfig alloc] initWithUnitId:YOUR_FEED_UNIT_ID]; ... config.adViewHolderClass = [CustomAdViewHolder class];



    // Swift let config = BABFeedConfig(unitId: YOUR_FEED_UNIT_ID) ... config.adViewHolderClass = CustomAdViewHolder.self

 

Separator Customization between Feed Items

The color, height and horizontalMargin of the separator between feed items can be customized.

 

// Objective-C BABFeedConfig *config = [[BABFeedConfig alloc] initWithUnitId:YOUR_FEED_UNIT_ID]; ... config.separatorHeight = 1.0f / UIScreen.mainScreen.scale; config.separatorColor = [UIColor colorWithWhite: 0.8f, alpha: 1]; config.separatorHorizontalMargin = 10;

 

// Swift let config = BABFeedConfig(unitId: YOUR_FEED_UNIT_ID) ... config.separatorHeight = 1.0 / UIScreen.main.scale config.separatorColor = UIColor(white: 0.8, alpha: 1) config.separatorHorizontalMargin = 10