Aller au contenu principal
Version: 5.x.x

Banner Ads

Overview​

A Banner ad typically appears as a rectangular or square graphic or text on your app's user interface. Banner ads are mostly displayed at the top or bottom of the screen. Inline banner ads are placed inside the scrollable contents.

Create a BannerView​

Banner ads are displayed using a BannerView instance. You can create a BannerView instance either programmatically or from interface builder.

Programmatically​

Following code shows, initializing a BannerView instance with a AdSize and adding it to the view using autolayout.

#import <BlueStackSDK/BlueStackSDK.h>

@interface ViewController ()

@property(nonatomic, strong) BannerView *bannerView;

@end

@implementation ViewController

- (void)viewDidLoad {
  [super viewDidLoad];

  // Initialize the BannerView instance
  self.bannerView = [[BannerView alloc] initWithAdSize:AdSizeBanner];
  
  // Add BannerView to the parent view
  [self addBannerViewToView:self.bannerView];
}

- (void)addBannerViewToView:(UIView *)bannerView {
  bannerView.translatesAutoresizingMaskIntoConstraints = NO;
  [self.view addSubview:bannerView];
  [self.view addConstraints:@[
    [NSLayoutConstraint constraintWithItem:bannerView
                              attribute:NSLayoutAttributeBottom
                              relatedBy:NSLayoutRelationEqual
                                  toItem:self.view.safeAreaLayoutGuide
                              attribute:NSLayoutAttributeBottom
                              multiplier:1
                                constant:0],
    [NSLayoutConstraint constraintWithItem:bannerView
                              attribute:NSLayoutAttributeCenterX
                              relatedBy:NSLayoutRelationEqual
                                  toItem:self.view
                              attribute:NSLayoutAttributeCenterX
                              multiplier:1
                                constant:0]
                                ]];
}
@end

Interface Builder​

In your storyboard or xib add a UIView and assign BannerView to the class of that view in Identity Inspector. Add required position layout constraints to the view. Add a IBOutlet to the BannerView.

BannerView from Interface Builder

Load a banner ad​

After initializing and adding BannerView to the view hierarchy you need to load the BannerView by calling load(requestOptions:) method with a RequestOptions object or simply calling load() method.

Without RequestOptions​

self.bannerView.placementID = @"BANNER_PLACEMENT_ID_HERE";
self.bannerView.viewController = self;
[self.bannerView load];

To load banner ad, it is mandetory to provide placementID to BannerView instance. It also takes a optional viewController from which it will present full screen content after user interacts with the BannerView.

With RequestOptions​

Create RequestOptions for supplying targeting information while loading ads.

RequestOptions *requestOptions = [[RequestOptions alloc] initWithAge:@(25)
                                                            location:[[CLLocation alloc] initWithLatitude:48.87610 longitude:10.453]
                                                              gender:GenderMale
                                                             keyword:@"brand=myBrand;category=sport"    
                                                          contentUrl:@"https://my_content_url.com/"];
[self.bannerView loadWithRequestOptions:requestOptions];

Ad events​

To get BannerView lifecycle events, you need to set the BannerViewDelegate before loading the banner ad.

Register for BannerView events​

self.bannerView.delegate = self; // typically it is the viewController in which you are adding the BannerView

If you are using interface builder you can set the delegate from the connections inspector.

BannerViewDelegate from Interface Builder

Implement banner events​

BannerView has the following events for notifying it's lifecycle, receiving click and resizes.

  • onLoad(bannerView:preferredHeight:) will be called by the SDK when banner ad finishes loading.
- (void)bannerView:(BannerView * _Nonnull)bannerView didLoadWithPreferredHeight:(CGFloat)preferredHeight { 
    NSLog(@"BannerView successfully loaded");
}
  • onFailedToLoad(bannerView:error:) will be called when all the ad server fails to load the ad. It will return the error of last called ad server.
- (void)bannerView:(BannerView * _Nonnull)bannerView didFailedToLoadWithError:(NSError * _Nonnull)error { 
    NSLog(@"BannerView failed to load ad with error: %@", error.localizedDescription);
}
  • onRefresh(bannerView:) will be called when the banner has refreshed
- (void)didRefreshBannerView:(BannerView * _Nonnull)bannerView {
    NSLog(@"BannerView refreshed");
}
  • onFailedToRefresh(bannerView:error:) will be called when the banner fail to refresh.
- (void)bannerView:(BannerView * _Nonnull)bannerView didFailedToRefreshWithError:(NSError * _Nonnull)error {
    NSLog(@"BannerView failed to refresh ad with error: %@", error.localizedDescription);
}
  • onClick(bannerView:) will be called when user click the banner ad.
- (void)didClick:(BannerView *)bannerView {
    NSLog(@"BannerView received a click");
}
  • onResize(bannerView:size:) will be called when the banner has changed size
- (void)bannerView:(BannerView *)bannerView didResizedToSize:(CGSize)size {
    NSLog(@"BannerView size has been changed to: %@", NSStringFromCGSize(size));
}

Destroying Banner Ad​

You need to keep a strong reference to the BannerView instance, if you want to add the banner view to the parent view after it completes loading a banner ad. A BannerView instance maintains lifecycle of a single banner ad even after it refresh.

You must not call load(requestOptions:) method multiple times using single BannerView instance.

Also when you are done with BannerView instance you can release the instance as follows:

[self.bannerView removeFromSuperview];
self.bannerView.delegate = nil;
self.bannerView = nil;

BannerView provides AdSize enum for it's available ad sizes.

AdSizeDescriptionDimensions
bannerSmall Banner320 x 50
dynamicBannerSmall Banner ScreenScreen width x 50
largeBannerLarge Banner320 x 100
fullBannerFull Banner ipad468 x 60
dynamicLeaderboardBannerLandscape Banner ipad728 x 90
leaderboardLandscape Banner ipadScreen width x 90
mediumRectangleSquare Banner300 x 250

Adapt the banner size after loading​

Although the BannerView instance takes care of resizing the creative to make it fit properly in the banner view size, you can also resize the banner view to match the creative’s width/height.

The current creative's height can be fetched directly from the preferredHeight parameter retrieved in the onLoad(_ bannerView: BannerView, _ preferredHeight: CGFloat) delegate method.

You can adjust the height of your banner view using that preferredHeight

- (void)bannerView:(BannerView * _Nonnull)bannerView didLoadWithPreferredHeight:(CGFloat)preferredHeight { 
    dispatch_async(dispatch_get_main_queue(), ^{
        self.bannerViewHeightConstraint.constant = preferredHeight;
        [self.view layoutIfNeeded];
    });
}

You will found size of the refreshed banner ad from the size parameter of onResize(_ bannerView: BannerView, _ size: CGSize) delegate method.

- (void)bannerView:(BannerView *)bannerView didResizedToSize:(CGSize)size { 
    dispatch_async(dispatch_get_main_queue(), ^{
        self.bannerViewWidthConstraint.constant = size.width;
        self.bannerViewHeightConstraint.constant = size.height;
        [self.view layoutIfNeeded];
    });
}