ExoClick-Anzeigenzonen zu Apps hinzufügen

Unterstützte Anzeigenformate für mobile Apps

Sie können die folgenden Formate verwenden:

VAST
Banner
Sticky-Banner
Video-Slider
Mehrformat
Sofortnachricht
In-Video-Banner
In-Page-Push-Benachrichtigungen

Um ExoClick-Anzeigenzonen zu Ihrer App hinzuzufügen, verwenden Sie die react-native-webview Bibliothek, um den HTML-Code der Anzeige darzustellen.

Beispiel: Banner

react-native-webview installieren und importieren

Führen Sie den folgenden Befehl aus:

npm install react-native-webview

Importieren Sie dann die WebView-Komponente in Ihre React-Native-Datei:

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

Anzeigencode

Erstellen Sie einen JavaScript-String, der den vollständigen HTML-Code für Ihre Anzeigenzone enthält:

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

Denke daran zu ersetzen YOUR_ZONE_ID durch die tatsächliche ID

WebView

Importieren Sie die WebView-Komponente in Ihre React-Native-Datei

import { View } from 'react-native';

Platzieren Sie als Nächstes eine WebView-Komponente in das JSX-Layout Ihrer App. Übergeben Sie den HTML-String an die source Eigenschaft:

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

Damit sollten Sie Anzeigen in Ihrer mobilen App anzeigen können.

Beispiel: VAST

Der Videoplayer und das VAST-Tag werden in einem einzigen HTML-String geladen. Dieses Beispiel verwendet Fluid Player als Videoplayer, um Anzeigen auszuliefern.

Wir verwenden denselben Einrichtungsprozess wie im Banneranzeigen-Beispiel gezeigt.

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

Denke daran zu ersetzen YOUR_ZONE_ID und https://path-to-your-video.mp4 mit Ihren eigenen Angaben.

Laden Sie es dann mit WebView:

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

Wenn Sie diese Schritte befolgen, zeigt Ihre App nun Videoanzeigen an.

Anzeigenzone für native Android-Apps

Das vollständige funktionsfähige Beispiel ist in diesem Repository

Sie können den Code überprüfen und sehen, wie die Anzeige in einer Android-App gerendert wird.

Wo ist die Implementierung zu finden?

Die Hauptdateien, die für die Auslieferung der Anzeige verantwortlich sind, sind:

HTML-Anzeigencontainer android-native-ads/na_app/app/src/main/assets/exoclick_ads.html Enthält das ExoClick-Anzeigen-Markup.
Android-WebView-Logik android-native-ads/na_app/app/src/main/java/com/exoclick/adtest/MainActivity.kt Lädt die HTML-Datei. Verarbeitet Anzeigenklicks, indem sie im externen Browser des Geräts geöffnet werden.

Hinweise: Dieses Projekt ist als einfache Referenz gedacht, nicht als vollständige Produktionslösung. Es zeigt die grundlegende Einrichtung, die erforderlich ist, um ExoClick-Anzeigen in einer Android-App anzuzeigen.

VorherigeTutorials für Publisher NächsteIntegration von ExoClick-Anzeigenzonen mit Vue.js

Zuletzt aktualisiert vor 15 Tagen

War das hilfreich?