Native AdsIntroduction Native ads refer to a form of advertising that allows for customization of the ad's appearance, seamlessly blending it with the app's design to provide a natural and engaging experience for users. With native ads, you have the creative freedom to design the ad's layout, look and feel, and placement within your app, thereby enabling you to achieve a cohesive and integrated advertising experience. It's important to note that Pangle currently supports four different native ad formats outside of the Chinese Mainland, including a large image with a 1.91:1 ratio, 1280*720 video, square image, and square video. As a developer, it's essential to ensure that the native ad format and size comply with Pangle's specific requirements to ensure optimal ad performance and user experience.PreconditionCreate an app and native ad placement on the Pangle platformCreate 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]ReferenceHow do I create an ad placement?Native Ads ImplementationNative 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:Create PAGNativeRequest objectLoad a Native ad and register PAGNativeAdLoadListener callbackDesign your native ad layout.Register PAGNativeAdInteractionListener callbackDisplay the ad.Load an AdLoading an ad is accomplished using the load() method in 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 objectPAGNativeRequest is an Ad Loading Manager. It is recommended to be the member variable of the Activity.PAGNativeRequest request = new PAGNativeRequest();Load a Native ad and register PAGNativeAdLoadListener callbackUse the method of PAGNativeAd to load the ad, and register the PAGNativeAdLoadListener callback.PAGNativeRequest request = new PAGNativeRequest();\nPAGNativeAd.loadAd(\"YOUR_AD_PLACEMENT_ID\", request, new PAGNativeAdLoadListener() {\n @Override\n public void onError(int code, String message) {\n \n }\n\n @Override\n public void onAdLoaded(PAGNativeAd pagNativeAd) {\n \n }\n});The description of PAGNativeAdLoadListener callbackPAGNativeAdLoadListenerdescriptiononErrorThis 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 sectiononAdLoadedThis method is executed when an ad material is loaded successfully.Design your native ad layoutBefore loading a native ad, you should have finished the design of a native ad. Assume you have finished the design of the native layout. Example as below：\n \n \n \n \n \n \n \n \n \n \n \n \n \n // Other assets such as ad source, ad logo, etc follow.\n ...\n \nThen inflate the layout in the app. In this example, we're inflating an XML layout that contains views for displaying a native ad.private void findADView(Context mContext){\n\n View nativeAdView = LayoutInflater.from(mContext).inflate(R.layout.native_ad, null);\n \n TextView mTitle = (TextView) nativeAdView.findViewById(R.id.ad_title);\n \n TextView mDescription = (TextView) nativeAdView.findViewById(R.id.ad_desc);\n \n ImageView mIcon = (ImageView) nativeAdView.findViewById(R.id.ad_icon);\n \n ImageView mDislike = (ImageView) nativeAdView.findViewById(R.id.ad_dislike);\n \n Button mCreativeButton = (Button) nativeAdView.findViewById(R.id.creative_btn);\n \n RelativeLayout mAdLogoView = (RelativeLayout) nativeAdView.findViewById(R.id.ad_logo);\n \n FrameLayout mImageOrVideoView = (FrameLayout) nativeAdView.findViewById(R.id.ad_video);\n \n}Populate the Asset Views//title\nmTitle.setText(adData.getTitle()); \n//description\nmDescription.setText(adData.getDescription()); \n//icon\nPAGImageItem icon = adData.getIcon();\nif (icon != null && icon.getImageUrl() != null) {\n Glide.with(mContext).load(icon.getImageUrl()).into(adViewHolder.mIcon);\n}\n//set btn text\nmCreativeButton.setText(TextUtils.isEmpty(adData.getButtonText()) ? mContext.getString(R.string.tt_native_banner_download) : adData.getButtonText());\n\n//set pangle logo\nImageView imageView = (ImageView) adData.getAdLogoView();\nRelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT, RelativeLayout.LayoutParams.MATCH_PARENT);\nmAdLogoView.addView(logo, lp);Register Ad Event CallbackAd event callbacks need to be registered before displaying an ad. Each method in the event callback corresponds to an event in the ad lifecycle.//Register clickable views that could be clicked by the user\nList creativeViewList = new ArrayList<>();\ncreativeViewList.add(mCreativeButton);\ncreativeViewList.add(mIcon);\ncreativeViewList.add(mTitle);\n\n//The views that can trigger the creative action (like download app)\nList creativeViewList = new ArrayList<>();\ncreativeViewList.add(mCreativeButton);\n\n//notice! This involves advertising billing and must be called correctly. convertView must use ViewGroup.\nad.registerViewForInteraction((ViewGroup) nativeAdView, clickViewList, creativeViewList, mDislike, new PAGNativeAdInteractionListener() {\n @Override\n public void onAdShowed() {\n \n }\n\n @Override\n public void onAdClicked() {\n \n }\n\n @Override\n public void onAdDismissed() {\n \n }\n});The description of PAGNativeAdInteractionListener callbackPAGNativeAdInteractionListenerdescriptiononAdShowedThis method is invoked when the ad is displayed, covering the device's screen.onAdClickedThis method is invoked when the ad is clicked by the user.onAdDismissedThis method is invoked when the ad disappears.The description of PAGNativeAdPAGNativeAddescriptionPAGNativeAdData getNativeAdData()Calling getNativeAdData() will return a PAGNativeAdData ad data objectvoid registerViewForInteraction(ViewGroup container, List clickViews, List 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 eventsParameter Descriptioncontainer: The root view of the ad componentclickViews: Ad component View collection that needs to register for ordinary click eventscreativeViews: Ad component View collection that needs to register creative click eventsdislikeView: 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 eventsThe description of PAGNativeAdDataPAGNativeAdDatadescriptionPAGImageItem getIcon()Returns an advertising Icon object PAGImageItemString getTitle()Returns an ad title of type StringString getDescription()Returns an ad description of type StringString getButtonText()Returns the content of the advertisement button of type StringPAGMediaView getMediaView()Returns an advertisement View of type PAGMediaView, where PAGMediaView may be a picture or a video ViewView getAdLogoView()Returns a Pangle ad logo viewThe description of PAGImageItemPAGImageItemdescriptionint getHeight()Returns the height of the ad image of type intint getWidth()Returns the width of the ad image of type intString getImageUrl()Returns an ad image Url of type StringTest with test adsUpon completing the integration, it is essential to ensure that you test your app functionality prior to launching it to end users. It is highly recommended that you employ test ads rather than live ads.To facilitate the testing process, Pangle offers a \"test mode\" that is specifically designed to generate test ads for every request. You can seamlessly implement this mode in your app during the coding, testing, and debugging phase, and gain confidence that your app's ad functionality is fully operational before deploying it to end users.Refer to the How to add a test device? to add your device to the test devices on the Pangle platform.