> ## 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를 사용하여 네이티브 광고를 요청하는 방법을 안내합니다.

네이티브 광고는 구조화된 데이터로 반환되어 앱이나 웹의 디자인에 맞게 커스텀 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">
  로케일. 예: `ko_KR`, `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="/ko/sdk/rest-api/banner">
    HTML 배너 광고 구현
  </Card>

  <Card title="타겟팅 설정" icon="bullseye" href="/ko/sdk/rest-api/targeting">
    사용자 속성 및 타겟팅 설정
  </Card>
</CardGroup>