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.
Beispiel: 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.
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.