1. Home
  2. Integrating Native Video Ads in your project

Integrating Native Video Ads in your project

Step 1: Get Tapsell Key

First you should log in Tapsell dashboard, define a new app and get a Tapsell Key and Zone Id for the app.

 

Step 2: Import and Initialize Tapsell

Import the Tapsell library in your Application class (or launcher Activity):

import ir.tapsell.sdk.Tapsell;

Then in your onCreate method, initialize Tapsell like below:

Tapsell.initialize(context, appKey);

 

Step 3: Creating a Layout for Native Video Ads

With native ads, you can edit visual features of ad elements (size, position, color, etc.) to make it look like the content of your application. Therefore, you should create a layout for native ads and pass it to Tapsell SDK.

Tapsell Native ads contain two main type of ads: Content ads and App Installation ads. So two different layouts can be provided to SDK. Since all ads can be shown in content ad layout template, providing a layout for content ads is necessary. However, providing another template for app installation ads results in better user experience.

Any content layout template provided must contain at least 3 elements: Ad Title, Call-To-Action button and Video Container. The SDK uses a custom video player for showing videos which is optimized for different android versions and works well with scrollable layouts. So you should use VideoContainer class in your xml layout to specify the position of video player view. The SDK uses ids to find elements in the provided view which are shown below.

The overall form of native video ad template is given below.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@id/tapsell_nativead_logo"
        ... />

    <TextView
        android:id="@id/tapsell_nativead_title"
        ... />

    <TextView
        android:id="@id/tapsell_nativead_sponsored"
        ... />

    <TextView
        android:id="@id/tapsell_nativead_description"
        ... />

    <ir.tapsell.sdk.nativeads.views.videoplayer.VideoContainer
        android:id="@id/tapsell_nativead_video"
        ... />

    <Button
        android:id="@id/tapsell_nativead_cta"
        ... />

</RelativeLayout>

 

In app-installation templates, a view must be used for displaying rating of the promoted app. In order to show the rating, you can use RateStarView class which is embedded in SDK. So the general form of app-installation video template consists of the following elements:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@id/tapsell_nativead_logo"
        ... />

    <TextView
        android:id="@id/tapsell_nativead_title"
        ... />

    <TextView
        android:id="@id/tapsell_nativead_sponsored"
        ... />

    <TextView
        android:id="@id/tapsell_nativead_description"
        ... />

    <ir.tapsell.sdk.nativeads.views.RateStarView
        android:id="@id/tapsell_nativead_rating"
        ... />

    <ir.tapsell.sdk.nativeads.views.videoplayer.VideoContainer
        android:id="@id/tapsell_nativead_video"
        ... />

    <Button
        android:id="@id/tapsell_nativead_cta"
        ... />

</RelativeLayout>

 

Samples for content and app-installation templates are included in Tapsell SDK as layout xml resources with following identifiers: tapsell_content_video_ad_template and tapsell_app_installation_video_ad_template .

 

Step 4: Showing Native Video Ad

After creating the layouts, you can use TapsellNativeVideoAdLoader to fetch and display a native ad. For easier implementation, use Builder class which is included in TapsellNativeVideoAdLoader using the following piece of code:

LinearLayout adParent = (LinearLayout) findViewById(R.id.adParent);
new TapsellNativeVideoAdLoader.Builder()
    .setContentViewTemplate(R.layout.tapsell_content_video_ad_template)
    .setAppInstallationViewTemplate(R.layout.tapsell_app_installation_video_ad_template)
    .loadAd(Activity.this, zoneId, adParent, new TapsellNativeVideoAdLoadListener() {

        @Override
        public void onNoNetwork() {
            Log.d("Tapsell","No Network Available");
        }

        @Override
        public void onNoAdAvailable() {
            Log.d("Tapsell","No Native Video Ad Available");
        }

        @Override
        public void onError(String error) {
            Log.d("Tapsell","Error: "+error);
        }

        @Override
        public void onRequestFilled(View adView, ViewGroup parentView) {
            parentView.addView(adView);
        }
    });

 

ZoneId parameter is identifier of the zone for which the ad will be fetched and shown. The 3rd parameter, adParent is the ViewGroup in which the adView will be inflated.

 

Please let us know whether this document was helpful and what complications you faced while using Tapsell Android SDK.

 

 

Prev: Integrating Pre-Roll video ads

Next: Integrating Native Banner Ads in your project

Was this article helpful?