> ## Documentation Index
> Fetch the complete documentation index at: https://docs.adrop.io/llms.txt
> Use this file to discover all available pages before exploring further.

# バナー広告

> REST APIを使用してバナー広告をリクエストする方法を案内します。

バナー広告はHTML形式で返されるため、Webプロジェクトで直接レンダリングできます。他のプラットフォームではWebViewを使用してレンダリングできます。

## リクエストパラメータ

### ヘッダー

<ParamField header="Authorization" type="string" required>
  App Key（adrop\_service.jsonで確認）
</ParamField>

### クエリパラメータ

<ParamField query="unit" type="string" required>
  広告ユニットID
</ParamField>

<ParamField query="uid" type="string">
  ユーザー固有識別子。広告配信頻度制御とターゲティングに使用されます。
</ParamField>

<ParamField query="pf" type="string">
  プラットフォーム。`android`、`ios`、`web`のいずれか
</ParamField>

<ParamField query="lcl" type="string">
  ロケール。例：`ja_JP`、`en_US`
</ParamField>

<ParamField query="theme" type="string">
  テーマモード。`light`または`dark`
</ParamField>

<ParamField query="contextId" type="string">
  コンテキストターゲティングID（ターゲティング広告リクエスト時必須）
</ParamField>

<ParamField query="adId" type="string">
  広告識別子（デバイスプレビュー時必須）
</ParamField>

## レスポンス

<ResponseField name="code" type="integer" required>
  レスポンスコード。`0`は成功を意味します。
</ResponseField>

<ResponseField name="msg" type="string" required>
  レスポンスメッセージ
</ResponseField>

<ResponseField name="result" type="object">
  広告データ

  <Expandable title="result プロパティ">
    <ResponseField name="id" type="string">
      広告ID
    </ResponseField>

    <ResponseField name="format" type="string">
      広告フォーマット。`banner`
    </ResponseField>

    <ResponseField name="type" type="string">
      広告タイプ。`display`または`video`
    </ResponseField>

    <ResponseField name="unit" type="string">
      広告ユニットID
    </ResponseField>

    <ResponseField name="w" type="integer">
      広告幅（px）
    </ResponseField>

    <ResponseField name="h" type="integer">
      広告高さ（px）
    </ResponseField>

    <ResponseField name="ad" type="string">
      HTML広告コンテンツ
    </ResponseField>

    <ResponseField name="target" type="string">
      ブラウザターゲット。`external`または`internal`
    </ResponseField>

    <ResponseField name="carouselActivated" type="boolean">
      カルーセル有効化状態
    </ResponseField>
  </Expandable>
</ResponseField>

<ResponseExample>
  ```json 成功レスポンス theme={null}
  {
      "code": 0,
      "msg": "OK",
      "result": {
          "id": "ad_123456",
          "format": "banner",
          "type": "display",
          "unit": "YOUR_UNIT_ID",
          "w": 320,
          "h": 100,
          "ad": "<div>...</div>",
          "target": "external",
          "carouselActivated": false
      }
  }
  ```
</ResponseExample>

***

## レンダリング

### Webでのレンダリング

```html theme={null}
<div id="ad-container"></div>

<script>
fetch('https://api-v2.adrop.io/request?unit=YOUR_UNIT_ID&uid=USER_ID&pf=web', {
    headers: { 'Authorization': 'YOUR_APP_KEY' }
})
.then(res => res.json())
.then(data => {
    if (data.code === 0) {
        document.getElementById('ad-container').innerHTML = data.result.ad;
    }
});
</script>
```

### カルーセルバナー

カルーセルバナーを使用する場合は、以下のスクリプトを追加してください：

```html theme={null}
<script src="https://storage.adrop.io/js/adrop-carousel-1.0.1.min.js"></script>
```

***

## 関連ドキュメント

<CardGroup cols={2}>
  <Card title="ネイティブ広告" icon="puzzle-piece" href="/ja/sdk/rest-api/native">
    カスタムUIで広告を実装
  </Card>

  <Card title="エラーコード" icon="triangle-exclamation" href="/ja/sdk/rest-api/errors">
    エラー処理方法
  </Card>
</CardGroup>