Native Ads

Introduction

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.

Precondition

Create an app and native ad placement on Pangle platform

Create an application: [Application] -> [App] -> [Add App]

Reference：How do I create a new App?

Create an ad placement：[Application] -> [Ad Placements] -> [Add Ad Placement] -> [Native Ads]

Reference：How do I create an ad placement?

Native Ads Implementation

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:

Design your native ad layout.
Load an ad.
Display the ad content in your app.

Design your native ad layout

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:

Load an ad

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.

Configure the BUAdSlot

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:

Set RootViewController

The root view controller handling ad actions is requred to be set to the BUNativeAd:

Register BUNativeAdDelegate callbacks

To be notified of events related to the native ad interactions, set the delegate property of the native ad:

Then implement to BUNativeAdDelegate to receive the following delegate calls. The methods of the protocol are all optional.
The following example shows how to implement the delegate protocol:

BUNativeAdDelegate Callback Description
This protocol includes some message that's sent to the delegate after calls 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.

Request the ad

Once your BUNativeAd have been initialized and configured , call loadAdData method onBUNativeAd object to request an ad:

Sample code:

Display the ad content in your app

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).

Set native ad assets to your customized native view

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

You can get adTitle、adDescription、buttonText of creative button, etc, via BUMaterialMeta .

You can get ad imageUrl via BUImage , a indirect property of BUMaterialMeta in BUNativeAd.

BUNativeAdRelatedView, an object need to pass BUNativeAd when call the refreshData method on which.

You can add ad logo、ad label、dislikeButton, etc, via 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.

Note：

The refreshData: needs to be called on BUNativeAdRelatedView every time you get new datas in order to show ad perfectly.
The 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.

You can get video view via BUNativeAdRelatedView as well.

Get notified of videoAdView events

To be notified of events related to the native ad videoAdView interactions if the ad inclueds a video, set the delegate property of the BUVideoAdView:

Then implement to BUVideoAdViewDelegate to receive the following delegate calls:

BUVideoAdViewDelegate Callback Description

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.

Update the size of native ad view

You can get the aspect ratio of the image or video in two ways：

via BUImagein the BUNativeAd.data.imageAry.firstObject

via the ENUM BUFeedADMode

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.