Ctrlk
For the complete documentation index, see llms.txt. This page is also available as Markdown.

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

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

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

  • VAST

  • Баннер

  • Фиксированный баннер

  • Видео-слайдер

  • Многоформатный

  • Мгновенное сообщение

  • Баннер в видео

  • In-Page Push Notifications

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

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

1

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

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

npm install react-native-webview

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

import { WebView } from 'react-native-webview';
2

Код рекламы

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

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>
 `;

Не забудьте заменить YOUR_ZONE_ID на фактический ID

3

WebView

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

import { View } from 'react-native';

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

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

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

Пример: VAST

Видеоплеер и VAST-тег будут загружены в одной HTML-строке. В этом примере используется Fluid Player в качестве видеоплеера для показа рекламы.

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

Не забудьте заменить YOUR_ZONE_ID и https://path-to-your-video.mp4 замените на свои данные.

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

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

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

Полный рабочий пример доступен в этом репозитории

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

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

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

  • 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Обрабатывает клики по рекламе, открывая их во внешнем браузере устройства.

Примечания: Этот проект задуман как простой пример, а не как полноценное production-решение. Он показывает базовую настройку, необходимую для отображения рекламы ExoClick внутри Android-приложения.

ПредыдущаяОбновление рекламы: как настроить и использовать обновление рекламыСледующаяИнтеграция рекламной зоны ExoClick с Vue.js

Последнее обновление

Это было полезно?