1. خانه
  2. پیاده‌سازی تبلیغات ویدئویی هم‌نما (Native Video) در پروژه اندروید

پیاده‌سازی تبلیغات ویدئویی هم‌نما (Native Video) در پروژه اندروید

گام 1: تنظیمات اولیه پروژه

ابتدا تنظیمات اولیه پروژه را از لینک زیر مطالعه کرده و مراحل را انجام دهید:

 

گام 2: ساختن Layout نمایش تبلیغ هم‌نما

در تبلیغات هم‌نما، شما قادر هستید ویژگی‌های ظاهری هر یک از اجزای تبلیغ (اندازه، محل قرارگیری، رنگ فونت و…) را بصورتی که هماهنگ با محتوای اپلیکیشن شما باشد تعیین کنید. لذا باید Layout هم‌نما اپلیکیشن خود را که مدنظرتان است ایجاد کرده و به SDK تپسل بدهید.

تبلیغات تپسل به دو دسته تبلیغات نصب اپلیکیشن و تبلیغات محتوایی تقسیم می‌شود. لذا SDK تپسل نیز دو قالب layout از ورودی دریافت می‌کند. از آنجا که تمامی تبلیغ‌ها در قالب محتوایی قابل نمایش هستند، این قالب اجباری بوده و ایجاد قالب نصب اپلیکیشن، اختیاری می‌باشد، هرچند ارائه دو شکل مختلف قالب تجربه بهتری برای کاربران فراهم میکند.

هرقالب محتوای که برای تبلیغات هم‌نما ویدئویی ارائه می‌شود میبایست دارای حداقل سه آیتم عنوان تبلیغ، نشانگر تبلیغ بودن و ویدئو را دارا باشد. SDK تپسل جهت نمایش ویدئو در تبلیغات هم‌نما، از پلیر مخصوص خود استفاده می‌کند که برای نسخه‌های مختلف اندروید و استفاده در صفحات قابل اسکرول بهینه‌سازی شده است. لذا برای نمایش ویدئو کافیست یک View از کلاس VideoContainer در فایل xml خود اضافه کنید که در اصل در بر گیرنده پلیر ویدئو خواهد بود. شناسایی المان‌های در نظر گرفته شده در layout توسط SDK به کمک شناسه (Id)  های رزرو شده در SDK تپسل انجام می‌شود که در ادامه قابل مشاهده هستند.

شکل کلی قالب محتوایی تبلیغات هم‌نما ویدئویی بصورت زیر می‌باشد.

<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>

 

در قالب‌های نصب اپلیکیشن علاوه بر موارد فوق، باید View مربوط به به رای‌های اپلیکیشن در مارکت وجود داشته باشد. جهت نمایش این ویژگی می‌توانید از کلاس RateStarView که در SDK تپسل موجود است استفاده کنید. لذا شکل کلی قالب نصب اپلیکیشن تبلیغات هم‌نما ویدئویی بصورت زیر می‌باشد.

<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>

 

نمونه قالب‌های طراحی شده پیش‌فرض برای نمایش تبلیغات هم‌نما در فایل‌های tapsell_content_video_ad_template و tapsell_app_installation_video_ad_template قابل مشاهده هستند.

گام 3: نمایش تبلیغ هم‌نما

پس از اینکه قالب (layout) نمایش تبلیغ را ایجاد نمودید، می‌توانید با کمک کلاس TapsellNativeVideoAdLoader یک تبلیغ هم‌نما دریافت و آن را نمایش دهید. برای سهولت در پیاده‌سازی، از کلاس Builder قرارگرفته در TapsellNativeVideoAdLoader مطابق کد زیر استفاده کنید.

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)
        .setAutoStartVideoOnScreenEnabled(false)
        .setFullscreenBtnEnabled(true)
        .setMuteVideoBtnEnabled(false)
        .setMuteVideo(false)
        .setIconSet(new TapsellNativeVideoIconSet.Builder()
                .setFullscreenIcon(R.drawable.fullscreenicon)
                .setPlayIcon(R.drawable.playicon)
                .create())
        .loadAd(NativeVideoActivity.this, G.nativeVideoZoneId, new TapsellNativeVideoAdLoadListener() {

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

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

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

            @Override
            public void onRequestFilled(TapsellNativeVideoAd tapsellNativeVideoAd) {
                tapsellNativeVideoAd.setCompletionListener(new TapsellNativeVideoAdCompletionListener() {
                    @Override
                    public void onAdShowFinished(String adId) {
                        Log.e("Tapsell","onAdShowFinished: "+adId);
                    }
                });
                tapsellNativeVideoAd.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        Log.e("Tapsell","Native video clicked!");
                    }
                });
                tapsellNativeVideoAd.addToParentView((LinearLayout) findViewById(R.id.adParent));
            }

        });

ورودی zoneId مشخص کننده تبلیغ‌گاه (zone) مربوط به پخش تبلیغ است و ورودی adParent استفاده شده ViewGroup ‌ای است که قرار است تبلیغ در آن نمایش داده شود و از قبل inflate شده است.

 

 

لطفا نظرات خود درباره محتوی مستندات و مشکلاتی که در پیاده‌سازی SDK تپسل با آنها مواجه شدید را به ما اطلاع دهید.

 

 

مرحله بعد: پیاده‌سازی تبلیغات بنری هم‌نما (Native Banner) در پروژه اندروید
مرحله قبل: پیاده‌سازی تبلیغات پیش‌نمایشی (Pre-roll) در پروژه اندروید

آیا این این آموزش مفید بود؟