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.
Loading an ad.
Displaying 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. Assume you have finished the design of native layout. Example as below:

Then inflate the layout in the app. In this example, we're inflating an XML layout that contains views for displaying a native ad.

Load an Ad

Native ads are loaded via the TTAdNative class, which has the loadFeedAd method used to load native ads. The loadFeedAd method requires AdSlot and FeedAdListener instances.

Create the TTAdNative Object

TTAdNative is a Ad Loading Manager. It is recommended to be the member variable of the Activity.

Create the AdSlot Object

When building the AdSlot Object, your Ad Placement Id is required to call setCodeId.

Returning multi-native ads in one ad request is supported on Pangle. Publishers could set the number of ads that the SDK should attempt to load via setAdCount() method when building AdSlot Object. This number is capped at a maximum of three, and it's not guaranteed that the SDK will return the exact number of the ads.

Load a Native Ad and Register FeedAdListener Callback

Calling the loadFeedAd method on the TTAdNative class to load a Native Ad. The AdSlot and FeedAdListener Object are required. The Native Ad Object is returned as a parameter in the onFeedAdLoad callback.

FeedAdListener callback	Description
onError	This method is invoked when an ad fails to load. It includes an error parameter of type Error that indicates what type of failure occurred. For more information, refer to the ErrorCode section.
onFeedAdLoad	This method is executed when an ad material is successfully loaded.

Displaying the Ad Content In the App

Once the native ad is loaded, the app is responsible for displaying ad assets. Publishers could retrieve the ad assets from returned TTFeedAd object and then populate the asset views.

Populate the Asset Views

Note:Publishers need to inflate the native ad layout before starting this part, refer to the inflate native ad layout

Here is an example that retrieves ad assets and populates the asset views. SDK always return image url for all image assets, publishers need to download the image from the url. In the example, it uses a third-party framework(Glide) to finish the thing.

Note: You must display the ad logo to denote that the view is an advertisement.

Publishers could check ad forms with the getImageMode() method. Example as below:

IMAGE_MODE	Description
IMAGE_MODE_VIDEO	1280*720 video
IMAGE_MODE_VIDEO_SQUARE	1:1 square video
IMAGE_MODE_LARGE_IMG	1200*628 image (1.91:1)
IMAGE_MODE_SQUARE_IMG	1:1 square image

Click Handling and Ad Event Handling

Clicks on the ad view assets will be handled by the SDK, calling registerViewForInteraction method on the ad, the method requires four instances:

native ad view
image view for the main image asset or video view for the video asset
clickable views that you want it could be clicked by the user
adInteractionListener

AdInteractionListener provides some ad event methods to get notifications of native ads.

Here is an example that uses the registerViewForInteraction to observe click events and AdInteractionListener to get notifications from the native ad.

Here is the description of AdInteractionListener

AdInteractionListener	Description
onAdCreativeClick	This method is invoked when the ad is clicked by the user.
onAdShow	This method is invoked when the ad is displayed, covering the device's screen.

Pangle provides a specific ad event callback for video asset. Passing a VideoAdListener object to the setter on your ad. This step is optional, details as below:

VideoAdListener	Description
onVideoLoad	This method is invoked when the video has finished loading.
onVideoError	This method is invoked when the video fails to play.
onVideoAdStartPlay	This method is invoked when the video start playing.
onVideoAdPaused	This method is invoked when the video is paused.
onVideoAdContinuePlay	This method is invoked when the video is continue to play.
onProgressUpdate	Reporting the progress of video playing.
onVideoAdComplete	This method is invoked when the the video has finished playing.

Dislike Button(optional)

Pangle provides a dislike button for banner ad which could make the user have a chance to remove the banner layout and select the reason why they don't like it. This step is optional.

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.