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 fixe
Slider vidéo
Multi-format
Message instantané
Bannière intégrée à la vidéo
Notifications In-Page Push

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

Exemple : Bannière

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

Code publicitaire

Créez une chaîne JavaScript qui contient 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 avec l'ID réel

WebView

Importez le composant WebView dans votre fichier React Native

import { View } from 'react-native';

Ensuite, placez un composant WebView dans la mise en page JSX de votre application. Passez la chaîne HTML au source propriété :

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

Ainsi, vous devriez pouvoir afficher des publicités dans votre application mobile.

Exemple : VAST

Le lecteur vidéo et la balise VAST seront chargés dans une seule chaîne HTML. Cet exemple utilise Fluid Player comme lecteur vidéo pour diffuser des publicités.

Nous utilisons le même processus de configuration que celui démontré dans l'exemple de 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 avec vos propres informations.

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

Zone publicitaire d'application Android native

L'exemple complet fonctionnel est disponible dans ce dépôt

Vous pouvez consulter le code et voir comment la publicité est rendue dans une application Android.

Où trouver l'implémentation ?

Les principaux fichiers responsables de l'affichage de la publicité sont :

Conteneur HTML de la publicité android-native-ads/na_app/app/src/main/assets/exoclick_ads.html Contient le balisage publicitaire ExoClick.
Logique WebView Android android-native-ads/na_app/app/src/main/java/com/exoclick/adtest/MainActivity.kt Charge le fichier HTML. Gère les clics sur les publicités en les ouvrant dans le navigateur externe de l'appareil.

Remarques : Ce projet est conçu comme une simple référence, et non comme une solution de production complète. Il montre la configuration de base nécessaire pour afficher des publicités ExoClick dans une application Android.

PrécédentTutoriels éditeurs SuivantIntégration de zones publicitaires ExoClick avec Vue.js

Mis à jour il y a 12 jours

Ce contenu vous a-t-il été utile ?