本文へスキップ

「アプリにExoClick広告ゾーンを追加する"

モバイルアプリでサポートされている広告フォーマット​

以下のフォーマットを使用できます：

  • ヴァスト
  • バナー
  • スティッキーバナー
  • ビデオスライダー
  • マルチフォーマット
  • インスタントメッセージ
  • ビデオ内バナー
  • ページ内プッシュ通知

アプリにExoClick広告ゾーンを追加するには、react-native-webviewライブラリを使用して広告のHTMLコードを表示します。

例バナー​

ステップ 1.react-native-webviewのインストールとインポート​

以下のコマンドを実行する：

npm install react-native-webview

次に、WebViewコンポーネントをReact Nativeファイルにインポートする：

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

ステップ2.広告コード​

広告ゾーンの完全な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>
 `;

YOUR_ZONE_ID`を実際のIDに置き換えることを忘れずに。

ステップ 3.ウェブ表示​

WebViewコンポーネントをReact Nativeファイルにインポートする

import { View } from 'react-native';

次に、アプリのJSXレイアウトにWebViewコンポーネントを配置します。source`プロップにHTML文字列を渡します：

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

これで、モバイルアプリ内に広告を表示できるようになるはずだ。

Adding ExoClick Ad Zones to Apps

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

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