Ir al contenido principal

Añadir zonas publicitarias de ExoClick a las aplicaciones

Formatos publicitarios compatibles con aplicaciones móviles​

Puede utilizar los siguientes formatos:

  • VAST
  • Banner
  • Banner adhesivo
  • Deslizador de vídeo
  • Multiformato
  • Mensaje instantáneo
  • Banner en vídeo
  • Notificaciones Push In-Page

Para añadir zonas de anuncios ExoClick a su aplicación, utilizará la biblioteca react-native-webview para mostrar el código HTML del anuncio.

Ejemplo: Banner​

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

Ejecute el siguiente comando:

npm install react-native-webview

A continuación, importa el componente WebView en tu archivo React Native:

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

Segundo paso Código del anuncio​

Cree una cadena JavaScript que contenga el código HTML completo de su zona publicitaria:

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

Recuerde sustituir YOUR_ZONE_ID por el ID real

Paso 3. Vista Web​

Importa el componente WebView a tu archivo React Native

import { View } from 'react-native';

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

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

Con eso, usted debería ser capaz de mostrar anuncios dentro de su aplicación móvil.

Adding ExoClick Ad Zones to Apps

Ejemplo: VAST​

El reproductor de vídeo y la etiqueta VAST se cargarán en una sola cadena HTML. En este ejemplo, se utiliza Fluid Player como reproductor de vídeo para mostrar anuncios.

Utilizaremos el mismo proceso de configuración que en el ejemplo del anuncio publicitario.

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

Recuerde sustituir YOUR_ZONE_ID y https://path-to-your-video.mp4 por su propia información.

A continuación, cárguelo con WebView:

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

Siguiendo estos pasos, tu aplicación mostrará ahora anuncios en vídeo.

Adding ExoClick Ad Zones to Apps