Integrate Banner Ads

Vungle Agent

September 17, 2024 17:35

To integrate any ad format, you must first have completed the instructions in the basic integration article.

Banner ads do not occupy a full screen; instead, the publisher determines the location of the ad container within their app. The size of the banner container must be either 320x50, 300x50, 300x250 (for MREC) or 728x90 (for tablets). Banner ads can display anywhere you specify on the screen, and the user can continue using the app while the ad plays.

Create a Banner Ad

To integrate banner ads in your iOS app, open Main.storyboard, add a UIView to your ViewController, and name it bannerAdContainer.

In your ViewController.swift file (or ViewController.h file for Objective-C), import VungleAdsSDK and add an instance variable for VungleBanner.

import UIKit
import VungleAdsSDK

class LOBannerViewController: UIViewController {
    @IBOutlet weak var bannerAdView: UIView!
    private var bannerAd: VungleBanner?

#import "LOBannerViewController.h"
#import <VungleAdsSDK/VungleAdsSDK.h>

@interface LOBannerViewController () <VungleBannerDelegate>
@property (nonatomic, weak) IBOutlet UIView *bannerAdView;
@property (nonatomic, strong) VungleBanner *bannerAd;
@end

Add the following code to your method where you want to prepare the VungleBanner instance. To create the VungleBanner, you will need to provide the Placement ID and banner size (refer to the Banner size table below). The Placement ID you use should have been set up in the Monetize Dashboard to work with the type of banner to be displayed.

Note that MREC ads need their own Placement ID. You cannot play an MREC ad in a Placement ID created for general banner ads. Separate Placement IDs are required for MREC ads and other types of banner ads.
SwiftObjective-C
```
self.bannerAd = VungleBanner(placementId: <YOUR_PLACEMENT_ID>, size: BannerSize.regular)
self.bannerAd?.delegate = self
```
```
self.bannerAd = [[VungleBanner alloc] initWithPlacementId:<YOUR_PLACEMENT_ID>
                                                     size:BannerSizeRegular];
self.bannerAd.delegate = self;
```

Note: You must set your ViewController (or any class that declares conformance to VungleBannerDelegate) to the delegate property of the VungleBanner instance (refer to the Register for Callbacks section below).

Supported Banner Sizes

Vungle supports the banner sizes in the table below. Specify the banner size when you create the VungleBanner instance by using one of the available enum values.

Banner Format	BannerSize enum	Dimension
Regular	`.regular`	320 x 50
Short	`.short`	300 x 50
MREC	`.mrec`	300 x 250
Leaderboard (tablet only)	`.leaderboard`	728 x 90

Load a Banner Ad

Once you create the VungleBanner instance, you can load an ad by calling load().

self.bannerAd = VungleBanner(placementId: <YOUR_PLACEMENT_ID>, size: BannerSize.regular)
self.bannerAd?.delegate = self
self.bannerAd?.load()

self.bannerAd = [[VungleBanner alloc] initWithPlacementId:<YOUR_PLACEMENT_ID>
                                                     size:BannerSizeRegular];
self.bannerAd.delegate = self;
[self.bannerAd load:nil];

Your ViewController (or any class that conforms to VungleBannerDelegate) will receive notification of load success or error through delegate callback methods (refer to the Register for Callbacks section below).

Play a Banner Ad

Once the banner is successfully loaded, you can display the banner by calling present(on: <YOUR_UIView>).
SwiftObjective-C
```
self.bannerAd?.present(on: <YOUR_UIView>)
```
```
[self.bannerAd presentOn: <YOUR_UIView>];
```
During the time the banner is visible to the user, you can listen for ad lifecycle events through delegate callback methods (refer to the Register for Callbacks section below).

Dismiss a Banner Ad

When the banner playback is completed, we recommend cleaning up the VungleBanner instance by removing it from the parent view. In the example below, the bannerAdView is the superView of the VungleBanner instance:

for subView in self.bannerAdView.subviews {
　　subView.removeFromSuperview()
}
self.bannerAd?.delegate = nil
self.bannerAd = nil

for (id subview in self.bannerAdView.subviews) {
  [subview removeFromSuperview];
}
self.bannerAd.delegate = nil;
self.bannerAd = nil;

Register for Callbacks

To receive notifications for ad events, declare conformance to the VungleBannerDelegate protocol and implement callback methods. Each of the callback methods is optional, so you can implement only the methods you want.

extension LOBannerViewController: VungleBannerDelegate {
    // Ad load Events
    func bannerAdDidLoad(_ banner: VungleBanner) {
        print("bannerAdDidLoad")
    }

    func bannerAdDidFailToLoad(_ banner: VungleBanner, withError: NSError) {
        print("bannerAdDidFailToLoad")
    }
  
    // Ad Lifecycle Events
    func bannerAdWillPresent(_ banner: VungleBanner) {
        print("bannerAdWillPresent")
    }
    
    func bannerAdDidPresent(_ banner: VungleBanner) {
        print("bannerAdDidPresent")
    }

    func bannerAdDidFailToPresent(_ banner: VungleBanner, withError: NSError) {
        print("bannerAdDidFailToPresent")
    }
    
    func bannerAdDidTrackImpression(_ banner: VungleBanner) {
        print("bannerAdDidTrackImpression")
    }
    
    func bannerAdDidClick(_ banner: VungleBanner) {
        print("bannerAdDidClick")
    }
    
    func bannerAdWillLeaveApplication(_ banner: VungleBanner) {
        print("bannerAdWillLeaveApplication")
    }
    
    func bannerAdWillClose(_ banner: VungleBanner) {
        print("bannerAdWillClose")
    }
    
    func bannerAdDidClose(_ banner: VungleBanner) {
        print("bannerAdDidClose")
    }
}

#pragma mark - VungleBanner Delegate Methods
// Ad load Events
- (void)bannerAdDidLoad:(VungleBanner *)banner {
  NSLog(@"bannerAdDidLoad");
}
- (void)bannerAdDidFailToLoad:(VungleBanner *)banner
                    withError:(NSError *)withError {
  NSLog(@"bannerAdDidFailToLoad");
}
// Ad Lifecycle Events
- (void)bannerAdWillPresent:(VungleBanner *)banner {
  NSLog(@"bannerAdWillPresent");
}
- (void)bannerAdDidPresent:(VungleBanner *)banner {
  NSLog(@"bannerAdDidPresent");
}
- (void)bannerAdDidFailToPresent:(VungleBanner *)banner
                       withError:(NSError *)withError {
  NSLog(@"bannerAdDidFailToPresent");
}
- (void)bannerAdDidTrackImpression:(VungleBanner *)banner {
  NSLog(@"bannerAdDidTrackImpression");
}
- (void)bannerAdDidClick:(VungleBanner *)banner {
  NSLog(@"bannerAdDidClick");
}
- (void)bannerAdWillLeaveApplication:(VungleBanner *)banner {
  NSLog(@"bannerAdWillLeaveApplication");
}
- (void)bannerAdWillClose:(VungleBanner *)banner {
  NSLog(@"bannerAdWillClose");
}
- (void)bannerAdDidClose:(VungleBanner *)banner {
  NSLog(@"bannerAdDidClose");
}

Test a Banner Ad

You can test a Banner ad in one of two ways: by setting your app status to Test Mode so that Vungle can deliver test ads to your app, or by adding a test device to your app so that Vungle can deliver test ads specifically to the test device. Follow the instructions in Test Your Integration: Test Mode and Test Devices.

Additional Resources

Refer to our Banner ad examples in Swift or Objective-C.
Refer to our MREC ad examples in Swift or Objective-C.