帮助中心/文档详情/

Banner Ads

Introduction

Banner ads occupy a spot within an app's layout, either at the top or bottom of the device screen.

Note: Pangle only supports 300x250(points) and 320x50(points) for the traffic outside of Chinese Mainland at this time.

Precondition

Create an app and banner ad placement on Pangle platform

 

Create Banner Object and Request Ads

BUNativeExpressBannerView

Banner ads are requested by BUNativeExpressBannerView object. The first step in using one is to instantiate it and set its ad placement Id. Expected adSize should be passed in 'point' on iOS. Then call loadAdData on BUNativeExpressBannerView to load a banner ad and call addSubview to add banner view into your app layout.

Requied:

Field Definition Field Name Field Type Remarks
slotID slot ID NSString ad placement ID
adSize ad size CGSize Ad size must be the same size as the pangle platform configuration, adSize should be passed in 'point' on iOS


Create a BUNativeExpressBannerView object, and call loadAdData on BUNativeExpressBannerView to load a banner ad.

self.bannerView = [[BUNativeExpressBannerView alloc] initWithSlotID:@"Your_Ad_Placement_Id" rootViewController:self adSize:CGSizeMake(screenWidth, bannerHeigh) IsSupportDeepLink:YES];
self.bannerView.frame = CGRectMake(0, self.view.height-bannerHeigh, screenWidth, bannerHeigh);
self.bannerView.delegate = self;
[self.bannerView loadAdData];

Optional:

Field Definition Field Name Field Type Remarks
interval Rotation interval NSInteger The interval of rotation was 30s to 120s.


BUNativeExpressBannerViewDelegate Callback

BUNativeExpressBannerViewDelegate Callback Description
nativeExpressBannerAdViewDidLoad: This method is called when bannerAdView ad slot loaded successfully.
nativeExpressBannerAdView: didLoadFailWithError: This method is called when bannerAdView ad slot failed to load.
nativeExpressBannerAdViewRenderSuccess: This method is called when rendering a nativeExpressAdView successed.
nativeExpressBannerAdViewRenderFail:error: This method is called when a nativeExpressAdView failed to render.If the rendering fails due to network or hardware reasons, you can change the phone or the network environment. It is recommended to upgrade to the latest version of the Pangle platform.
nativeExpressBannerAdViewWillBecomVisible: This method is called when bannerAdView ad slot shows new ad.
nativeExpressBannerAdViewDidClick: This method is called when bannerAdView is clicked.
nativeExpressBannerAdView:dislikeWithReason: This method is called when the user clicked dislike button and chose dislike reasons.
nativeExpressBannerAdViewDidCloseOtherController: interactionType: This method is called when another controller has been closed. interactionType : open appstore in app or open the webpage or view video ad details page.


Display Banner

To show a banner ad, check the nativeExpressBannerAdViewDidLoad callback to verify that if the ad is returned. Then check the nativeExpressBannerAdViewRenderSuccess to verify if the banner view is rendered successfully. Then addSubview to display the banner ad.

Instance:

- (void)showBanner {
    [self.view addSubview:self.bannerView];
}

Banner ad could only be displayed after receiving nativeExpressBannerAdViewRenderSuccess

- (void)nativeExpressBannerAdViewRenderSuccess:(BUNativeExpressBannerView *)bannerAdView {
 //After the callback method, the advertisement is displayed, which can ensure the smooth playing and display, and the user experience is better.
}


Test with test ads

Now you have finished the integration. If you wanna test your apps, make sure you use test ads rather than live, production ads. The easiest way to load test ads is to use test mode. It's been specially configured to return test ads for every request, and you're free to use it in your own apps while coding, testing, and debugging.

Refer to the How to add a test device? to add your device to the test devices on Pangle platform.

 

Note

  1. At present, banner ads support the center display of the bottom or top of the content, and developers can adjust the left and right margins by themselves.

 

Resource

Demo: GitHub

文档内容是否对您有帮助?