To integrate any ad format, you must first have completed the instructions in the basic integration article.
An inline ad is a full screen or non-full screen ad that seamlessly integrates within the app content. The publisher determines the location of the ad container within their app. Inline ads can display anywhere you specify on the screen, and the user can continue using the app while the ad plays.
VungleAdSize
The Vungle SDK supports both standard and custom ad sizes.
Standard VungleAdSize
The following table lists the standard ad sizes:
VungleAdSize Constant |
Dimensions in DP (WxH) |
---|---|
VungleAdSizeBannerRegular |
320 x 50 |
VungleAdSizeBannerShort |
300 x 50 |
VungleAdSizeMREC |
300 x 250 |
VungleAdSizeLeaderboard |
728 x 90 |
Custom Ad Size
To define a custom banner size, set your size using VungleAdSizeFromCGSize
:
let adSize = VungleAdSize.VungleAdSizeFromCGSize(CGSize(width: 300, height: 300))
VungleAdSize *adSize = [VungleAdSize VungleAdSizeFromCGSize:CGSizeMake(300, 300)]
Integrate Inline Ads Using the VungleBannerView
Instance
Integrate inline ads using the VungleBannerView
instance described in this article (the legacy VungleBanner
instance you may be familiar with is deprecated).
The size of the inline ad container can be customized by passing the adView
size to the SDK, or you can choose from the standard sizes, as described in the VungleAdSize section above.
Create an Inline Ad
- To integrate inline ads in your iOS app, open
Main.storyboard
, add aUIView
to yourViewController
, and name itInLineAdContainer
.
- In your
ViewController.swift
file (orViewController.h
file for Objective-C), importVungleAdsSDK
and add an instance variable forVungleBannerView
.
import UIKit import VungleAdsSDK class LOBannerViewController: UIViewController { @IBOutlet weak var bannerAdView: UIView! private var bannerAd: VungleBannerView?
#import "LOBannerViewController.h" #import @interface LOBannerViewController () @property (nonatomic, weak) IBOutlet UIView *bannerAdView; @property (nonatomic, strong) VungleBannerView *bannerAd; @end
- To create the Inline ads, use the
VungleBannerView
instance and create a custom ad size usingVungleAdSize
. Add the following code to your method where you want to prepare theVungleBannerView
instance. You will need to provide the Placement ID andVungleAdSize
. The Placement ID you use should have been set up in the Monetize Dashboard to work with the type of inline ad to be displayed.
In addition to the standard ad Sizes, Vungle lets you serve any sized ad unit into an app. The ad size (width, height) defined for an ad request should match the dimensions of theVungleBannerView
displayed on the app. To set a custom size, use theVungleAdSize
APIVungleAdSizeFromCGSize
.
let adSize = VungleAdSize.VungleAdSizeFromCGSize(CGSize(width: 300, height: 300)) self.bannerAd = VungleBannerView(placementId: "placementId", vungleAdSize : adSize) self.bannerAd?.delegate = self
VungleAdSize *adSize = [VungleAdSize VungleAdSizeFromCGSize:CGSizeMake(300, 300)] self.bannerAd = [[VungleBannerView alloc] initWithPlacementId:@"placementId" vungleAdSize:adSize]; self.bannerAd.delegate = self;
Note: You must set your ViewController
(or any class that declares conformance to VungleBannerViewDelegate
) to the delegate property of the VungleBannerView
instance (refer to the Register for Callbacks section below).
Load and Play an Inline Ad
- Once you create the
VungleBannerView
instance, you can load an ad by callingload()
.
self.bannerAd?.load() // add the bannerAd instance as a subview to your view where you want to display the ad. self.bannerAdView.addSubview(bannerAd)
[self.bannerAd load:@"bidpayLoad"];
// pass nil for waterwall ads. Else the bidPayload for Bidding ad. // add the bannerAd instance as a subview to your view where you want to display the ad. [self.bannerAdView addSubview: self.bannerAd]; - Your
ViewController
(or any class that conforms toVungleBannerViewDelegate
) will receive notification of load success or error through delegate callback methods (refer to the Register for Callbacks section below).
Dismiss an Inline Ad
When the inline ad playback is completed, we recommend cleaning up the VungleBannerView
instance by removing it from the parent view. In the example below, the bannerAdView
is the superView
of the VungleBannerView
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 VungleBannerViewDelegate
protocol and implement callback methods. Each of the callback methods is optional, so you can implement only the methods you want.
extension LOBannerViewController: VungleBannerViewDelegate {
func bannerAdDidLoad(_ bannerView: VungleBannerView) {
print(" bannerAdDidLoad")
}
func bannerAdWillPresent(_ bannerView: VungleBannerView) {
print("bannerAdWillPresent")
}
func bannerAdDidPresent(_ bannerView: VungleBannerView) {
print("bannerAdDidPresent")
}
func bannerAdDidFail(_ bannerView: VungleBannerView, withError: NSError) {
print("bannerAdDidFailToPresent with error: \(withError.localizedDescription)")
}
func bannerAdWillClose(_ bannerView: VungleBannerView) {
print(" bannerAdWillClose")
}
func bannerAdDidClose(_ bannerView: VungleBannerView) {
print(" bannerAdDidClose")
}
func bannerAdDidTrackImpression(_ bannerView: VungleBannerView) {
print("bannerAdDidTrackImpression")
}
func bannerAdDidClick(_ bannerView: VungleBannerView) {
print("bannerAdDidClick")
}
func bannerAdWillLeaveApplication(_ bannerView: VungleBannerView) {
print("bannerAdWillLeaveApplication")
}
}
#pragma mark - VungleBannerViewDelegate
- (void)bannerAdDidLoad:(VungleBannerView *)bannerView {
NSLog(@"bannerAdDidLoad");
}
- (void)bannerAdDidFail:(VungleBannerView *)bannerView withError:(NSError *)withError {
NSLog(@"bannerAdDidFail");
}
- (void)bannerAdWillPresent:(VungleBannerView *)bannerView {
NSLog(@"bannerAdWillPresent");
}
- (void)bannerAdDidPresent:(VungleBannerView *)bannerView {
NSLog(@"bannerAdDidPresent");
}
- (void)bannerAdWillClose:(VungleBannerView *)bannerView {
NSLog(@"bannerAdWillClose");
}
- (void)bannerAdDidClose:(VungleBannerView *)bannerView {
NSLog(@"bannerAdDidClose");
}
- (void)bannerAdDidTrackImpression:(VungleBannerView *)bannerView {
NSLog(@"bannerAdDidTrackImpression");
}
- (void)bannerAdDidClick:(VungleBannerView *)bannerView {
NSLog(@"bannerAdDidClick");
}
- (void)bannerAdWillLeaveApplication:(VungleBannerView *)bannerView {
NSLog(@"bannerAdWillLeaveApplication");
}
Test an Inline Ad
You can test an inline 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 inline ad examples in Swift or Objective-C.