Skip to main content

iOS - Banner Ad

Overview


Vpon Banner can be embedded to part of your app layout. It consists of a multimedia object which can attract user. The ads will expand to show much richer content after clicking.

Prerequisites


Please make sure you’ve imported Vpon SDK to your Xcode project. If not, please refer to our Integration Guide to finish your setting.

Start To Implement Banner Ad


iOS apps are composed of UIView objects which will present as text area, buttons or other controllers. VponAdRequestView is simply an UIView subclass that can display small HTML5 ads trigger by users’ touch.

Just like all the other UIView, a VpadnBanner is easy to implement in code.

  1. Import VpadnSDKAdKit
  2. Declare a VponBannerView instance
  3. Initialize VponBannerView and indicate a License Key
  4. Set up VponAdRequest object and send ad request
  5. Set up Delegate protocol

We strongly recommend that you can finish all the steps in ViewController of the application.

Import VpadnSDKAdKit And Declare A VponBannerView Instance


Obejctive-C

// Import Vpon SDK
@import VpadnSDKAdKit;

@interface ViewController() <VponBannerViewDelegate>
@property (strong, nonatomic) VponBannerView *bannerView;
@property (weak, nonatomic) IBOutlet UIView *loadBannerView;

@end

Swift

// Import Vpon SDK
import VpadnSDKAdKit

class VponSdkBannerViewController: UIViewController {
	var bannerView: VponBannerView?
	@IBOutlet weak var loadBannerView: UIView!
}

Initialize VponBannerView Object And Indicate A License Key


Please refer to the code snippet below to initialize Banner Ad in viewDidLoad of ViewController.

Objective-C

// initWithAdSize: The Banner Ad size that will be displayed
_bannerView = [[VponBannerView alloc]initWithAdSize:[VponAdSize banner]];
// licenseKey: Vpon License Key to get ad, please replace with your own one
_bannerView.licenseKey = @"License Key";

// Only available for Banner Ad, will auto refresh ad if set YES
_bannerView.autoRefresh = NO;

_bannerView.rootViewController = self;
_bannerView.delegate = self;

Swift

// adSize: The Banner Ad size that will be displayed
bannerView = VponBannerView(adSize: .banner())
// licenseKey: Vpon License Key to get ad, please replace with your own one
bannerView?.licenseKey = "License Key"

// Only available for Banner Ad, will auto refresh ad if set true
bannerView?.autoRefresh = false

bannerView?.rootViewController = self
bannerView?.delegate = self

Set Up VponAdRequest and Send Ad Request


Set up VponAdRequest before you send ad request:

Objective-C

VponAdRequest *request = [[VponAdRequest alloc] init];
// Set your test device's IDFA here if you're trying to get Vpon test ad
VponAdRequestConfiguration *config = VponAdRequestConfiguration.shared;
[config setTestDeviceIdentifiers:@[[ASIdentifierManager sharedManager].advertisingIdentifier.UUIDString]];

// Start to load ad
[_bannerView load: request];

Swift

let request = VponAdRequest()
// Set your test device's IDFA here if you're trying to get Vpon test ad
VponAdRequestConfiguration.shared.testDeviceIdentifiers = ([ASIdentifierManager.shared().advertisingIdentifier.uuidString])

// Start to load ad
bannerView?.load(request)

Note:

  • Besides of setting up VponAdRequest for each ad type, you can also set up a general VpadnRequest for all types of ad.
  • If you want to know more about target setting, please refer to Advanced Setting.

Set Up Delegate Protocol


After finishing ad request, implement the delegate protocol as below to listen ad status.

Objective-C

- (void)bannerViewDidReceiveAd:(VponBannerView *)bannerView {
	// Invoked if receive Banner Ad successfully
	// Add ad view to your layout
	bannerView.translatesAutoresizingMaskIntoConstraints = NO;
	[self.loadBannerView addSubview:bannerView];
	[NSLayoutConstraint activateConstraints:@[
		[bannerView.centerXAnchor constraintEqualToAnchor: _loadBannerView.centerXAnchor],
		[bannerView.centerYAnchor constraintEqualToAnchor: _loadBannerView.centerYAnchor]
	]];
}

- (void)bannerView:(VponBannerView *)bannerView didFailToReceiveAdWithError:(NSError *)error {
	// Invoked if received ad fail, check this callback to indicates what type of failure occurred
}

- (void)bannerViewDidRecordImpression:(VponBannerView *)bannerView {
	// Invoked if an impression has been recorded for an ad.
}

- (void)bannerViewDidRecordClick:(VponBannerView *)bannerView {
	// Invoked if an click has been recorded for an ad.
}

Swift

func bannerViewDidReceiveAd(_ bannerView: VponBannerView) {
	// Invoked if receive Banner Ad successfully
	// Add ad view to your layout
	bannerView.translatesAutoresizingMaskIntoConstraints = false
	loadBannerView.addSubview(bannerView)
	NSLayoutConstraint.activate([
		bannerView.centerXAnchor.constraint(equalTo: loadBannerView.centerXAnchor),
		bannerView.centerYAnchor.constraint(equalTo: loadBannerView.centerYAnchor)
	])
}

func bannerView(_ bannerView: VponBannerView, didFailToReceiveAdWithError error: Error) {
	// Invoked if received ad fail, check this callback to indicates what type of failure occurred
}

func bannerViewDidRecordImpression(_ bannerView: VponBannerView) {
	// Invoked if an impression has been recorded for an ad.
}

func bannerViewDidRecordClick(_ bannerView: VponBannerView) {
	// Invoked if an click has been recorded for an ad.
}

Banner Format


Besides the 320x50, Vpon supports the following ad formats:

Size (WxH) Description VponAdSize Constant Devices
320x50 Standard Banner banner iPhone
iPad
320x100 Large Banner largeBanner iPhone
iPad
468x60 IAB Full-Size Banner fullBanner iPad
728x90 IAB Leaderboard leaderBoard iPad
300x250 IAB Medium Recangle mediumRectangle iPhone
iPad
320x480 Large Rectangle Banner largeRectangle iPhone
iPad

Besides, you can all use VponAdSize as the parameter of VponBannerView:

Objective-C

_bannerView = [[VponBannerView alloc] initWithAdSize:[VponAdSize mediumRectangle]];

Swift

bannerView = VponBannerView(adSize: .mediumRectangle())

Tips


Make Sure If The Ad Display Successfully

Please note that following settings which might cause the ad invisible on the screen are not allowed:

  • Set AdView as Hidden
  • Set the Alpha value of AdView < 1.0
  • Overlays that cover the AdView

Please help to check if below log printed after the ad display and match the viewability standard:

<VPON> [NOTE] Send impression successfully

Sample Code

Please refer to our Sample Code for a complete integration sample.

Integration Guide For The Version Below Vpon SDK v5.6.0

Please refer to Banner Ad Integration Guide if you want to know more about the integration that compatible with the Vpon SDK version below v5.5.0.