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. 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.
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.
TTAdNative
is a Ad Loading Manager. It is recommended to be the member variable of the Activity.
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.
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. |
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.
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 |
Clicks on the ad view assets will be handled by the SDK, calling registerViewForInteraction
method on the ad, the method requires four instances:
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. |
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.
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.