Saltar para o conteúdo principal

Adicionar zonas de anúncios da ExoClick a aplicações

Formatos de anúncios suportados para aplicações móveis​

Pode utilizar os seguintes formatos:

  • VAST
  • Bandeira
  • Banner autocolante
  • Controlo deslizante de vídeo
  • Multi-formato
  • Mensagem instantânea
  • Banner no vídeo
  • Notificações push na página

Para adicionar zonas de anúncios ExoClick à sua aplicação, utilizará a biblioteca react-native-webview para apresentar o código HTML do anúncio.

Exemplo: Banner​

Passo 1. Instalar e importar react-native-webview​

Execute o seguinte comando:

npm install react-native-webview

Em seguida, importe o componente WebView para seu arquivo React Native:

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

Passo 2. Código do anúncio​

Crie uma cadeia de JavaScript que contenha o código HTML completo da sua zona de anúncios:

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

Não se esqueça de substituir YOUR_ZONE_ID pelo ID real

Passo 3. WebView​

Importar o componente WebView para o seu ficheiro React Native

import { View } from 'react-native';

Em seguida, coloque um componente WebView no layout JSX do seu aplicativo. Passe a string HTML para a prop source:

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

Com isso, deve poder apresentar anúncios na sua aplicação móvel.

Adding ExoClick Ad Zones to Apps

Exemplo: 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.

Utilizamos o mesmo processo de configuração que o demonstrado no exemplo do anúncio em banner.

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

Não se esqueça de substituir YOUR_ZONE_ID e https://path-to-your-video.mp4 pelas suas próprias informações.

Em seguida, carregue-o com o WebView:

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

Se seguir estes passos, a sua aplicação passará a apresentar anúncios em vídeo.

Adding ExoClick Ad Zones to Apps