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