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

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

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

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

 

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

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

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

هرقالب محتوای که برای تبلیغات هم‌نما بنری ارائه می‌شود میبایست دارای حداقل دو آیتم عنوان تبلیغ و نشانگر تبلیغ بودن را دارا باشد. برای نمایش بنر باید از یک ImageView استفاده کنید. جهت تنظیم نسبت طول به عرض (Aspect Ratio)  از کلاس RatioImageView در فایل xml خود استفاده کنید و با تنظیم پارامتر‌های aspect_ratio و aspect_style نسبت طول به عرض آن را تعیین کنید. لازم به ذکر است که بنرها در تبلیغات هم‌نما بنری در نسبت‌های 16:9 و 9:16 ارائه می‌شوند. شناسایی المان‌های در نظر گرفته شده در 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.RatioImageView
        android:id="@id/tapsell_nativead_banner"
        app:aspect_ratio="0.5625"
        app:aspect_style="fixed_width"
        ... />

    <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.RatioImageView
        android:id="@id/tapsell_nativead_banner"
        app:aspect_ratio="0.5625"
        app:aspect_style="fixed_width"
        ... />

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

</RelativeLayout>

 

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

گام ۳: ساخت View

پس از اینکه قالب (layout) نمایش تبلیغ را ایجاد نمودید، می‌توانید با کمک زیر قالب رو inflate کنید.

adContainer = findViewById(R.id.adContainer);
nativeBannerViewManager = new TapsellNativeBannerManager.Builder()
    .setParentView(adContainer)
    .setContentViewTemplate(R.layout.tapsell_content_banner_ad_template)
    .inflateTemplate(this);

adContainer استفاده شده ViewGroup ‌ای است که قرار است تبلیغ در آن نمایش داده شود.
 

گام ۴: درخواست تبلیغ

با کمک کد زیر میتونید یک تبلیغ درخواست کنید

TapsellNativeBannerManager.getAd(
    context, ZONE_ID, new AdRequestCallback() {
        @Override
        public void onResponse(String[] adId) {
           //show ad
        }

        @Override
        public void onFailed(String message) {
           //skip show ad
        }
 });

ورودی zoneId مشخص کننده تبلیغ‌گاه (zone) مربوط به پخش تبلیغ است.

 

گام ۵: نمایش تبلیغ

runOnUiThread(new Runnable() {
    @Override
    public void run() {
        TapsellNativeBannerManager.bindAd(
            context,
            nativeBannerViewManager,
            ZONE_ID,
            adId[0]);
        }
});

adId همان ریسپانسی هست که زمان درخواست تبلیغ sdk به شما برمیگرداند.
nativeBannerViewManager کلاسی هست که زمان inflate قالب ساخته میشود.

نمونه پیاده‌سازی

یک نمونه پیاده‌سازی SDK تپسل در Android Studio و Eclipse در repository های زیر آمده است.

 

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

 

 

مرحله بعد: پیاده‌سازی تبلیغات بنری استاندارد در پروژه اندروید
مرحله قبل: پیاده سازی تبلیغات ویدئویی هم‌نما در پروژه اندروید

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