Добавление рекламных зон 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 в качестве видеоплеера для показа рекламы.

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

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

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

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

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

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

Рекламная зона для нативного 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-приложения.