跳至主要内容

在应用程序中添加 ExoClick 广告区

移动应用程序支持的广告格式​

您可以使用以下格式：

  • VAST
  • 旗帜
  • 粘贴式横幅
  • 视频滑块
  • 多格式
  • 即时信息
  • 视频内横幅
  • 页面内推送通知

要在应用程序中添加 ExoClick 广告区，您需要使用 react-native-webview 库来显示广告的 HTML 代码。

示例：横幅​

步骤 1.安装并导入 react-native-webview​

运行以下命令

npm install react-native-webview

然后，将 WebView 组件导入 React Native 文件：

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

步骤 2.广告代码​

创建一个 JavaScript 字符串，其中包含广告区域的完整 HTML 代码：

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

请记住将 YOUR_ZONE_ID 替换为实际 ID

步骤 3.网络视图​

将 WebView 组件导入 React Native 文件

import { View } from 'react-native';

接下来，在应用程序的 JSX 布局中放置一个 WebView 组件。将 HTML 字符串传递给source道具：

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

这样，您就可以在移动应用程序中显示广告了。

Adding ExoClick Ad Zones to Apps

示例：VASTVAST​

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.

我们使用与横幅广告示例相同的设置流程。

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

请记住，将 YOUR_ZONE_ID 和 https://path-to-your-video.mp4 替换为您自己的信息。

然后用 WebView 加载它：

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

按照这些步骤操作后，您的应用程序就可以显示视频广告了。

Adding ExoClick Ad Zones to Apps