> For the complete documentation index, see [llms.txt](https://docs.exoclick.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.exoclick.com/tutorials/ja/chtoriaru/paburisshkechtoriaru/adding-exoclick-ad-zones-to-apps.md).

# アプリへのExoClick広告ゾーンの追加

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

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

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

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

## 例: バナー

{% stepper %}
{% step %}

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

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

```bash
npm install react-native-webview
```

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

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

{% endstep %}

{% step %}

### 広告コード

広告ゾーンの完全なHTMLコードを含むJavaScript文字列を作成します:

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

{% hint style="info" %}
次を置き換えることを忘れないでください `YOUR_ZONE_ID` を実際のIDに置き換えます
{% endhint %}
{% endstep %}

{% step %}

### WebView

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

```javascript
import { View } from 'react-native';
```

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

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

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

<figure><img src="/files/4776d3f177036391960e31da22c8bcfda3c461f6" alt=""><figcaption></figcaption></figure>
{% endstep %}
{% endstepper %}

## 例: VAST

ビデオプレーヤーとVASTタグは、1つのHTML文字列内で読み込まれます。この例では [Fluid Player](https://www.fluidplayer.com/) を動画プレーヤーとして使用して広告を配信します。

バナー広告の例で示したのと同じセットアップ手順を使用します。

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

{% hint style="info" %}
次を置き換えることを忘れないでください `YOUR_ZONE_ID` と `https://path-to-your-video.mp4` を独自の情報に置き換えます。
{% endhint %}

次に、WebViewで読み込みます:

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

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

<figure><img src="/files/1ffc335df59aa375c1e0896e75158350fbca52b7" alt=""><figcaption></figcaption></figure>

## ネイティブAndroidアプリの広告ゾーン

完全な動作サンプルはこの [リポジトリ](https://github.com/EXOCLICK-TECH/android-native-ads)

コードを確認して、Androidアプリ内で広告がどのようにレンダリングされるかを見ることができます。

<figure><img src="/files/ccf11897ca7c3a6cc886e460cb4b8bc810ed4426" alt="" width="375"><figcaption></figcaption></figure>

### 実装はどこにありますか？

広告配信を担当する主なファイルは次のとおりです:

* **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ファイルを読み込みます。\
  広告クリックは、デバイスの外部ブラウザで開くことで処理します。

{% hint style="info" %}
**注意:** このプロジェクトは、完全な本番向けソリューションではなく、簡単な参考例として作成されています。Androidアプリ内にExoClick広告を表示するために必要な基本設定を示しています。
{% endhint %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.exoclick.com/tutorials/ja/chtoriaru/paburisshkechtoriaru/adding-exoclick-ad-zones-to-apps.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
