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

モバイルアプリ向けの対応広告フォーマット

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

VAST
バナー
固定バナー
ビデオスライダー
マルチフォーマット
インスタントメッセージ
インビデオバナー
In-Page Push通知

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

例: バナー

react-native-webview のインストールとインポート

次のコマンドを実行します:

npm install react-native-webview

次に、React NativeファイルにWebViewコンポーネントをインポートします:

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

次を置き換えることを忘れないでください YOUR_ZONE_ID を実際のIDに置き換えます

WebView

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

import { View } from 'react-native';

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

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

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

例: VAST

ビデオプレーヤーとVASTタグは、1つの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 }}
/>

これらの手順に従うと、アプリに動画広告が表示されるようになります。

ネイティブ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広告を表示するために必要な基本設定を示しています。

前へパブリッシャー向けチュートリアル次へVue.js での ExoClick 広告ゾーン統合

最終更新 19 日前

役に立ちましたか？