---
metadata:
  - name: generator
    content: Diplodoc Platform v5.52.0
alternate:
  - https://ads.yandex.com/helpcenter/en/dev/react-native/adaptive-sticky-banner.md
  - https://ads.yandex.com/helpcenter/ru/dev/react-native/adaptive-sticky-banner.md
  - https://ads.yandex.com/helpcenter/zh/dev/react-native/adaptive-sticky-banner.md
  - href: ru/dev/react-native/adaptive-sticky-banner.md
    type: text/markdown
    title: Markdown version
  - href: llms.txt
    type: text/markdown
    title: llms.txt
---
> **Documentation Index:** Fetch the complete configuration index at https://ads.yandex.com/helpcenter/ru/llms.txt

<!--
Используется в Boost: boost/ru/ad-monetization/dev/react-native
-->

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

<!-- source: ru/dev/_includes/adaptive-sticky-banner.md -->
Адаптивный sticky-баннер — небольшое, автоматически обновляемое рекламное объявление. Оно располагается в нижней или верхней части экрана приложения. Баннер не перекрывает основной контент и часто используется в приложениях-играх.
<!-- endsource: ru/dev/_includes/adaptive-sticky-banner.md -->

<!-- source: ru/dev/_includes/adaptive-sticky-banner.md -->
Адаптивный sticky-баннер обеспечивает максимальную эффективность за счет оптимизации размера рекламы для каждого устройства. Данный тип рекламы позволяет разработчикам указывать максимально допустимую ширину объявления, при этом оптимальный размер рекламы определяется автоматически.
<!-- endsource: ru/dev/_includes/adaptive-sticky-banner.md -->

{% cut "Внешний вид" %}

<img src="https://yastatic.net/s3/doc-binary/src/docs/support/mobile-ads/ru/monetization/_images/banner-sticky-ru-ex.png" width="200">

{% endcut %}

Это руководство покажет, как интегрировать адаптивный sticky-баннер в React Native приложение.
В дополнение к примерам кода и инструкции оно также содержит рекомендации по использованию данного формата рекламы, а также ссылки на дополнительные ресурсы.

## Пререквизит {#pre}

<!-- source: ru/dev/_includes/pre-react-native.md -->
1. Выполните шаги по интеграции Yandex Mobile Ads React Native Plugin, описанные в [Быстром старте](https://ads.yandex.com/helpcenter/ru/dev/react-native/quick-start.md).
2. Убедитесь, что используете самую [актуальную версию Yandex Mobile Ads React Native Plugin](https://ads.yandex.com/helpcenter/ru/dev/platforms.md), а в случае использовании медиации — наиболее свежую [версию единой сборки](https://ads.yandex.com/helpcenter/ru/dev/platforms.md).
<!-- endsource: ru/dev/_includes/pre-react-native.md -->

## Имплементация {#implement}

Основные шаги по интеграции адаптивного sticky-баннера:

* Получить размер для баннера.
* Настроить параметры загрузки объявления с помощью `AdRequestParams`.
* Отобразить рекламу, установив необходимые свойства и функции обратного вызова для обработки событий жизненного цикла объявления.

## Особенности подключения адаптивного sticky-баннера {#features}

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

2. Чтобы адаптивные sticky-баннеры работали правильно, [сделайте макеты приложения адаптивными](https://reactnative.dev/docs/flexbox). Невыполнение этого требования может привести к некорректному отображению рекламы.

3. Адаптивные sticky-баннеры лучше всего работают при использовании всей доступной ширины. В большинстве случаев это будет полная ширина экрана используемого устройства. Обязательно учитывайте применимые в приложении отступы (padding) и безопасные зоны (safe area) дисплея.

4. Для получения размера рекламного объявления воспользуйтесь методом `BannerAdSize.stickySize(width)`, принимающим в качестве аргумента доступную ширину рекламного контейнера.

5. Объект `BannerAdSize`, рассчитанный с помощью метода `BannerAdSize.stickySize(width)`, содержит постоянные значения ширины и высоты рекламы для одного и того же устройства. Протестировав макет своего приложения на конкретном устройстве, вы можете быть уверены, что размер объявления не изменится.

6. Высота адаптивного sticky-баннера не будет превышать 15% высоты экрана и будет не меньше 50dp.

## Получение размера баннера

Для получения размера рекламного объявления воспользуйтесь методом `BannerAdSize.stickySize(width)`, принимающим в качестве аргументов доступную ширину рекламного контейнера и максимально допустимую высоту объявления. Обязательно учитывайте применимые в приложении отступы (padding) и безопасные зоны (safe area) дисплея:

```ts
let adSize = await BannerAdSize.stickySize(Dimensions.get('window').width);
```

## Отображение рекламы

Для загрузки рекламы потребуется размер, полученный вами с помощью метода `BannerAdSize.stickySize(width)`, а также идентификатор рекламного места, полученный вами в интерфейсе Рекламной сети Яндекса (adUnitId).

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

Вы также можете передать объект `AdRequestParams` в свойство `adRequest` компонента `BannerView` для расширения параметров запроса.

В следующем примере показано, как установить свойства адаптивного sticky-баннера, а также функции обратного вызова для обработки событий его жизненного цикла. После успешной загрузки, баннер отобразится автоматически:

```ts
const createBanner = async () => {
    let adSize = await BannerAdSize.stickySize(Dimensions.get('window').width);

    return (
        <BannerView
            size={adSize}
            adRequest={{
                adUnitId: 'R-M-XXXXXX-Y', // for debug you can use 'demo-banner-yandex'
                targeting: {
                    age: '20',
                    contextQuery: 'context-query',
                    contextTags: ['context-tag'],
                    gender: Gender.Male,
                    location: new Location(55.734202, 37.588063),
                },
            }}
            onAdLoaded={(event) => console.log(`Did load, adInfo: ${JSON.stringify(event.nativeEvent.adInfo)}`)}
            onAdFailedToLoad={(event: any) => console.log(`Did fail to load with error: ${JSON.stringify(event.nativeEvent)}`)}
            onAdClicked={() => console.log('Did click')}
            onAdImpression={(event: any) => console.log(`Did track impression: ${JSON.stringify(event.nativeEvent.impressionData)}`)}
        />
    );
}
```

## Тестирование интеграции адаптивного sticky-баннера {#test}

{% list tabs %}

- Android

  <!-- source: ru/dev/_includes/test-android-sticky-banner.md -->
  ### Использование демоблоков для тестирования рекламы {#demo-blocks}

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

  Демонстрационный adUnitId: `demo-banner-yandex`.

  {% note warning %}

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

  {% endnote %}

  Список всех доступных демонстрационных идентификаторов рекламного места доступен в разделе [Демоблоки для тестирования](https://ads.yandex.com/helpcenter/ru/dev/android/demo-blocks.md).

  ### Проверка корректной интеграции рекламы {#test-int}

  Проверить корректность интеграции адаптивного sticky-баннера можно через встроенный в SDK анализатор. Подробный отчет о проверке выведется в лог.

  Для просмотра отчета, выполните поиск по ключевому слову YandexAds в инструменте отладки Android-приложений [Logcat](https://developer.android.com/studio/command-line/logcat).

  ```bash
  adb logcat -v brief '*:S YandexAds'
  ```

  В случае успешной интеграции вы увидите следующее сообщение:
  ```bash
  adb logcat -v brief '*:S YandexAds'
  mobileads$ adb logcat -v brief '*:S YandexAds'
  I/YandexAds(13719): [Integration] Ad type banner was integrated successfully
  ```

  В случае обнаружения проблем при интеграции баннерной рекламы вы получите подробный отчет о проблемах и рекомендации по их устранению.
  <!-- endsource: ru/dev/_includes/test-android-sticky-banner.md -->

- iOS

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

  <!-- source: ru/dev/_includes/test-ios-inline-banner.md -->
  Для проверки корректной интеграции рекламы и тестирования приложения используйте тестовую рекламу. Для гарантированного возврата тестовых объявлений на каждый запрос за рекламой вы можете использовать специальный демонстрационный идентификатор рекламного места.

  Демонстрационный adUnitId: `demo-banner-yandex`.

  {% note warning %}

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

  {% endnote %}

  Список всех доступных демонстрационных идентификаторов рекламного места доступен в разделе [Демоблоки для тестирования](https://ads.yandex.com/helpcenter/ru/dev/ios/demo-blocks.md).
  <!-- endsource: ru/dev/_includes/test-ios-inline-banner.md -->

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

  <!-- source: ru/dev/_includes/test-integration-ios.md -->
  Проверить корректность интеграции рекламы можно через нативный инструмент Console.

  Чтобы получить возможность просматривать расширенные логи, необходимо вызвать метод `enableLogging` класса `YandexAds`.

  ```swift
  YandexAds.enableLogging()
  ```

  Для просмотра логов SDK в инструменте Console установите `Subsystem = com.mobile.ads.ads.sdk`. Вы можете фильтровать логи по категории и уровню ошибки.

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

  <img src= "https://yastatic.net/s3/doc-binary/src/dev/mobile-ads/common/integration-ios-2.png">
  <!-- endsource: ru/dev/_includes/test-integration-ios.md -->

{% endlist %}

## Дополнительные ресурсы {#resources}

* <!-- source: ru/dev/_includes/github-pubdev-links.md -->
  Ссылка на [github](https://github.com/yandexmobile/yandex-ads-react-native-plugin).
  <!-- endsource: ru/dev/_includes/github-pubdev-links.md -->