Zum Hauptinhalt springen

Hinzufügen von ExoClick-Werbezonen zu Apps

Unterstützte Anzeigenformate für mobile Apps​

Sie können die folgenden Formate verwenden:

  • VAST
  • Banner
  • Klebebanner
  • Video-Schieberegler
  • Multi-Format
  • Sofortige Nachricht
  • In-Video-Banner
  • Seiteninterne Push-Benachrichtigungen

Um ExoClick-Anzeigenbereiche zu Ihrer Anwendung hinzuzufügen, verwenden Sie die Bibliothek react-native-webview, um den HTML-Code der Anzeige anzuzeigen.

Beispiel: Banner​

Schritt 1. Installieren und Importieren von react-native-webview​

Führen Sie den folgenden Befehl aus:

npm install react-native-webview

Dann importieren Sie die WebView-Komponente in Ihre React Native-Datei:

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

Schritt 2. Anzeigencode​

Erstellen Sie eine JavaScript-Zeichenfolge, die den vollständigen HTML-Code für Ihren Anzeigenbereich 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>
 `;

Denken Sie daran, YOUR_ZONE_ID durch die tatsächliche ID zu ersetzen

Schritt 3. WebView​

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

import { View } from 'react-native';

Als nächstes platzieren Sie eine WebView-Komponente im JSX-Layout Ihrer Anwendung. Übergeben Sie die HTML-Zeichenfolge an die Eigenschaft "source":

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

Damit sollten Sie in der Lage sein, Werbung in Ihrer mobilen App anzuzeigen.

Adding ExoClick Ad Zones to Apps

Beispiel: VAST​

Der Videoplayer und das VAST-Tag werden in einer einzigen HTML-Zeichenfolge geladen. In diesem Beispiel wird Fluid Player als Videoplayer zum Ausliefern von Anzeigen verwendet.

Wir verwenden den gleichen Einrichtungsprozess wie im Beispiel der Bannerwerbung.

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

Denken Sie daran, YOUR_ZONE_ID und https://path-to-your-video.mp4 durch Ihre eigenen Angaben zu ersetzen.

Dann laden Sie es mit WebView:

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

Wenn Sie diese Schritte befolgen, wird Ihre App jetzt Videoanzeigen anzeigen.

Adding ExoClick Ad Zones to Apps

Native Android App Ad Zone​

Das vollständige Arbeitsbeispiel ist in diesem Repository verfügbar

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

Adding ExoClick Ad Zones to Android App

Wo ist die Umsetzung zu finden?​

Die wichtigsten Dateien für die Anzeigenschaltung sind:

  • HTML-Anzeigencontainer android-native-ads/na_app/app/src/main/assets/exoclick_ads.html Enthält das ExoClick-Anzeigenmarkup.
  • 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.