Адаптивный баннер

Виды адаптивных баннеров

В Yandex Mobile Ads SDK есть три вида адаптивных баннеров:

Баннер	Описание	Когда использовать
Sticky	Баннер-липучка, который примыкает к краю экрана и появляется поверх других элементов. Устойчивый к прокрутке.	Когда баннер должен «приклеиться» и находиться поверх контента даже при прокрутке.
Inline	Баннер, который встраивается как элемент UI — в списки, контент и т. д.	Когда баннер должен быть частью контента: в ленте новостей, между постами, как элемент списка.
Fixed	Используется для закрепленных баннеров или когда пространство определено по высоте.	Когда нужно простое статичное размещение баннера — например, под тулбаром или снизу.

Все виды автоматически обновляют креатив каждые 60 секунд.

Программно виды отличаются лишь тем, как задается их размер. Примеры:

Sticky-баннер

Inline-баннер

Fixed-баннер

BannerAdSize.stickySize(context: Context, widthDp: Int)

BannerAdSize.inlineSize(widthDp: Int, heightDp: Int)

BannerAdSize.fixedSize(widthDp: Int)

Примечание

Пример работы всех типов форматов есть в демопроекте.

Описание сущностей:

Сущность

Описание

BannerAdSize

Высота баннера должна:

не превышать 15% от высоты экрана;
составлять не менее 50 dp.

Все размеры баннера должны передаваться строго в dp.

adUnitId

Используйте:

development mode — для работы с демоблоками;
production mode — для работы с R-M-XXXXXX-Y (уточните реальный ID в интерфейсе Рекламной сети Яндекса). R-M-XXXXXX-Y — это вид рабочего рекламного ID, по которому будут приходить разные креативы.

Пример создания адаптивного баннера с наличием xml

Kotlin

Java

activity_inline_banner_ad.xml

class InlineBannerAdActivity : AppCompatActivity(), BannerAdEventListener {

    private var bannerAd: BannerAdView? = null
    private var bannerAdSize: BannerAdSize? = null
    private var currentAdUnitId: String? = null
    private lateinit var binding: ActivityInlineBannerAdBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityInlineBannerAdBinding.inflate(layoutInflater)
        setContentView(binding.root)

        binding.btnLoadBanner.setOnClickListener {
            configureBannerAdSize()
            loadBannerAd()
        }
        binding.btnDestroyBanner.setOnClickListener {
            destroyBanner()
        }

        bannerAd = binding.banner
        configureBannerAdSize()
    }

    private fun configureBannerAdSize() {
        bannerAdSize = BannerAdSize.inlineSize(this@InlineBannerAdActivity, 350, 60)
    }

    fun loadBannerAd() {
        bannerAdSize?.let { bannerAdSize ->
            val selectedAdUnitId = "demo-banner-yandex" // Use R-M-XXXXXX-Y or demo-block (look for the description below)
            if (currentAdUnitId != selectedAdUnitId) {
                destroyBanner()
                createBanner(selectedAdUnitId, bannerAdSize)
            }
            val adRequest = AdRequest.Builder().build()
            bannerAd?.loadAd(adRequest)
        }
    }

    private fun createBanner(adUnitId: String, bannerAdSize: BannerAdSize) {
        bannerAd = BannerAdView(this).apply {
            setAdUnitId(adUnitId)
            setAdSize(bannerAdSize)
            setBannerAdEventListener(this@InlineBannerAdActivity)
        }
        val params = createLayoutParams(bannerAdSize)
        binding.root.addView(bannerAd, params)
    }

    private fun createLayoutParams(size: BannerAdSize): ConstraintLayout.LayoutParams {
        return ConstraintLayout.LayoutParams(
            ConstraintLayout.LayoutParams.MATCH_PARENT,
            ConstraintLayout.LayoutParams.WRAP_CONTENT,
        ).apply {
            bottomToBottom = ConstraintLayout.LayoutParams.PARENT_ID
        }
    }

    private fun destroyBanner() {
        bannerAd?.let {
            it.destroy()
            binding.root.removeView(it)
        }
        bannerAd = null
    }

    override fun onDestroy() {
        destroyBanner()
        super.onDestroy()
    }

    override fun onAdClicked() {}
    override fun onAdFailedToLoad(error: AdRequestError) {}
    override fun onAdLoaded() {}
    override fun onImpression(impressionData: ImpressionData?) {}
    override fun onLeftApplication() {}
    override fun onReturnedToApplication() {}
}

public class InlineBannerAdActivity extends AppCompatActivity implements BannerAdEventListener {

    private BannerAdView bannerAd = null;
    private BannerAdSize bannerAdSize = null;
    private String currentAdUnitId = null;
    private ActivityInlineBannerAdBinding binding;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        binding = ActivityInlineBannerAdBinding.inflate(getLayoutInflater());
        setContentView(binding.getRoot());

        binding.btnLoadBanner.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                configureBannerAdSize();
                loadBannerAd();
            }
        });

        binding.btnDestroyBanner.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                destroyBanner();
            }
        });

        bannerAd = binding.banner;
        configureBannerAdSize();
    }

    private void configureBannerAdSize() {
        bannerAdSize = BannerAdSize.inlineSize(this, 350, 60);
    }

    private void loadBannerAd() {
        if (bannerAdSize != null) {
            String selectedAdUnitId = "demo-banner-yandex"; // Use R-M-XXXXXX-Y or demo-block
            if (currentAdUnitId == null || !currentAdUnitId.equals(selectedAdUnitId)) {
                destroyBanner();
                createBanner(selectedAdUnitId, bannerAdSize);
                currentAdUnitId = selectedAdUnitId;
            }
            AdRequest adRequest = new AdRequest.Builder().build();
            if (bannerAd != null) {
                bannerAd.loadAd(adRequest);
            }
        }
    }

    private void createBanner(String adUnitId, BannerAdSize bannerAdSize) {
        bannerAd = new BannerAdView(this);
        bannerAd.setAdUnitId(adUnitId);
        bannerAd.setAdSize(bannerAdSize);
        bannerAd.setBannerAdEventListener(this);

        ConstraintLayout.LayoutParams params = createLayoutParams(bannerAdSize);
        binding.getRoot().addView(bannerAd, params);
    }

    private ConstraintLayout.LayoutParams createLayoutParams(BannerAdSize size) {
        ConstraintLayout.LayoutParams params = new ConstraintLayout.LayoutParams(
                ConstraintLayout.LayoutParams.MATCH_PARENT,
                ConstraintLayout.LayoutParams.WRAP_CONTENT
        );
        params.bottomToBottom = ConstraintLayout.LayoutParams.PARENT_ID;
        return params;
    }

    private void destroyBanner() {
        if (bannerAd != null) {
            bannerAd.destroy();
            binding.getRoot().removeView(bannerAd);
            bannerAd = null;
        }
    }

    @Override
    protected void onDestroy() {
        destroyBanner();
        super.onDestroy();
    }
    @Override
    public void onAdClicked() {}
    @Override
    public void onAdFailedToLoad(@Nullable AdRequestError error) {}
    @Override
    public void onAdLoaded() {}
    @Override
    public void onImpression(@Nullable ImpressionData impressionData) {}
    @Override
    public void onLeftApplication() {}
    @Override
    public void onReturnedToApplication() {}
}

<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/coordinatorLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".adunits.InlineBannerAdActivity">

    <Button
        android:id="@+id/btnLoadBanner"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Load Banner"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

    <Button
        android:id="@+id/btnDestroyBanner"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Destroy Banner"
        app:layout_constraintTop_toBottomOf="@id/btnLoadBanner"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_marginTop="16dp" />

    <com.yandex.mobile.ads.banner.BannerAdView
        android:id="@+id/banner"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Пример создания адаптивного баннера с программным созданием Activity

Kotlin

Java

class InlineBannerAdActivity : AppCompatActivity(), BannerAdEventListener {

    private lateinit var bannerAd: BannerAdView

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        val rootLayout = ConstraintLayout(this).apply {
            layoutParams = LayoutParams(MATCH_PARENT, MATCH_PARENT)
        }

        val loadButton = Button(this).apply {
            text = "Load Banner сюда"
            id = View.generateViewId()
        }

        val destroyButton = Button(this).apply {
            text = "Destroy Banner"
            id = View.generateViewId()
        }

        rootLayout.addView(loadButton, LayoutParams(WRAP_CONTENT, WRAP_CONTENT).apply {
            topToTop = LayoutParams.PARENT_ID
            bottomToBottom = LayoutParams.PARENT_ID
            startToStart = LayoutParams.PARENT_ID
            endToEnd = LayoutParams.PARENT_ID
        })

        rootLayout.addView(destroyButton, LayoutParams(WRAP_CONTENT, WRAP_CONTENT).apply {
            topToBottom = loadButton.id
            startToStart = LayoutParams.PARENT_ID
            endToEnd = LayoutParams.PARENT_ID
            topMargin = 24
        })

        setContentView(rootLayout)

        val bannerSize = BannerAdSize.inlineSize(this, 320, 50)

        loadButton.setOnClickListener {
            destroyBannerIfNeeded(rootLayout)

            bannerAd = BannerAdView(this).apply {
                id = View.generateViewId()
                setAdUnitId("demo-banner-yandex") // Use R-M-XXXXXX-Y or demo-block (look for the description below)
                setAdSize(bannerSize)
                setBannerAdEventListener(this@InlineBannerAdActivity)
            }

            rootLayout.addView(
                bannerAd,
                LayoutParams(MATCH_PARENT, WRAP_CONTENT).apply {
                    bottomToBottom = LayoutParams.PARENT_ID
                    bottomMargin = 32
                }
            )

            bannerAd.loadAd(AdRequest.Builder().build())
        }

        destroyButton.setOnClickListener {
            destroyBannerIfNeeded(rootLayout)
        }
    }

    private fun destroyBannerIfNeeded(container: ConstraintLayout) {
        if (::bannerAd.isInitialized) {
            bannerAd.destroy()
            container.removeView(bannerAd)
        }
    }

    override fun onDestroy() {
        if (::bannerAd.isInitialized) {
            bannerAd.destroy()
            (bannerAd.parent as? ConstraintLayout)?.removeView(bannerAd)
        }
        super.onDestroy()
    }
    override fun onAdClicked() {}
    override fun onAdFailedToLoad(error: AdRequestError) {}
    override fun onAdLoaded() {}
    override fun onImpression(impressionData: ImpressionData?) {}
    override fun onLeftApplication() {}
    override fun onReturnedToApplication() {}
}

public class InlineBannerAdActivity extends AppCompatActivity implements BannerAdEventListener {

    private BannerAdView bannerAd;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        final ConstraintLayout rootLayout = new ConstraintLayout(this);
        rootLayout.setLayoutParams(new LayoutParams(
                LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));

        final Button loadButton = new Button(this);
        loadButton.setText("Load Banner сюда");
        loadButton.setId(View.generateViewId());

        final Button destroyButton = new Button(this);
        destroyButton.setText("Destroy Banner");
        destroyButton.setId(View.generateViewId());

        LayoutParams loadBtnParams = new LayoutParams(
                LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
        loadBtnParams.topToTop = LayoutParams.PARENT_ID;
        loadBtnParams.bottomToBottom = LayoutParams.PARENT_ID;
        loadBtnParams.startToStart = LayoutParams.PARENT_ID;
        loadBtnParams.endToEnd = LayoutParams.PARENT_ID;
        rootLayout.addView(loadButton, loadBtnParams);

        LayoutParams destroyBtnParams = new LayoutParams(
                LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
        destroyBtnParams.topToBottom = loadButton.getId();
        destroyBtnParams.startToStart = LayoutParams.PARENT_ID;
        destroyBtnParams.endToEnd = LayoutParams.PARENT_ID;
        destroyBtnParams.topMargin = 24;
        rootLayout.addView(destroyButton, destroyBtnParams);

        setContentView(rootLayout);

        final BannerAdSize bannerSize = BannerAdSize.inlineSize(this, 320, 50);

        loadButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                destroyBannerIfNeeded(rootLayout);

                bannerAd = new BannerAdView(InlineBannerAdActivity.this);
                bannerAd.setId(View.generateViewId());
                bannerAd.setAdUnitId("demo-banner-yandex"); // Use R-M-XXXXXX-Y or demo-block
                bannerAd.setAdSize(bannerSize);
                bannerAd.setBannerAdEventListener(InlineBannerAdActivity.this);

                LayoutParams bannerParams = new LayoutParams(
                        LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT);
                bannerParams.bottomToBottom = LayoutParams.PARENT_ID;
                bannerParams.bottomMargin = 32;
                rootLayout.addView(bannerAd, bannerParams);

                bannerAd.loadAd(new AdRequest.Builder().build());
            }
        });

        destroyButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                destroyBannerIfNeeded(rootLayout);
            }
        });
    }

    private void destroyBannerIfNeeded(ConstraintLayout container) {
        if (bannerAd != null) {
            bannerAd.destroy();
            container.removeView(bannerAd);
            bannerAd = null;
        }
    }

    @Override
    protected void onDestroy() {
        if (bannerAd != null) {
            bannerAd.destroy();
            View parent = (View) bannerAd.getParent();
            if (parent instanceof ConstraintLayout) {
                ((ConstraintLayout) parent).removeView(bannerAd);
            }
            bannerAd = null;
        }
        super.onDestroy();
    }
    @Override
    public void onAdClicked() {}
    @Override
    public void onAdFailedToLoad(@Nullable AdRequestError error) {}
    @Override
    public void onAdLoaded() {}
    @Override
    public void onImpression(@Nullable ImpressionData impressionData) {}
    @Override
    public void onLeftApplication() {}
    @Override
    public void onReturnedToApplication() {}
}

Проверка интеграции

Соберите и запустите проект. Успешную интеграцию SDK можно проверить в Logcat по ключевому слову YandexAds:

[Integration] Ad type banner was integrated successfully

Была ли статья полезна?

Межстраничная реклама

Безопасность и конфиденциальность