Añadir zonas publicitarias de ExoClick a las aplicaciones

Formatos de anuncios compatibles para aplicaciones móviles

Puedes usar los siguientes formatos:

VAST
Banner
Banner fijo
Deslizador de video
Multiformato
Mensaje instantáneo
Banner en video
Notificaciones In-Page Push

Para añadir zonas de anuncios de ExoClick a tu aplicación, usarás la react-native-webview librería para mostrar el código HTML del anuncio.

Ejemplo: Banner

Instalar e importar react-native-webview

Ejecuta el siguiente comando:

npm install react-native-webview

Luego, importa el componente WebView en tu archivo de React Native:

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

Código del anuncio

Crea una cadena de JavaScript que contenga el código HTML completo para tu zona de anuncios:

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

Recuerda reemplazar YOUR_ZONE_ID con el ID real

WebView

Importa el componente WebView en tu archivo de React Native

import { View } from 'react-native';

A continuación, coloca un componente WebView en el JSX de tu aplicación. Pasa la cadena HTML a la source propiedad:

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

Con eso, deberías poder mostrar anuncios dentro de tu aplicación móvil.

Ejemplo: VAST

El reproductor de video y la etiqueta VAST se cargarán dentro de una sola cadena HTML. Este ejemplo usa Fluid Player como reproductor de video para mostrar anuncios.

Usamos el mismo proceso de configuración que se mostró en el ejemplo del anuncio 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>
`;

Recuerda reemplazar YOUR_ZONE_ID y https://path-to-your-video.mp4 con tu propia información.

Luego cárgalo con WebView:

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

Siguiendo estos pasos, tu aplicación mostrará anuncios de video.

Zona de anuncios de una aplicación Android nativa

El ejemplo completo en funcionamiento está disponible en este repositorio

Puedes revisar el código y ver cómo se renderiza el anuncio dentro de una aplicación Android.

¿Dónde encontrar la implementación?

Los archivos principales responsables de mostrar el anuncio son:

Contenedor HTML del anuncio android-native-ads/na_app/app/src/main/assets/exoclick_ads.html Contiene el marcado del anuncio de ExoClick.
Lógica de Android WebView android-native-ads/na_app/app/src/main/java/com/exoclick/adtest/MainActivity.kt Carga el archivo HTML. Gestiona los clics en los anuncios abriéndolos en el navegador externo del dispositivo.

Notas: Este proyecto está pensado como una referencia sencilla, no como una solución completa de producción. Muestra la configuración básica necesaria para mostrar anuncios de ExoClick dentro de una aplicación Android.

AnteriorRefresco de anuncios: Cómo configurar y usar Ad Refresh SiguienteIntegración de zonas publicitarias de ExoClick con Vue.js

Última actualización hace 1 mes

¿Te fue útil?