Pangle: A global platform dedicated to developer growth.|Integration Docs
Knowledge Center

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

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:

  1. Create PAGNativeRequest object
  1. Load a Native ad and register PAGNativeAdLoadListener callback
  1. Design your native ad layout.
  1. Register PAGNativeAdInteractionListener callback
  1. Display the ad.

Load an Ad

Loading an ad is accomplished using the load() method on the PAGNativeAd class. The load() method requires an ad slot id, an instance object of PAGNativeRequest, and a PAGNativeAdLoadListener to be notified when ad loading succeeds or fails. The loaded PAGNativeAd object is provided as a parameter in the success callback.

Create PAGNativeRequest object

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

Load a Native ad and register PAGNativeAdLoadListener callback

Use the method of PAGNativeAd to load the ad, and register the PAGNativeAdLoadListener callback.

The description of PAGNativeAdLoadListener callback

PAGNativeAdLoadListener

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

onAdLoaded

This method is executed when an ad material is loaded successfully.

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.

Populate the Asset Views

Register Ad Event Callback

Ad event callbacks need to be registered before displaying an ad. Each method in the event callback corresponds to an event in the ad lifecycle.

The description of PAGNativeAdInteractionListener callback

PAGNativeAdInteractionListener

description

onAdShowed

This method is invoked when the ad is displayed, covering the device's screen.

onAdClicked

This method is invoked when the ad is clicked by the user.

onAdDismissed

This method is invoked when the ad disappears.

The description of PAGNativeAd

PAGNativeAd

description

PAGNativeAdData getNativeAdData()

Calling getNativeAdData() will return a PAGNativeAdData ad data object

void registerViewForInteraction(ViewGroup container, List<View> clickViews, List<View> creativeViews, View dislikeView, PAGNativeAdInteractionListener listener)

Call timing: The developer must call the PAGNativeAd ad object before displaying it; the function of this method is to register ad billing events and ad interaction callback events

Parameter Description

container :The root view of the ad component

clickViews : Ad component View collection that needs to register for ordinary click events

creativeViews : Ad component View collection that needs to register creative click events

dislikeView:The custom ad closes the View, and calls back through the onAdDismissed method of PAGNativeAdInteractionListener after clicking. Note that it is not allowed to set any click events on the View, otherwise the ad close event callback (onAdDismissed) will be invalid.

PAGNativeAdInteractionListener : Ad interaction events

The description of PAGNativeAdData

PAGNativeAdData

description

PAGImageItem getIcon()

Returns an advertising Icon object PAGImageItem

String getTitle()

Returns an ad title of type String

String getDescription()

Returns an ad description of type String

String getButtonText()

Returns the content of the advertisement button of type String

PAGMediaView getMediaView()

Returns an advertisement View of type PAGMediaView, where PAGMediaView may be a picture or a video View

View getAdLogoView()

Returns a Pangle ad logo view

The description of PAGImageItem

PAGImageItem

description

int getHeight()

Returns the height of the ad image of type int

int getWidth()

Returns the width of the ad image of type int

String getImageUrl()

Returns an ad image Url of type String

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.