Native ads allow you to customize the look and feel of the ads that appear in your app. You design the ads: how they look, where they’re placed, and how they work within your existing app design. This differs from other ad formats, which don't allow you to customize the appearance of the ad.
Note: Pangle supports 4 forms outside the chinese mainland: Large image with 1.91:1 ratio、1280*720 video、square image、 square video.
Create an app and native ad placement on Pangle platform
Native ads are ad assets that are presented to users via UI components. It can be formatted to match your app's visual design. When a native ad loads, your app receives an ad object that contains its assets, and the app is then responsible for displaying them.
Broadly speaking, there are three steps to successfully implement Native Ads:
Before loading a native ad, you should have finished the design of a native ad. This can be done either with the Interface Builder or programmatically.
Interface Builder Example as below:
Then get the native example view from Nib file in the mainBundle:
Native ads are loaded via BUNativeAd
object, which has the loadAdData
method used to load native ads. The BUNativeAd
object requires BUAdSlot
、 RootViewController
、 BUNativeAdDelegate
instances.The Native Ad Object is returned as a parameter in the nativeAdDidLoad:view:
callback.
Before you can load an ad, it is needed to initialize and configure the BUAdSlot
.
Requied:
Field Definition | Field Name | Field Type | Remarks |
ID | slot ID | NSString | ad placement ID |
AdType | ad type | NS_ENUM | ad type |
The following code demonstrates how to initialize a BUAdSlot
:
The root view controller handling ad actions is requred to be set to the BUNativeAd
:
BUNativeAdDelegate
to receive the following delegate calls. The methods of the protocol are all optional.loadAdData
. You can get the results of the request via calls:BUNativeAdDelegate Callback | Description |
nativeAdDidLoad:view: | This method is called when native ad material loaded successfully. |
nativeAd:didFailWithError: | This method is called when native ad materia failed to load. |
nativeAdDidBecomeVisible: | This method is called when native ad slot has been shown. |
nativeAdDidCloseOtherController: 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. |
nativeAdDidClick:withView: | This method is called when native ad is clicked. |
nativeAd:dislikeWithReason: | This method is called when the user clicked dislike reasons. Only used for dislikeButton in BUNativeAdRelatedView.h |
nativeAd:adContainerViewDidRemoved: | This method is called when the Ad view container is forced to be removed. |
Once your BUNativeAd
have been initialized and configured , call loadAdData
method onBUNativeAd
object to request an ad:
Sample code:
Once you have loaded an ad, all that remains is to display it to your users.(Though it doesn't necessarily have to do so immediately).
For the native ad you have accessed, there is a corresponding class: BUNativeAd
.
There are two parts you can obtain assets with the ad.
BUMaterialMeta
, a property of BUNativeAd
BUMaterialMeta
.BUImage
, a indirect property of BUMaterialMeta
in BUNativeAd
.BUNativeAdRelatedView
, an object need to pass BUNativeAd
when call the refreshData
method on which.BUNativeAdRelatedView
.The Logo
and ad label
are required to add to the Native ads
. logoADImageView
is recommended, which contains logo and ad label. It needed to actively add dislikeButton in order to deal with the feedback and improve the accuracy of ad.refreshData:
needs to be called on BUNativeAdRelatedView
every time you get new datas in order to show ad perfectly.registerContainer:withClickableViews:clickableViews
must be called on BUNativeAd
, which provides data binding of native ads and reporting of click events, to register and bind the view to be clicked, including images, buttons, etc, otherwise we can't confirm whether the display is an ad. And The click events (jump to ad page, download, call, etc.) registered by BUNativeAd are controlled by the SDK.BUNativeAdRelatedView
as well.videoAdView
interactions if the ad inclueds a video, set the delegate property of the BUVideoAdView
:BUVideoAdViewDelegate
to receive the following delegate calls:BUVideoAdViewDelegate Callback | Description |
playerReadyToPlay: | This method is called when videoadview ready to play. |
videoAdView:didLoadFailWithError: | This method is called when videoadview failed to play. |
videoAdView:stateDidChanged: | This method is called when videoadview playback status changed. |
playerDidPlayFinish: | This method is called when videoadview end of play. |
videoAdViewDidClick: | This method is called when videoadview is clicked. |
videoAdViewFinishViewDidClick: | This method is called when videoadview's finish view is clicked. |
videoAdViewDidCloseOtherController:interactionType: | This method is called when another controller has been closed. |
You can get the aspect ratio of the image or video in two ways:
BUImage
in the BUNativeAd.data.imageAry.firstObject
BUFeedADMode
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.