Adicionar zonas de anúncios ExoClick a apps

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

Pode usar os seguintes formatos:

VAST
Banner
Banner fixo
Slider de vídeo
Multiformato
Mensagem instantânea
Banner em vídeo
Notificações In-Page Push

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

Exemplo: Banner

Instalar e importar react-native-webview

Execute o seguinte comando:

npm install react-native-webview

Depois, importe o componente WebView para o seu ficheiro React Native:

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

Código do anúncio

Crie uma string 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>
 `;

Lembre-se de substituir YOUR_ZONE_ID pelo ID real

WebView

Importe o componente WebView para o seu ficheiro React Native

import { View } from 'react-native';

De seguida, coloque um componente WebView no layout JSX da sua aplicação. Passe a string HTML para a source propriedade:

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

Com isso, deverá conseguir exibir anúncios dentro da sua aplicação móvel.

Exemplo: VAST

O reprodutor de vídeo e a tag VAST serão carregados numa única string HTML. Este exemplo usa Fluid Player como reprodutor de vídeo para exibir anúncios.

Usamos o mesmo processo de configuraçã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>
`;

Lembre-se de substituir YOUR_ZONE_ID e https://path-to-your-video.mp4 com as suas próprias informações.

Depois, carregue-o com WebView:

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

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

Zona de anúncios de aplicação Android nativa

O exemplo completo funcional está disponível neste repositório

Pode rever o código e ver como o anúncio é renderizado dentro de uma aplicação Android.

Onde encontrar a implementação?

Os principais ficheiros responsáveis por servir o anúncio são:

Contentor HTML do anúncio android-native-ads/na_app/app/src/main/assets/exoclick_ads.html Contém a marcação do anúncio ExoClick.
Lógica do WebView Android android-native-ads/na_app/app/src/main/java/com/exoclick/adtest/MainActivity.kt Carrega o ficheiro HTML. Trata os cliques no anúncio abrindo-os no navegador externo do dispositivo.

Notas: Este projeto destina-se a servir como uma referência simples, não como uma solução completa para produção. Mostra a configuração básica necessária para exibir anúncios ExoClick dentro de uma aplicação Android.

AnteriorTutoriais para editores SeguinteIntegração de zona de anúncios ExoClick com Vue.js

Última atualização há 15 dias

Isto foi útil?