Перейти к основному содержанию

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

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

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

  • VAST
  • Баннер
  • Липкий баннер
  • Видеослайдер
  • Многоформатный
  • Мгновенное сообщение
  • Баннер в видеоролике
  • Push-уведомления на странице

Чтобы добавить рекламные зоны 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 }}
/>

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

Adding ExoClick Ad Zones to Apps

Пример: VAST​

The video player and the VAST tag will be loaded within a single HTML string. This example uses Fluid Player as the video player to serve ads.

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

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 }}
/>

Выполнив эти действия, ваше приложение теперь будет показывать видеорекламу.

Adding ExoClick Ad Zones to Apps