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​

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.

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