Overview
While using the Native Ad API, you will receive a group of ad properties such as a title, an image, and you will have to use them to construct a custom UIView where the ad is shown. The Native Ad, an innovated type of ad, allows you to build a customized experience for the ads you show in your app.
Prerequisites
Please make sure you’ve imported Vpon SDK to your Xcode project. If not, please refer to our Integration Guide to finish your setting.
Start To Implement Native Ad
Please follow the steps below to implement Vpon Native Ad to your application:
- Import
com.vpadn.ads.*
- Declare a
VpadnNativeAd
instance - Set up VpadnNativeAd instance and indicate a License Key
- Create layout for Native Ad
- Set up Native Ad with ad metadata
- Register ad view with VpadnNativeAd instance
- Implement VpadnAdListener
We strongly recommend that you can finish all the steps in the Activity of the application.
Import Vpon SDK And Declare A VpadnNativeAd Instance
import com.vpadn.ads.*;
public class MainActivity extends Activity implements VpadnAdListener {
// Declare VpadnNativeAd instance
private VpadnNativeAd nativeAd;
// Please fill in with your License Key
private String licenseKey = "License Key" ;
private LinearLayout native_Ad_Container;
private LinearLayout nativeAdView;
...
}
Set Up VpadnNativeAd Instance And Indicate A License Key
Set up VpadnNativeAd instance and indicate a license key to request Native Ad. Please follow Create Layout for Native Ad to create your own layout to present Native Ad.
public class MainActivity extends Activity implements VpadnAdListener {
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// Set up Native Ad layout
loadNativeUI();
nativeAd = new VpadnNativeAd(this, licenseKey, "TW");
nativeAd.setAdListener(this);
VpadnAdRequest adRequest = new VpadnAdRequest();
nativeAd.loadAd(adRequest);
}
}
Create Layout for Native Ad
You must create layout for Native Ads before ad request. Please check our Native Ad Spec to create your own layout.
Here is an example to create Native Ad layout in layout.xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id = "@+id/native_ad_unit"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/white"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:paddingTop="10dp"
android:paddingBottom="10dp">
<ImageView
android:id="@+id/nativeAdIcon"
android:layout_width="50dp"
android:layout_height="50dp"
android:contentDescription="Ad icon"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingLeft="5dp" >
<TextView
android:id="@+id/nativeAdTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:lines="1"
android:textColor="@android:color/black"
android:textSize="18sp" />
<TextView
android:id="@+id/nativeAdBody"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="@android:color/black"
android:textSize="15sp" />
</LinearLayout>
</LinearLayout>
<!--Vpon Inc. original method, feel free to use VpadnMediaView tag below-->
<!--<ImageView-->
<!--android:id="@+id/nativeAdImage"-->
<!--android:layout_width="match_parent"-->
<!--android:layout_height="wrap_content"-->
<!--android:gravity="center"-->
<!--android:contentDescription="Ad image" />-->
<!--Vpon Inc. New layout-->
<com.vpadn.ads.VpadnMediaView
android:id="@+id/native_ad_media"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dp"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="3"
android:paddingRight="5dp"
android:orientation="vertical" >
<RatingBar
android:id="@+id/nativeAdStarRating"
style="?android:attr/ratingBarStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:isIndicator="true"
android:stepSize="0.1" />
<TextView
android:id="@+id/nativeAdSocialContext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="@android:color/black"
android:textSize="15sp" />
</LinearLayout>
<Button
android:id="@+id/nativeAdCallToAction"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:background="#ff8bc615"
android:gravity="center"
android:textSize="16sp" />
</LinearLayout>
</LinearLayout>
Set Up Native Ad
Implement VpadnAdListener and set up Native Ad with inflateAd()
after ad receiving.
The sample below shows the CallBack function of clicking CallToAction button, image and other components. Please refer to Register Ad View to define which components are clickable.
public class MainActivity extends Activity implements VpadnAdListener {
...
@Override
public void onVpadnReceiveAd(VpadnAd ad) {
if (nativeAd == null || nativeAd != ad) {
Log.e("Native", "Race condition, load() called again before last ad was displayed");
return;
}
if (ad == nativeAd) {
nativeAd.unregisterView();
inflateAd(nativeAd, nativeAdView, this);
nativeAd.setOnTouchListener(new View.OnTouchListener() {
@Override
public boolean onTouch(View view, MotionEvent event) {
if (event.getAction() == MotionEvent.ACTION_DOWN) {
switch (view.getId()) {
case R.id.nativeAdCallToAction:
Log.e(LT, "nativeAdCallToAction");
Toast.makeText(getBaseContext(), "nativeAdCallToAction Clicked", Toast.LENGTH_SHORT).show();
break;
case R.id.nativeAdImage:
Log.e(LT, "nativeAdImage");
Toast.makeText(getBaseContext(), "nativeAdCallToAction Clicked", Toast.LENGTH_SHORT).show();
break;
default:
Log.d(LT, "Other ad component clicked");
Toast.makeText(getBaseContext(), "Other ad component Clicked", Toast.LENGTH_SHORT).show();
}
}
return false;
}
});
native_Ad_Container.setVisibility(View.VISIBLE);
}
}
}
Set Up Native Ad With Ad Metadata
Please refer to the sample below to implement inflateAd()
to set up Native Ad.
protected static void inflateAd(VpadnNativeAd nativeAd, View nativeAdView, Activity mContext) {
//Create native UI using the ad metadata.
ImageView nativeAdIcon = (ImageView) nativeAdView.findViewById(R.id.nativeAdIcon);
TextView nativeAdTitle = (TextView) nativeAdView.findViewById(R.id.nativeAdTitle);
TextView nativeAdBody = (TextView) nativeAdView.findViewById(R.id.nativeAdBody);
// Original method to use ImageView
// ImageView nativeAdImage = (ImageView) nativeAdView.findViewById(R.id.nativeAdImage);
// Or you can use VpadnMediaView as below
VpadnMediaView nativeAdMedia = (VpadnMediaView) nativeAdView.findViewById(R.id.native_ad_media);
RatingBar nativeAdStarRating = (RatingBar) nativeAdView.findViewById(R.id.nativeAdStarRating);
TextView nativeAdSocialContext = (TextView) nativeAdView.findViewById(R.id.nativeAdSocialContext);
Button nativeAdCallToAction = (Button) nativeAdView.findViewById(R.id.nativeAdCallToAction);
// Setting the Text
nativeAdSocialContext.setText(nativeAd.getAdSocialContext());
nativeAdCallToAction.setText(nativeAd.getAdCallToAction());
nativeAdTitle.setText(nativeAd.getAdTitle());
nativeAdBody.setText(nativeAd.getAdBody());
VpadnNativeAd.Rating rating = nativeAd.getAdStarRating();
if (rating != null) {
nativeAdStarRating.setNumStars((int) rating.getScale());
nativeAdStarRating.setRating((float) rating.getValue());
} else {
nativeAdStarRating.setVisibility(View.GONE);
}
// Downloading and setting the ad icon.
VpadnNativeAd.Image adIcon = nativeAd.getAdIcon();
VpadnNativeAd.downloadAndDisplayImage(adIcon, nativeAdIcon);
// Downloading and setting the cover image.
VpadnNativeAd.Image adCoverImage = nativeAd.getAdCoverImage();
int bannerWidth = adCoverImage.getWidth();
int bannerHeight = adCoverImage.getHeight();
WindowManager wm = (WindowManager) mContext.getSystemService(Context.WINDOW_SERVICE);
Display display = wm.getDefaultDisplay();
DisplayMetrics metrics = new DisplayMetrics();
display.getMetrics(metrics);
int screenWidth = metrics.widthPixels;
// If you use nativeAdImage
// nativeAdImage.setLayoutParams(new LinearLayout.LayoutParams(screenWidth, (int) (((double) screenWidth / (double) bannerWidth) * bannerHeight)));
// VpadnNativeAd.downloadAndDisplayImage(adCoverImage, nativeAdImage);
// If you use VpadnMediaView
nativeAdMedia.setLayoutParams(new LinearLayout.LayoutParams(screenWidth, (int) (((double) screenWidth / (double) bannerWidth) * bannerHeight)));
nativeAdMedia.setNativedAd(nativeAd);
...
}
Ad View Registration
Vpon SDK will log the impression and click. You must register ad view with VpadnNativeAd instance.
- To make entire Native Ad layout clickable, please use
registerViewForInteraction(View view)
- To make part of Native Ad layout clickable, please use
registerViewForInteraction(View view, List<View> clickableViews)
Please refer to the smaple below:
public class MainActivity extends Activity implements VpadnAdListener {
...
protected static void inflateAd(VpadnNativeAd nativeAd, View nativeAdView, Activity mContext) {
...
// Make the whole nativeAdContainer clickable
// nativeAd.registerViewForInteraction(nativeAdView);
// Specify clickable areas of the natvieAdContainer
// If you use ImageView
// nativeAd.registerViewForInteraction(nativeAdView, Arrays.asList(nativeAdCallToAction, nativeAdImage));
// If you use VpadnMediaView
nativeAd.registerViewForInteraction(nativeAdView, Arrays.asList(nativeAdCallToAction, nativeAdMedia));
}
}
Clear Native Ad
If you want to re-use the view to show different ads over time, call unregisterView()
before registering the same view with a different VpadnNativeAd instance.
public class MainActivity extends Activity implements VpadnAdListener {
...
@Override
public void onVpadnReceiveAd(VpadnAd ad) {
...
if (ad == nativeAd) {
nativeAd.unregisterView();
...
}
}
Request for Test Ad
Please add the code snippet to your application and fill in with your test device’s UUID as below to request for test ads.
public class MainActivity extends Activity implements VpadnAdListener {
...
VpadnAdRequest adRequest = new VpadnAdRequest();
HashSet<String> testDeviceImeiSet = new HashSet<String>();
// Add Android device advertising id
testDeviceImeiSet.add("your device advertising id");
adRequest.setTestDevices(testDeviceImeiSet);
vponBanner.loadAd(adRequest);
...
}
Advertising ID
Here are some tips for you to get your advertising id:
- Search “advertisingId” from the log
- Check the advertising id in the Setting of your device
Implement VpadnAdListener
public class MainActivity extends Activity implements VpadnAdListener {
@Override
public void onVpadnReceiveAd(VpadnAd ad){
Log.d("Banner", "VpadnReceiveAd");
}
@Override
public void onVpadnFailedToReceiveAd(VpadnAd ad, VpadnAdRequest.VpadnErrorCode errCode){
Log.d("Banner", "fail to receive ad (" + errCode + ")");
}
@Override
public void onVpadnPresentScreen(VpadnAd ad){
Log.d("Banner", "VpadnPresentScreen");
}
@Override
public void onVpadnDismissScreen(VpadnAd ad){
Log.d("Banner", "vpadnDismissScreen");
}
@Override
public void onVpadnLeaveApplication(VpadnAd ad){
Log.d("Banner", "VpadnLeaveApplication");
}
}
Native Ad Manager
The Native Ad Manager
is supported by Vpon SDK. Use the Native Ads Manager when your user experience involves displaying multiple ads within a short amount of time, such as a vertical feed or horizontal scroll. An app can also use Native Ads Manager to automatically refresh and deliver ads. Please follow the Sample Code to realize how to use the Native Ads Manager.
Native Ad Spec
Please check to table below to find the Native Ad component provided by Vpon.
- Components in red are required to show in Native Ad layout.
- Show at least one image (CoverImage or Icon) in Native Ad layout.
Properties | Description |
---|---|
AdLabel | Let user know it is ad ( Sponsor, Ad, and so on ). |
Title | Show at least 16 English alphabets. Show ... while it’s out of space. |
CoverImage | 1200 x 627px (enable scaling in proportion, without distortion and clipping) |
Icon | 128 x 128px (enable scaling in proportion, without distortion and clipping) |
CallToAction | Show completely |
BodyText | Show at least 20 English alphabets or unshow it. |
SocialContext | Show completely |
RatingScale | 5 |
Rating Min/Max | 1/5 |
Tips
Sample Code
Please refer to our Sample Code for a complete integration sample.
More Ad Formats
Please refer to the link below to learn more about other ad types:
Mediation
Mediation is a feature that lets you serve ads to your apps from multiple sources. Please refer to the reference below to get the complete description about the Native Ad Mediation setting.