Skip to main content

Ajouter des zones publicitaires ExoClick aux applications

Formats publicitaires pris en charge pour les applications mobiles

Vous pouvez utiliser les formats suivants :

  • VAST
  • Bannière
  • Bannière adhésive
  • Slider vidéo
  • Multi-Format
  • Message instantané
  • Bannière vidéo
  • Notifications push in page

Pour ajouter des zones publicitaires ExoClick à votre application, vous utiliserez la bibliothèque react-native-webview pour afficher le code HTML de la publicité.

Exemple : Bannière

Étape 1. Installer et importer react-native-webview

Exécutez la commande suivante :

npm install react-native-webview

Ensuite, importez le composant WebView dans votre fichier React Native :

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

Étape 2. Code publicitaire

Créez une chaîne JavaScript contenant le code HTML complet de votre zone publicitaire :

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

N'oubliez pas de remplacer YOUR_ZONE_ID par l'ID réel

Étape 3. WebView

Importez le composant WebView dans votre fichier React Native

import { View } from 'react-native';

Ensuite, placez un composant WebView dans le layout JSX de votre application. Passez la chaîne HTML à la propriété source :

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

Vous devriez ainsi être en mesure d'afficher des publicités dans votre application mobile.

Adding ExoClick Ad Zones to Apps

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

Nous utilisons le même processus de configuration que celui décrit dans l'exemple de la bannière publicitaire.

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

N'oubliez pas de remplacer YOUR_ZONE_ID et https://path-to-your-video.mp4 par vos propres informations.

Chargez-la ensuite avec WebView :

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

En suivant ces étapes, votre application affichera désormais des publicités vidéo.

Adding ExoClick Ad Zones to Apps