> ## 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を使用してネイティブ広告をリクエストする方法を案内します。

ネイティブ広告は構造化データで返されるため、アプリやWebのデザインに合わせてカスタムUIを実装できます。

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

### ヘッダー

<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="trackMode" type="integer">
  `1`に設定するとアセットURLとトラッキングピクセルを返却。この場合、インプレッションとクリックトラッキングを直接実装する必要があります。
</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">
      広告フォーマット。`nativeAd`
    </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広告コンテンツ（trackModeなしの場合）
    </ResponseField>

    <ResponseField name="headline" type="string">
      広告タイトル
    </ResponseField>

    <ResponseField name="body" type="string">
      広告本文
    </ResponseField>

    <ResponseField name="callToAction" type="string">
      CTAボタンテキスト
    </ResponseField>

    <ResponseField name="destinationURL" type="string">
      クリック時の遷移先URL
    </ResponseField>

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

    <ResponseField name="asset" type="string">
      画像URL（trackMode=1）
    </ResponseField>

    <ResponseField name="pixelTracker" type="string">
      インプレッショントラッキングピクセルHTML（trackMode=1）
    </ResponseField>

    <ResponseField name="imprTracker" type="string">
      インプレッショントラッキングURL（trackMode=1）
    </ResponseField>

    <ResponseField name="clickTracker" type="string">
      クリックトラッキングURL（trackMode=1）
    </ResponseField>

    <ResponseField name="profile" type="object">
      広告主情報

      <Expandable title="profile プロパティ">
        <ResponseField name="displayLogo" type="string">
          広告主ロゴURL
        </ResponseField>

        <ResponseField name="displayName" type="string">
          広告主名
        </ResponseField>

        <ResponseField name="link" type="string">
          広告主ウェブサイト
        </ResponseField>
      </Expandable>
    </ResponseField>
  </Expandable>
</ResponseField>

<ResponseExample>
  ```json 基本レスポンス theme={null}
  {
      "code": 0,
      "msg": "OK",
      "result": {
          "id": "ad_123456",
          "format": "nativeAd",
          "unit": "YOUR_UNIT_ID",
          "w": 320,
          "h": 250,
          "ad": "<div>...</div>",
          "headline": "広告タイトル",
          "body": "広告本文の内容です。",
          "callToAction": "詳しく見る",
          "destinationURL": "https://example.com/landing",
          "target": "external",
          "profile": {
              "displayLogo": "https://cdn.adrop.io/logo.png",
              "displayName": "広告主名",
              "link": "https://advertiser.com"
          }
      }
  }
  ```

  ```json trackMode=1 レスポンス theme={null}
  {
      "code": 0,
      "msg": "OK",
      "result": {
          "id": "ad_123456",
          "format": "nativeAd",
          "unit": "YOUR_UNIT_ID",
          "w": 320,
          "h": 250,
          "headline": "広告タイトル",
          "body": "広告本文の内容です。",
          "callToAction": "詳しく見る",
          "destinationURL": "https://example.com/landing",
          "asset": "https://cdn.adrop.io/creative.jpg",
          "pixelTracker": "<img src='...' />",
          "imprTracker": "https://api-v2.adrop.io/impression/...",
          "clickTracker": "https://api-v2.adrop.io/click/...",
          "profile": {
              "displayLogo": "https://cdn.adrop.io/logo.png",
              "displayName": "広告主名",
              "link": "https://advertiser.com"
          }
      }
  }
  ```
</ResponseExample>

***

## トラッキング実装

`trackMode=1`を使用する場合、インプレッションとクリックイベントを直接トラッキングする必要があります。

### インプレッショントラッキング

広告が画面に表示されたら`imprTracker` URLを呼び出します：

```javascript theme={null}
// 広告がビューポートに入ったとき
fetch(response.result.imprTracker);
```

### クリックトラッキング

ユーザーが広告をクリックしたら、まず`clickTracker` URLを呼び出してから`destinationURL`に移動します：

```javascript theme={null}
function handleAdClick(adData) {
    // クリックトラッキング
    fetch(adData.clickTracker).then(() => {
        // ランディングページに移動
        window.open(adData.destinationURL, '_blank');
    });
}
```

***

## カスタムレンダリング例

```html theme={null}
<div class="native-ad" id="native-ad-container">
    <div class="ad-profile">
        <img class="ad-logo" />
        <span class="ad-advertiser"></span>
    </div>
    <img class="ad-image" />
    <h3 class="ad-headline"></h3>
    <p class="ad-body"></p>
    <button class="ad-cta"></button>
</div>

<script>
fetch('https://api-v2.adrop.io/request?unit=YOUR_UNIT_ID&trackMode=1', {
    headers: { 'Authorization': 'YOUR_APP_KEY' }
})
.then(res => res.json())
.then(data => {
    if (data.code === 0) {
        const ad = data.result;

        // 広告コンテンツをレンダリング
        document.querySelector('.ad-logo').src = ad.profile.displayLogo;
        document.querySelector('.ad-advertiser').textContent = ad.profile.displayName;
        document.querySelector('.ad-image').src = ad.asset;
        document.querySelector('.ad-headline').textContent = ad.headline;
        document.querySelector('.ad-body').textContent = ad.body;
        document.querySelector('.ad-cta').textContent = ad.callToAction;

        // インプレッショントラッキング
        fetch(ad.imprTracker);

        // クリックイベント
        document.getElementById('native-ad-container').onclick = () => {
            fetch(ad.clickTracker).then(() => {
                window.open(ad.destinationURL, '_blank');
            });
        };
    }
});
</script>
```

***

## 関連ドキュメント

<CardGroup cols={2}>
  <Card title="バナー広告" icon="rectangle-ad" href="/ja/sdk/rest-api/banner">
    HTMLバナー広告の実装
  </Card>

  <Card title="ターゲティング設定" icon="bullseye" href="/ja/sdk/rest-api/targeting">
    ユーザー属性とターゲティング設定
  </Card>
</CardGroup>