Aggiungere zone pubblicitarie ExoClick alle app

Formati pubblicitari supportati per app mobili

Puoi utilizzare i seguenti formati:

VAST
Banner
Banner sticky
Slider video
Multi-formato
Messaggio istantaneo
Banner in-video
Notifiche In-Page Push

Per aggiungere zone pubblicitarie ExoClick alla tua app, utilizzerai react-native-webview la libreria per visualizzare il codice HTML dell'annuncio.

Esempio: Banner

Installa e importa react-native-webview

Esegui il seguente comando:

npm install react-native-webview

Quindi, importa il componente WebView nel tuo file React Native:

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

Codice dell'annuncio

Crea una stringa JavaScript che contenga il codice HTML completo per la tua zona pubblicitaria:

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

Ricorda di sostituire YOUR_ZONE_ID con l'ID effettivo

WebView

Importa il componente WebView nel tuo file React Native

import { View } from 'react-native';

Quindi, inserisci un componente WebView nel layout JSX della tua app. Passa la stringa HTML a source prop:

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

In questo modo, dovresti essere in grado di visualizzare annunci pubblicitari all'interno della tua app mobile.

Esempio: VAST

Il lettore video e il tag VAST verranno caricati all'interno di una singola stringa HTML. Questo esempio utilizza Fluid Player come lettore video per servire gli annunci.

Utilizziamo lo stesso processo di configurazione mostrato nell'esempio dell'annuncio banner.

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

Ricorda di sostituire YOUR_ZONE_ID e https://path-to-your-video.mp4 con le tue informazioni.

Quindi caricalo con WebView:

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

Seguendo questi passaggi, la tua app visualizzerà ora annunci video.

Zona pubblicitaria per app Android native

L'esempio completo funzionante è disponibile in questo repository

Puoi esaminare il codice e vedere come l'annuncio viene visualizzato all'interno di un'app Android.

Dove trovare l'implementazione?

I principali file responsabili della visualizzazione dell'annuncio sono:

Contenitore HTML dell'annuncio android-native-ads/na_app/app/src/main/assets/exoclick_ads.html Contiene il markup dell'annuncio ExoClick.
Logica WebView Android android-native-ads/na_app/app/src/main/java/com/exoclick/adtest/MainActivity.kt Carica il file HTML. Gestisce i clic sugli annunci aprendoli nel browser esterno del dispositivo.

Note: Questo progetto è pensato come un semplice riferimento, non come una soluzione completa per la produzione. Mostra la configurazione di base necessaria per visualizzare annunci ExoClick all'interno di un'app Android.

PrecedenteTutorial per publisher SuccessivoIntegrazione delle zone pubblicitarie ExoClick con Vue.js

Ultimo aggiornamento 19 giorni fa

È stato utile?