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