Слайдер рекламных объявлений

Нативная реклама — реклама, внешний вид которой может определяться на стороне приложения. Данная особенность позволяет изменять визуальный стиль объявлений и места их размещения с учетом особенностей дизайна приложения.

Отрисовка рекламы производится нативными средствами платформы, что увеличивает её производительность и качество.

Нативные объявления улучшают впечатления от рекламы, поэтому вы можете показывать больше объявлений, не теряя интерес пользователей. Это позволяет обеспечить максимальный доход от рекламы в долгосрочной перспективе.

Пререквизит

  1. Выполните шаги по интеграции sdk, описанные в Быстром старте.
  2. Заранее проинициализируйте рекламный SDK.
  3. Убедитесь, что используете самую актуальную версию Yandex Mobile Ads SDK, а в случае использовании медиации — наиболее свежую версию единой сборки.

Имплементация

Основные шаги по интеграции нативной рекламы (слайдер):

  • Создать и настроить загрузчик рекламы SliderAdLoader.
  • Зарегистрировать слушатель событий загрузчика объявлений SliderAdLoadListener.
  • Загрузить рекламу.
  • Отобразить загруженное объявление.

Особенности подключения нативной рекламы

  1. Все вызовы методов Yandex Mobile Ads SDK необходимо выполнять из главного потока.

  2. Если вы получили ошибку в коллбэке onAdFailedToLoad(), не пытайтесь загрузить новое объявление снова. Если всё же необходимо это сделать, ограничьте число повторных попыток загрузки рекламы. Это поможет избежать постоянных неудачных запросов и проблем с подключением в случае ограничений.

  3. Рекомендуется держать сильную ссылку на объект рекламы SliderAd и ее загрузчик SliderAdLoader на всем протяжении жизни экрана, в рамках которого происходит взаимодействие с рекламой.

  4. После окончания загрузки слайдера все его компоненты должны быть отображены. Список доступных в объявлении компонентов можно получить из объекта SliderAd.

  5. Слайдер содержит набор рекламных объявлений, каждое из которых должно быть отображено.

  6. Каждое рекламное объявление в рамках слайдера содержит набор собственных компонентов. Список доступных в объявлении компонентов можно получить из объекта рекламы NativeAd. Все обязательные компоненты объявления должны быть отображены. Описание рекламных компонентов можно найти на странице Компоненты нативной рекламы.

  7. Размер рекламного контейнера рекомендуется рассчитывать исходя из содержимого объявления.

  8. Показ рекламных объявлений в рамках слайдера должен происходить в пределах одного общего контейнера, иначе показ объявлений не будет засчитан.

  9. Объявления с видео, как правило, показывают лучший результат. Для отображения рекламы с видео необходимо чтобы размер рекламного контейнера и компонента MediaView были не меньше 300x160 dp (density-independent pixels).

  10. Рекомендуется использовать макет, который включает весь набор возможных компонентов. Как показывает практика, макеты, включающие весь набор компонентов, приводит к лучшим конверсиям.

Загрузка слайдера

Для загрузки слайдера нативной рекламы необходимо создать объект SliderAdLoader.

Параметры запроса за рекламой настраиваются через объект класса NativeAdRequestConfiguration.Builder. В качестве параметров запроса можно передать идентификатор рекламного блока, способ загрузки изображений, возраст, гендерные признаки и другие данные, способные улучшить качество подбора рекламы.

Для получения уведомлений о результате загрузки объявлений создайте экземпляр SliderAdLoadListener и установите его в качестве слушателя событий загрузчика слайдера рекламных объявлений.

Для загрузки рекламы, вызовите метод loadAd().

В примере ниже показано, как загрузить нативную рекламу из Activity:

class SliderNativeAdActivity : AppCompatActivity(R.layout.activity_slider_native_ad) {

    private val nativeAdView get() = binding.nativeAd.root

    private var sliderAdLoader: SliderAdLoader? = null

    private lateinit var binding: ActivityCustomNativeAdBinding

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

        sliderAdLoader = createSliderAdLoader()
        sliderAdLoader?.loadSlider(
            // Methods in the NativeAdRequestConfiguration.Builder class can be used here to specify individual options settings.
            NativeAdRequestConfiguration.Builder("your-ad-unit-id").build()
        )
    }

    private fun createSliderAdLoader(): SliderAdLoader {
        return sliderAdLoader ?: SliderAdLoader(this).apply {
            setSliderAdLoadListener(object : SliderAdLoadListener {
                override fun onSliderAdLoaded(p0: SliderAd) {
                    // The slider ad was loaded successfully. Now you can show loaded ads.
                }

                override fun onSliderAdFailedToLoad(p0: AdRequestError) {
                    // Ad failed to load with AdRequestError.
                    // Attempting to load a new ad from the onAdFailedToLoad() method is strongly discouraged.
                }
            })
        }
    }
}

class CustomSliderNativeAdActivity extends AppCompatActivity {
    private NativeAdView mNativeAdView = mBinding.nativeAd.getRoot();

    @Nullable
    private SliderAdLoader mSliderAdLoader = null;

    private ActivityCustomNativeAdBinding mBinding;

    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mBinding = ActivityCustomNativeAdBinding.inflate(getLayoutInflater());
        setContentView(mBinding.getRoot());

        mSliderAdLoader = createSliderAdLoader();
        if (mSliderAdLoader != null) {
            // Methods in the NativeAdRequestConfiguration.Builder class can be used here to specify individual options settings.
            mSliderAdLoader.loadSlider(
                    new NativeAdRequestConfiguration.Builder("your-ad-unit-id").build()
            );
        }
    }

    private SliderAdLoader createSliderAdLoader() {
        if (mSliderAdLoader != null) {
            return mSliderAdLoader;
        }

        final SliderAdLoader newSliderAdLoader = new SliderAdLoader(this);

        newSliderAdLoader.setSliderAdLoadListener(new SliderAdLoadListener() {
            @Override
            public void onSliderAdLoaded(@NonNull SliderAd sliderAd) {
                // The slider ad was loaded successfully. Now you can show loaded ads.
            }

            @Override
            public void onSliderAdFailedToLoad(@NonNull final AdRequestError error) {
                // Ad failed to load with AdRequestError.
                // Attempting to load a new ad from the onAdFailedToLoad() method is strongly discouraged.
            }
        });
        return mSliderAdLoader;
    }
}

Показ слайдера нативных объявлений

После окончания загрузки слайдера все его компоненты необходимо отобразить.

Успешно загруженный слайдер содержит одно или несколько связанных между собой нативных объявлений. Показ рекламных объявлений в рамках слайдера должен происходить в пределах одного общего контейнера, иначе показ объявлений не будет засчитан.

Существует два способа настройки внешнего оформления слайдера:

  • Оформление с помощью шаблона
  • Ручная настройка внешнего оформления слайдера нативной рекламы

Оформление с помощью шаблона

Использование стандартного шаблона оформления — самый простой способ работы со слайдером нативной рекламой, который требует всего нескольких строк кода в базовом варианте.

В шаблоне уже добавлен весь набор необходимых рекламных компонентов и настроено их расположение относительно друг друга. Шаблон работает с любым поддерживаемым типом нативной рекламы.

Оформить слайдер с помощью шаблона очень просто. Привяжите объект SliderAd к корневому контейнеру NativeAdView, а все входящие в слайдер рекламные объявления свяжите с шаблоном.

Пример кода
private fun showAd(sliderAd: SliderAd) {
    try {
        val sliderViewBinder = NativeAdViewBinder.Builder(sliderAdView).build()
        sliderAd.bindSliderAd(sliderViewBinder)
        val nativeAds = sliderAd.nativeAds
        for (nativeAd in nativeAds) {
            val nativeBannerView = NativeBannerView(this)
            nativeBannerView.setAd(nativeAd)
            sliderAdView.addView(nativeBannerView)
        }
    } catch (exception: NativeAdException) {
        //log error
    }
}

private void showAd(@NonNull final SliderAd sliderAd) {
    try {
        final NativeAdViewBinder sliderViewBinder = new NativeAdViewBinder.Builder(mSliderAdView).build();
        sliderAd.bindSliderAd(sliderViewBinder);

        final List<NativeAd> nativeAds = sliderAd.getNativeAds();
        for (final NativeAd nativeAd : nativeAds) {
            final NativeBannerView nativeBannerView = new NativeBannerView(this);
            nativeBannerView.setAd(nativeAd);
            mSliderAdView.addView(nativeBannerView);
        }
    } catch (final NativeAdException exception) {
        //log error
    }
}

Шаблон слайдера нативной рекламы можно кастомизировать. Подробнее об этом в статье Настройка внешнего оформления с помощью шаблона.

Ручная настройка внешнего оформления слайдера нативной рекламы

Ручная настройка внешнего оформления слайдера нативной рекламы используется в тех случаях, когда возможностей настройки шаблона недостаточно для получения желаемого результата.

Данный способ позволяет самостоятельно сверстать макет слайдера нативной рекламы, определить расположение компонентов рекламы относительно друг друга. В объявлении могут присутствовать как обязательные, так и опциональные для показа компоненты. Полный их перечень можно найти в разделе Компоненты нативной рекламы.

Совет

Для каждого объявления в слайдере рекомендуется использовать макет, который включает весь набор возможных компонентов. Как показывает практика, макет, включающий весь набор компонентов, приводит к лучшим конверсиям.

Привяжите объект SliderAd к корневому NativeAdView, а каждое объявление, входящее в слайдер, к дочернему NativeAdView.

Внешнее оформление каждого объявления, входящего в слайдер, настраивается одним из способов оформления стандартной нативной рекламы.

Пример кода
private fun showAd(sliderAd: SliderAd) {
    try {
        val sliderViewBinder = NativeAdViewBinder.Builder(sliderAdView).build()
        sliderAd.bindSliderAd(sliderViewBinder)
        val nativeAds = sliderAd.nativeAds
        for (nativeAd in nativeAds) {
            val nativeAdView: NativeAdView =
                mLayoutInflater.inflate(R.layout.widget_native_ad, sliderAdView, false)
            val viewBinder = NativeAdViewBinder.Builder(nativeAdView)
                .setAgeView(age)
                .setBodyView(body)
                .setCallToActionView(callToAction)
                .setDomainView(domain)
                .setFaviconView(favicon)
                .setFeedbackView(feedback)
                .setIconView(icon)
                .setMediaView(media)
                .setPriceView(price)
                .setRatingView(rating)
                .setReviewCountView(reviewCount)
                .setSponsoredView(sponsored)
                .setTitleView(title)
                .setWarningView(warning)
                .build()
            nativeAd.bindNativeAd(viewBinder)
            sliderAdView.addView(nativeAdView)
        }
    } catch (exception: NativeAdException) {
        //log error
    }
}

private void showAd(@NonNull final SliderAd sliderAd) {
    try {
        final NativeAdViewBinder sliderViewBinder = new NativeAdViewBinder.Builder(mSliderAdView).build();
        sliderAd.bindSliderAd(sliderViewBinder);
        final List<NativeAd> nativeAds = sliderAd.getNativeAds();
        for (final NativeAd nativeAd : nativeAds) {
            final NativeAdView nativeAdView = mLayoutInflater.inflate(R.layout.widget_native_ad, mSliderAdView, false);
            final NativeAdViewBinder viewBinder = new NativeAdViewBinder.Builder(nativeAdView)
                    .setAgeView(age)
                    .setBodyView(body)
                    .setCallToActionView(callToAction)
                    .setDomainView(domain)
                    .setFaviconView(favicon)
                    .setFeedbackView(feedback)
                    .setIconView(icon)
                    .setMediaView(media)
                    .setPriceView(price)
                    .setRatingView(rating)
                    .setReviewCountView(reviewCount)
                    .setSponsoredView(sponsored)
                    .setTitleView(title)
                    .setWarningView(warning)
                    .build();

            nativeAd.bindNativeAd(viewBinder);
            mSliderAdView.addView(nativeAdView);
        }
    } catch (final NativeAdException exception) {
        //log error
    }
}

Тестирование интеграции слайдера нативной рекламы

Использование демоблоков для тестирования рекламы

Для проверки корректной интеграции слайдера нативной рекламы, а также для тестирования вашего приложения, рекомендуется использовать тестовую рекламу.

Для гарантированного возврата тестовых объявлений на каждый запрос за слайдером, мы создали специальный демонстрационный идентификатор рекламного места. Используйте его для проверки корректной интеграции рекламы.

Демонстрационный adUnitId для слайдера нативной рекламы: demo-native-slider-yandex.

Важно

Убедитесь, что перед выкладыванием приложения в store, вы заменили демонстрационный идентификатор рекламного места на настоящий, полученный в ПИ.

Проверка корректной интеграции рекламы

Проверить корректность интеграции слайдера нативной рекламы можно через встроенный в sdk анализатор.

Данный инструмент проверяет корректность подключения слайдера и выводит в лог подробный отчет. Для просмотра отчета, выполните поиск по ключевому слову "YandexAds" в инструменте отладки Android-приложений Logcat.

adb logcat -v brief '*:S YandexAds'

В случае успешной интеграции, вы увидите следующее сообщение:

adb logcat -v brief '*:S YandexAds'
mobileads$ adb logcat -v brief '*:S YandexAds'
I/YandexAds(13719): [Integration] Slider native ad was integrated successfully

В случае обнаружения проблем при интеграции слайдера нативной рекламы — подробный отчет о проблемах и рекомендации по их устранению.