将 ExoClick 广告位添加到应用程序中

移动应用支持的广告格式

您可以使用以下格式：

VAST
横幅
粘性横幅
视频滑块
多格式
即时消息
视频内横幅
页内推送通知

要将 ExoClick 广告位添加到您的应用中，您将使用 react-native-webview 库来显示广告的 HTML 代码。

示例：横幅

安装并导入 react-native-webview

运行以下命令：

npm install react-native-webview

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

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

广告代码

创建一个包含广告位完整 HTML 代码的 JavaScript 字符串：

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

请记得替换 您的广告位 ID 替换为实际 ID

WebView

将 WebView 组件导入您的 React Native 文件

import { View } from 'react-native';

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

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

这样，您就应该能够在移动应用中显示广告。

示例：VAST

视频播放器和 VAST 标签将作为单个 HTML 字符串加载。此示例使用 Fluid Player 作为视频播放器来投放广告。

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

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

请记得替换 您的广告位 ID 和 https://path-to-your-video.mp4 替换为您自己的信息。

然后使用 WebView 加载它：

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

按照这些步骤，您的应用现在将显示视频广告。

原生 Android 应用广告位

完整可运行示例可在此仓库中获取

您可以查看代码，了解广告如何在 Android 应用中渲染。

在哪里找到实现？

负责展示广告的主要文件是：

HTML 广告容器 android-native-ads/na_app/app/src/main/assets/exoclick_ads.html 包含 ExoClick 广告标记。
Android WebView 逻辑 android-native-ads/na_app/app/src/main/java/com/exoclick/adtest/MainActivity.kt 加载 HTML 文件。通过在设备的外部浏览器中打开广告来处理广告点击。

注意： 本项目仅作为简单参考，而非完整的生产级解决方案。它展示了在 Android 应用中显示 ExoClick 广告所需的基本设置。

上一页广告刷新：如何设置和使用广告刷新下一页ExoClick 广告位与 Vue.js 的集成

最后更新于 1个月前

这有帮助吗？