> For the complete documentation index, see [llms.txt](https://docs.exoclick.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.exoclick.com/tutorials/ru/uchebnye-materialy/uchebnye-materialy-dlya-izdatelei/adding-exoclick-ad-zones-to-apps.md).

# Добавление рекламных зон ExoClick в приложения

## Поддерживаемые рекламные форматы для мобильных приложений

Вы можете использовать следующие форматы:

* VAST
* Баннер
* Фиксированный баннер
* Видео-слайдер
* Многоформатный
* Мгновенное сообщение
* Баннер в видео
* In-Page Push Notifications

Чтобы добавить рекламные зоны ExoClick в ваше приложение, вы будете использовать `react-native-webview` библиотеку для отображения HTML-кода рекламы.

## Пример: Баннер

{% stepper %}
{% step %}

### Установите и импортируйте react-native-webview

Выполните следующую команду:

```bash
npm install react-native-webview
```

Затем импортируйте компонент WebView в ваш файл React Native:

```javascript
import { WebView } from 'react-native-webview';
```

{% endstep %}

{% step %}

### Код рекламы

Создайте строку JavaScript, содержащую полный HTML-код для вашей рекламной зоны:

```javascript
const bannerAdHTML = `
   <!DOCTYPE html>
   <html>
     <head>
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
     </head>
     <body style="margin:0; padding:0; text-align:center;">
       <script async type="application/javascript" src="https://a.magsrv.com/ad-provider.js"></script>
       <ins class="eas6a97888e2" data-zoneid="YOUR_ZONE_ID"></ins>
       <script>(AdProvider = window.AdProvider || []).push({"serve": {}});</script>
     </body>
   </html>
 `;
```

{% hint style="info" %}
Не забудьте заменить `YOUR_ZONE_ID` на фактический ID
{% endhint %}
{% endstep %}

{% step %}

### WebView

Импортируйте компонент WebView в ваш файл React Native

```javascript
import { View } from 'react-native';
```

Далее добавьте компонент WebView в JSX-разметку вашего приложения. Передайте HTML-строку в `source` свойство:

```javascript
<WebView
  originWhitelist={['*']}
  source={{ html: bannerAdHTML }}
  javaScriptEnabled={true}
  domStorageEnabled={true}
  style={{ height: 250 }}
/>
```

После этого вы сможете отображать рекламу в своем мобильном приложении.

<figure><img src="/files/c072455ee7949183436f75606f0833ed85fb34b3" alt=""><figcaption></figcaption></figure>
{% endstep %}
{% endstepper %}

## Пример: VAST

Видеоплеер и VAST-тег будут загружены в одной HTML-строке. В этом примере используется [Fluid Player](https://www.fluidplayer.com/) в качестве видеоплеера для показа рекламы.

Мы используем тот же процесс настройки, что и в примере с баннерной рекламой.

```javascript
const fluidPlayerHTML = `
 <!DOCTYPE html>
 <html>
   <head>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
   </head>
   <body>
     <video id='my-video' controls>
       <source src='https://path-to-your-video.mp4' type='video/mp4' />
     </video>
     <script src="https://cdn.fluidplayer.com/v3/current/fluidplayer.min.js"></script>
     <script>
       fluidPlayer('my-video', {
         vastOptions: {
           adList: [{
             roll: "preRoll",
             vastTag: "https://s.magsrv.com/v1/vast.php?idzone=YOUR_ZONE_ID"
           }]
         }
       });
     </script>
   </body>
 </html>
`;
```

{% hint style="info" %}
Не забудьте заменить `YOUR_ZONE_ID` и `https://path-to-your-video.mp4` замените на свои данные.
{% endhint %}

Затем загрузите его с помощью WebView:

```javascript
<WebView
  originWhitelist={['*']}
  source={{ html: fluidPlayerHTML }}
  javaScriptEnabled={true}
  domStorageEnabled={true}
  style={{ height: 200 }}
/>
```

Следуя этим шагам, ваше приложение теперь будет отображать видеорекламу.

<figure><img src="/files/d25094fb0355bd4ef326736d4c0f9f4bd43e4ea0" alt=""><figcaption></figcaption></figure>

## Рекламная зона для нативного Android-приложения

Полный рабочий пример доступен в этом [репозитории](https://github.com/EXOCLICK-TECH/android-native-ads)

Вы можете просмотреть код и увидеть, как реклама отображается внутри Android-приложения.

<figure><img src="/files/e349dcae7fe068d9610c14591da2ea5fb7f44292" alt="" width="375"><figcaption></figcaption></figure>

### Где найти реализацию?

Основные файлы, отвечающие за показ рекламы, это:

* **HTML-контейнер рекламы**\
  `android-native-ads/na_app/app/src/main/assets/exoclick_ads.html`\
  Содержит разметку рекламы ExoClick.
* **Логика Android WebView**\
  `android-native-ads/na_app/app/src/main/java/com/exoclick/adtest/MainActivity.kt`\
  Загружает HTML-файл.\nОбрабатывает клики по рекламе, открывая их во внешнем браузере устройства.

{% hint style="info" %}
**Примечания:** Этот проект задуман как простой пример, а не как полноценное production-решение. Он показывает базовую настройку, необходимую для отображения рекламы ExoClick внутри Android-приложения.
{% endhint %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.exoclick.com/tutorials/ru/uchebnye-materialy/uchebnye-materialy-dlya-izdatelei/adding-exoclick-ad-zones-to-apps.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
